Pixi'VN - Canvas components functions

Functions for adding, finding, removing, and handling events on canvas components in Pixi’VN.

Add

To add a component to the game canvas, you can use canvas.add. This function has the following parameters:

alias: The alias to identify the component.
component: The component to add.

import { Assets, canvas, newLabel, Sprite } from "@drincs/pixi-vn";

export const startLabel = newLabel("start_label", [
    async () => {
        const sprite = new Sprite();
        const texture = await Assets.load("egg_head");
        sprite.texture = texture;
        canvas.add("sprite", sprite); 
    },
]);

import { Assets } from "@drincs/pixi-vn";

export async function defineAssets() {
    Assets.add({ alias: "egg_head", src: "https://pixijs.com/assets/eggHead.png" });
}

Get

To get a component from the game canvas, you can use canvas.find. If the component does not exist, it will return undefined. This function has the following parameters:

alias: The alias to identify the component.

import { Assets, canvas, newLabel, Sprite } from "@drincs/pixi-vn";

export const startLabel = newLabel("start_label", [
    async () => {
        const sprite = new Sprite();
        const texture = await Assets.load("egg_head");
        sprite.texture = texture;
        canvas.add("sprite", sprite);
    },
    () => {
        const sprite = canvas.find("sprite"); 
        if (sprite) {
            sprite.x = 100;
            sprite.y = 100;
        }
    },
]);

import { Assets } from "@drincs/pixi-vn";

export async function defineAssets() {
    Assets.add({ alias: "egg_head", src: "https://pixijs.com/assets/eggHead.png" });
}

Remove

To remove a component from the game canvas, you can use canvas.remove. This function has the following parameters:

alias: The alias to identify the component.

import { Assets, canvas, newLabel, Sprite } from "@drincs/pixi-vn";

export const startLabel = newLabel("start_label", [
    async () => {
        const sprite = new Sprite();
        const texture = await Assets.load("egg_head");
        sprite.texture = texture;
        canvas.add("sprite", sprite);
    },
    () => {
        canvas.remove("sprite"); 
    },
]);

import { Assets } from "@drincs/pixi-vn";

export async function defineAssets() {
    Assets.add({ alias: "egg_head", src: "https://pixijs.com/assets/eggHead.png" });
}

Remove all

To remove all components from the game canvas, you can use canvas.removeAll.

import { Assets, canvas, newLabel, Sprite } from "@drincs/pixi-vn";

export const startLabel = newLabel("start_label", [
    async () => {
        const texture = await Assets.load("egg_head");
        for (let i = 0; i < 3; i++) {
            const sprite = new Sprite();
            sprite.texture = texture;
            sprite.x = i * 150;
            canvas.add(`sprite${i}`, sprite);
        }
    },
    () => {
        canvas.removeAll(); 
    },
]);

import { Assets } from "@drincs/pixi-vn";

export async function defineAssets() {
    Assets.add({ alias: "egg_head", src: "https://pixijs.com/assets/eggHead.png" });
}

Add a listener to an event

If possible, try using HTML and PixiJS UI to add buttons or other elements with events.

In Pixi’VN, compared to PixiJS, you can't use a listener with the on method (because on associates an event with a lambda, and lambdas cannot be saved in the current state of the canvas).

You can use onEvent, which has similar behavior to on, but associates an event with a class that extends CanvasEvent. This function has the following parameters:

eventTypes: The event type that will be listened to. You can read the list of event types here.
eventClass: The class that extends CanvasEvent and will be executed when the event is triggered. This class must:
- have the fn method that will be executed when the event is triggered.
- have the decorator @eventDecorator. @eventDecorator is a decorator that saves the event in memory. It has an optional parameter that is the id used by Pixi’VN to refer to this class (must be unique). If you don't pass the id, the class name will be used as the id. (How to enable decorators in TypeScript?)

import { CanvasEvent, CanvasEventNamesType, eventDecorator, Sprite } from "@drincs/pixi-vn";

@eventDecorator()
export default class ButtonEvent extends CanvasEvent<Sprite> {
    override fn(event: CanvasEventNamesType, sprite: Sprite): void {
        switch (event) {
            case "pointerdown":
                sprite.scale.x *= 1.25;
                sprite.scale.y *= 1.25;
                break;
        }
    }
}

import { newLabel, showImage } from "@drincs/pixi-vn";
import ButtonEvent from "../canvas/events/ButtonEvent";

export const startLabel = newLabel("start_label", [
    async () => {
        const bunny = await showImage("bunny", "bunny", {
            align: 0.5,
            anchor: 0.5,
        });
        // Opt-in to interactivity
        bunny.eventMode = "static";
        // Shows hand cursor
        bunny.cursor = "pointer";
        // Pointers normalize touch and mouse (good for mobile and desktop)
        bunny.onEvent("pointerdown", ButtonEvent); 
    },
]);

import { Assets } from "@drincs/pixi-vn";

export async function defineAssets() {
    Assets.add({ alias: "bunny", src: "https://pixijs.com/assets/bunny.png" });
}

Canvas components functions

Add

Get

Remove

Remove all

Add a listener to an event

On this page