Creators

What puts something in the game: the game itself, scenes, sprites, text, models, particles, packs and the rest.

18 functionsThe descriptions and examples come from the engine's own documentation, which is in English.

Game

createGame

Puts a game in the page: a canvas inside target, drawn at width × height.

createGame(target: TGameTarget, game_options: TGameOptions) => (scenes: Readonly<Record<string, TSceneFn>>, initialScene?: string) => TGameInstance

Example

const Title: TSceneFn = () => createScene();
const Level: TSceneFn = () => createScene();

const game = createGame('#game', {
    width: 320,
    height: 224,
    background: getColor('#000000'),
    scaling: 'integer',
})({ Title, Level }, 'Title');

game.on('error', (error) => console.error(error));

Full entry in the reference

Scenes

createScene

Ends a scene's body, and is what it returns: return createScene().

createScene(children: typeOperator) => TScene

Example

const Menu: TSceneFn = () => createScene();

const Level: TSceneFn = () => {
    const hero = createSprite({ width: 16, height: 16 });
    useUpdate((delta) => {
        hero.transform.x += 30 * delta;
    });
    return createScene();
};

createGame('#app', { width: 320, height: 240 })({ Menu, Level });

Full entry in the reference

Game objects

createMaterial

Makes a material: a shader of your own, and for models the surface it is drawn over.

Example

const Level = () => {
    const texture = useLoadTexture({ src: '/assets/hero.png' });

    const crt = createMaterial({
        fragment: `fn effect(color: vec4<f32>, uv: vec2<f32>) -> vec4<f32> {
            let band = 0.5 + 0.5 * sin(uv.y * mu.lines + mu.time * 6.0);
            return vec4<f32>(color.rgb * band, color.a);
        }`,
        uniforms: { lines: 200 },
    });

    createSprite({ texture, material: crt });

    return createScene();
};

Full entry in the reference

createMesh

Puts a model in the scene: a shape, somewhere, with a surface.

createMesh(options: TMeshOptions) => TMesh

Example

const Level = () => {
    useCamera3d({ projection: 'perspective', z: 4 });
    const crate = createMesh({ geometry: useCubeGeometry(), tint: getColor('#c08040') });

    useUpdate((delta) => {
        crate.transform.rotationY += delta;
    });

    return createScene();
};

Full entry in the reference

createModel

Puts a loaded model in the scene.

createModel(options: TModelOptions) => TModel

Example

const Level = () => {
    useCamera3d({ projection: 'perspective', z: 6 });
    useLight({ intensity: 1 });

    const tower = useLoadGltf({ src: '/models/tower.glb' });
    const placed = createModel({ model: tower, transform: { y: -1 } });

    useUpdate((delta) => {
        placed.transform.rotationY += delta * 0.5;
    });

    return createScene();
};

Full entry in the reference

createNineSlice

Puts a picture in the scene that can be any size without deforming: a panel, a button, a dialogue box, a health bar.

createNineSlice(options: TNineSliceOptions) => TNineSlice

Example

export const Menu: TSceneFn = () => {
    useLoadTexture({ src: '/assets/ui/panel.png', key: 'panel' });
    const panel = createNineSlice({
        key: 'panel',
        slice: 8,
        width: 200,
        height: 64,
        transform: { x: 160, y: 120 },
        onClick: () => { panel.width += 16; },
    });

    return createScene();
};

Full entry in the reference

createPack

Places one thing a pack offers: a box, or a scene as one part of the scene that creates it.

createPack(options: TPackOptions) => TBox

Example

const Menu: TSceneFn = () => {
    const ui = useLoadPack({ src: '/packs/ui-kit' });
    createPack({ pack: ui, box: 'Button', transform: { x: 160, y: 120 } });
    createPack({ pack: ui, box: 'Button', transform: { x: 160, y: 160 }, props: { label: 'QUIT' } });
    return createScene();
};

Full entry in the reference

createParticles

Puts an emitter in the scene: a place that makes particles, following an effect from a file.

createParticles(options: TParticlesOptions) => TParticles

Example

const Level = () => {
    const fire = useLoadParticles({ src: '/effects/fire.particles' });

    createParticles({ effect: fire, transform: { x: 150, y: 250 } });

    return createScene();
};

Full entry in the reference

createParticles3d

Puts an emitter in a scene in three dimensions, following an effect written for them.

createParticles3d(options: TParticles3dOptions) => TParticles3d

Example

const Campfire = () => {
    const fire = useLoadParticles({ src: '/effects/campfire3d.particles' });

    createParticles3d({ effect: fire, transform: { y: 0.1 } });

    return createScene();
};

Full entry in the reference

createSpriteTexture

Makes a picture and fills it with a component: whatever component draws, and whatever it creates with useSpawn, ends up in the picture instead of on the screen, every frame.

createSpriteTexture(options: TSpriteTextureOptions, component?: (args: TArgs) => unknown, args: TArgs) => TTexture

