canvas functions

Add Canvas Components

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

• alias: Is a alias (or id) for the canvas component. There can only be one item in the canvas with that id, if you add an canvas component with the same alias, the previous canvas component will be removed.
• component: The canvas component to add.

import { canvas, CanvasSprite, Assets } from '@drincs/pixi-vn'

const sprite = new CanvasSprite()
const texture = await Assets.load("path/to/image.png")
sprite.texture = texture
canvas.add('sprite1', sprite)

Get Canvas Components

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 { canvas } from '@drincs/pixi-vn'

const sprite = canvas.find<CanvasSprite>('sprite1')

Remove Canvas Components

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 { canvas } from '@drincs/pixi-vn'

canvas.remove('sprite1')

Remove All Canvas Components

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

import { canvas } from '@drincs/pixi-vn'

canvas.removeAll()

Add a listener for a given event

Note that: It is suggested to try to add events to the UI and not add it to the canvas components.

In Pixi’VN compared to PixiJS you can't set a listener with the on method, because it is not possible to save the listeners in the memory for the save and load operations.

But you can use onEvent, it is a same method that on but you can't pass a lambda function, you must pass a Class.

The class that is passed must have the following characteristics:

• extends the CanvasEvent class
• override the fn method. This method 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? )

@eventDecorator()
export class EventTest2 extends CanvasEvent<CanvasSprite> {
    textureButtonDown = Texture.from('https://pixijs.com/assets/button_down.png');
    textureButtonOver = Texture.from('https://pixijs.com/assets/button_over.png');
    textureButton = Texture.from('https://pixijs.com/assets/button.png');
    override fn(event: CanvasEventNamesType, sprite: CanvasSprite): void {
        if (event === 'pointerdown') {
            (sprite as any).isdown = true;
            sprite.texture = this.textureButtonDown;
            sprite.alpha = 1;
        }
        else if (event === 'pointerup' || event === 'pointerupoutside') {
            (sprite as any).isdown = false;
            if ((sprite as any).isOver) {
                sprite.texture = this.textureButtonOver;
            }
            else {
                sprite.texture = this.textureButton;
            }
        }
        else if (event === 'pointerover') {
            (sprite as any).isOver = true;
            if ((sprite as any).isdown) {
                return;
            }
            sprite.texture = this.textureButtonOver;
        }
        else if (event === 'pointerout') {
            (sprite as any).isOver = false;
            if ((sprite as any).isdown) {
                return;
            }
            sprite.texture = this.textureButton;
        }
    }
}

const button = new CanvasSprite(textureButton);

button.anchor.set(0.5);
button.x = buttonPositions[i * 2];
button.y = buttonPositions[i * 2 + 1];

// Make the button interactive...
button.eventMode = 'static';
button.cursor = 'pointer';

button
    // Mouse & touch events are normalized into
    // the pointer* events for handling different
    // button events.
    .onEvent('pointerdown', EventTest2)
    .onEvent('pointerup', EventTest2)
    .onEvent('pointerupoutside', EventTest2)
    .onEvent('pointerover', EventTest2)
    .onEvent('pointerout', EventTest2);

// Add it to the stage
canvas.add("button", button);