Canvas components functions

Add a canvas component

To add a canvas component to the game window, you can use the canvas.add. The add method have the following parameters:

• alias: Is the alias to identify the component.
• component: The canvas 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); 
    },
]);

Get a canvas component

To get a canvas component from the game window, you can use the canvas.find, if the component does not exist, it will return undefined. The find method have the following parameters:

• alias: The alias of the component to get.

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

Remove a canvas component

To remove a canvas component from the game window, you can use the canvas.remove. The remove method have the following parameters:

• alias: The alias of the component to remove.

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"); 
    },
]);

Remove all canvas components

To remove all canvas components from the game window, you can use the 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(); 
    },
]);

Add a listener for a given event

It is recommended to add event-based components, such as buttons, to the UI. But sometimes, such as when creating minigames, you need to add event-based components to the canvas and be able to save the current state of the canvas.

In Pixi’VN, compared to PixiJS, doesn't give the possibility to use a listener with the on method, because on will associate an event with a lambda and lambdas cannot be saved in the current state of the canvas.

You can use onEvent, it have a same behavior that on, but it will associate an event with a class that extends CanvasEvent.

The onEvent method have the following parameters:

• eventTypes: The event type that will be listened to. You can read the list of events here.
• eventClass: The class that extends CanvasEvent, that 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 save the event in memory. It have a optional parameter that is the id of the event (must be unique). If you don't pass the id, the event will be saved with the class name. ( How enable the 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;
        }
    }
}