Example

const Screen = () => {
    const pet = createSprite({ key: 'pet', transform: { x: 40, y: 40 } });
    useUpdate((delta) => {
        pet.transform.x += delta * 10;
    });
};

const Level = () => {
    useCamera3d({ projection: 'perspective', z: 3 });
    const screen = createSpriteTexture({ width: 128, height: 128 }, Screen);
    createMesh({ geometry: useCubeGeometry(), texture: screen });
    return createScene();
};

Full entry in the reference

createText

Writes something on screen with a bitmap font: a score, a title, a menu, "PRESS START".

createText(options: TTextOptions) => TText

Example

export const Level: TSceneFn = () => {
    // No font given: the engine's own.
    const score = createText({ text: 'SCORE 0', style: { fontSize: 16 }, transform: { x: 8, y: 8 } });
    // A font of your own, loaded from its two files.
    const font = useLoadFont({ json: '/fonts/arcade/arcade.json', atlas: '/fonts/arcade/arcade.png' });
    createText({ text: 'HI SCORE', font, transform: { x: 8, y: 28 } });
    let points = 0;

    useUpdate(() => {
        points += 1;
        score.text = 'SCORE ' + points;
    });

    return createScene();
};

Full entry in the reference

Store

createGameStore

Makes a store: data of the game that outlives a scene (lives, coins, options, a pet), with a way to be told when it changes and, optionally, to be saved and loaded.

createGameStore(config: TGameStoreConfig<S, A>) => TGameStore<S, A>

Example

declare const pet: TSprite;
const GREEN = getColor('#40c040');
const RED = getColor('#e04040');

// stores/pet.ts
export const petStore = createGameStore({
    key: 'pet',
    state: { hunger: 70, timesFed: 0 },
    actions: (set) => ({
        feed: () => set((s) => { s.hunger = Math.min(100, s.hunger + 15); s.timesFed++; }),
    }),
    persist: { adapter: localStorageAdapter() },
});

// when the game starts
await petStore.load();

// in a scene
useStore(petStore, (s) => s.hunger > 30, (content) => { pet.tint = content ? GREEN : RED; });

Full entry in the reference

Signals

createGameSignal

Makes a signal: a way for one part of the game to say "this happened" and for any other part to react, without the two knowing about each other.

createGameSignal() => TGameSignal<T>

Example

let score = 0;

// events.ts
export const coinCollected = createGameSignal<number>();

// coin.ts
coinCollected.emit(10);

// hud.ts, inside a scene
useSignal(coinCollected, (points) => { score += points; });

Full entry in the reference

Sprites

createSprite

Puts a picture in the scene: an image from useLoadTexture, a frame of a sheet, or a plain coloured rectangle when it has neither.

Example

export const Level: TSceneFn = () => {
    const texture = useLoadTexture({ src: '/assets/hero.png' });
    const hero = createSprite({ texture, transform: { x: 160, y: 120 } });
    // No picture: a coloured rectangle, placed by its top-left corner.
    createSprite({ width: 320, height: 16, tint: getColor('#3a2a1a'), anchor: { x: 0, y: 0 }, transform: { y: 224 } });

    useUpdate((delta) => {
        hero.transform.rotation += delta;
    });

    return createScene();
};

Full entry in the reference

Tilemaps

createTilemap

Loads a map and draws it: one call per layer, however many cells it has.

createTilemap(options: TTilemapOptions) => TTilemap

Example

export const Level: TSceneFn = () => {
    const map = createTilemap({ src: '/maps/level1.tilemap' });
    const player = createSprite({ key: 'hero', zIndex: 0 });

    useUpdate((delta) => {
        // The ground layer is drawn under the player and the treetops over them, because the
        // file says 'under' and 'over' and the player never mentioned a number at all.
        if (!solidAtPoint(map, player.transform.x + 8, player.transform.y)) {
            player.transform.x += 60 * delta;
        }
    });

    return createScene();
};

Full entry in the reference

Assets & loading

createSpriteAtlas

Describes a sheet as a grid of frames, so many pictures can live in one image.

createSpriteAtlas(options: TSpriteAtlasOptions) => TSpriteAtlas

Example

const walk = useLoadTexture({ src: '/assets/walk.png', key: 'walk' });
const sheet = createSpriteAtlas({ texture: walk, columns: 6 });

createSprite({ atlas: sheet, frame: 0, transform: { x: 80, y: 120 } });

Full entry in the reference

Physics

createPhysicsBody2d

A complete flat collider from a partial description.

createPhysicsBody2d(options: { id, name, body, collider } & Partial<TPhysicsSurface>) => TPhysicsBody2d

Full entry in the reference

createPhysicsBody3d

A complete collider in three dimensions from a partial description: the sibling of createPhysicsBody2d, filling in the same defaults.

createPhysicsBody3d(options: { id, name, body, collider, offset } & Partial<TPhysicsSurface>) => TPhysicsBody3d

Full entry in the reference