Texture

An image the overlay can draw with render.image. Global class, no import.

const logo = new Texture("assets/logo.png");

Loading is asynchronous. width and height are 0 until ready is true, and render.image draws nothing before that.

Loading

constructor

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.

Keep the images your script ships with in assets/. That folder is published and delivered to buyers with the script; data/ and other folders stay on your disk. See Folder layout.

const icon = new Texture("assets/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.

Without the filesystem permission the file must be inside the script folder.

fromMemory

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.

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);

update

texture.update(data: BufferSource): void

New pixels for the same texture, same size and format as fromMemory. This is how you animate one: draw a graph or a visualizer into a buffer and update one texture every frame. Making a new texture every frame is slow, and every one of them sits in GPU memory until it’s collected.

const w = 128, h = 48;
const pixels = new Uint8Array(w * h * 4);
const graph = Texture.fromMemory(pixels, w, h);

on("render", () => {
    plotFps(pixels, w, h);     // your own drawing into the buffer
    graph.update(pixels);
    render.image(graph, [20, 20], [20 + w, 20 + h]);
});

A file texture can only be updated once it’s ready (ENOTREADY before that).

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.

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 });
});

Overview

Modules

Types

Loading

constructor

fromMemory

update

Properties

Example