Funzioni dei componenti canvas

Funzioni per aggiungere, trovare, rimuovere e gestire gli eventi sui componenti canvas in Pixi'VN.

Modifica su GitHub Traduci su Crowdin

Aggiungi

Per aggiungere un componente al canvas di gioco, puoi usare canvas.add. Questa funzione ha i seguenti parametri:

alias: L'alias per identificare il componente.
component: Il componente da aggiungere.

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

Ottieni

Per ottenere un componente dal canvas di gioco, puoi usare canvas.find. Se il componente non esiste, restituirà undefined. Questa funzione ha i seguenti parametri:

alias: L'alias per identificare il componente.

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

Rimuovi

Per rimuovere un componente dal canvas di gioco, puoi usare canvas.remove. Questa funzione ha i seguenti parametri:

alias: L'alias per identificare il componente.

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

Rimuovi tutto

Per rimuovere tutti i componenti dal canvas di gioco, puoi usare 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(); 
    },
]);

Aggiungere un listener a un evento

Se possibile, prova a utilizzare HTML e PixiJS UI per aggiungere pulsanti o altri elementi con eventi.

In Pixi'VN, a differenza di PixiJS, non è possibile utilizzare un listener con il metodo on (perché on associa un evento a una lambda e le lambda non possono essere salvate nello stato corrente del canvas).

È possibile utilizzare onEvent, che ha un comportamento simile a on, ma associa un evento a una classe che estende CanvasEvent. Questa funzione ha i seguenti parametri:

eventTypes: Il tipo di evento che verrà ascoltato. Puoi leggere l'elenco dei tipi di eventi qui.
eventClass: La classe che estende CanvasEvent e che verrà eseguita quando l'evento viene attivato. Questa classe deve:
- avere il metodo fn che verrà eseguito quando l'evento viene attivato.
- avere il decorator @eventDecorator. @eventDecorator è un decorator che salva l'evento nella memoria. Ha un parametro facoltativo che è l'id utilizzato da Pixi'VN per fare riferimento a questa classe (deve essere univoco). Se non si passa l'id, verrà utilizzato come id il nome della classe. (Come abilitare i decorator 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;
        }
    }
}

Three.js

Previous Page

Position properties

Next Page

On this page

Aggiungi Ottieni Rimuovi Rimuovi tutto Aggiungere un listener a un evento