> ## Documentation Index
> Fetch the complete documentation index at: https://docs.spurdoverse.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Texture

> Images from files or raw pixels, for render.image.

An image the overlay can draw with [render.image](/api/render#image). Global class, no import.

```ts theme={null}
const logo = new Texture("assets/logo.png");
```

<Note>
  Loading is asynchronous. `width` and `height` are `0` until `ready` is `true`, and `render.image` draws nothing before that.
</Note>

***

## Loading

### constructor

<br />

```ts theme={null}
new Texture(path: string, options?: { width?: number; height?: number })
```

Loads a PNG, JPG, BMP, TGA, GIF (first frame) or SVG. `path` is relative to the script folder. A missing file throws `Error` with code `ENOENT`.

```ts theme={null}
const icon = new Texture("icons/bomb.png");
const logo = new Texture("assets/logo.svg", { width: 64 });   // height keeps the aspect ratio
```

`width` and `height` only apply to SVG and set its raster size.

<Warning>
  Without the `filesystem` [permission](/api/manifest#permissions) the file must be inside the script folder.
</Warning>

### fromMemory

<br />

```ts theme={null}
Texture.fromMemory(data: BufferSource, width: number, height: number): Texture
```

A texture from raw RGBA8 pixels: row-major, 4 bytes per pixel, no row padding. `data` is copied, so you can reuse it.

```ts theme={null}
const size = 32;
const pixels = new Uint8Array(size * size * 4);
for (let i = 0; i < size * size; i++) {
    const x = i % size;
    pixels.set([255, 255, 255, Math.round((x / (size - 1)) * 255)], i * 4);   // white, fading in
}
const gradient = Texture.fromMemory(pixels, size, size);
```

***

## Properties

| Property | Type | |
| :- | :- | :- |
| `ready` | `boolean` | `true` once loaded. Stays `false` if the file couldn't be decoded. |
| `width`, `height` | `number` | Size in pixels, `0` until `ready` |
| `path` | `string` or `null` | The resolved file path, `null` for `fromMemory` textures |

`toString()` gives something like `Texture(64x64, ready, "C:/…/logo.svg")`.

***

## Example

A logo in the top-right corner at its real size, once it has loaded.

```ts theme={null}
import render from "@native/render";

const logo = new Texture("assets/logo.svg", { height: 48 });

on("render", () => {
    if (!logo.ready) return;

    const max = new Vector2(render.screenSize.x - 16, 16 + logo.height);
    const min = max.sub([logo.width, logo.height]);
    render.image(logo, min, max, { tint: Color.white().withAlphaF(0.8), rounding: 6 });
});
```