Funzioni dei componenti

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

Modifica su GitHub Traduci su Crowdin Chiedi a ChatGPT Patreon

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, rispetto a PixiJS, è possibile utilizzare un listener con il metodo on, ma se non si utilizza il decoratore @eventDecorator, l'evento non verrà registrato nel sistema di eventi di Pixi'VN, quindi se si carica un salvataggio in cui è stato utilizzato quell'evento, questo andrà perso.

@eventDecorator è un decorator che salva l'evento in memoria (Come abilitare i decorator in TypeScript?). Questa funzione ha i seguenti parametri:

name: L'ir utilizzato da Pixi'VN per fare riferimento a questa funzione (deve essere univoco). Se non si passa l'id, verrà utilizzato come id il nome della funzione.

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

export default class Events {
    @eventDecorator()
    static buttonEvent(event: FederatedEvent, sprite: Sprite): void {
        switch (event.type) {
            case "pointerdown":
            sprite.scale.x *= 1.25;
            sprite.scale.y *= 1.25;
            break;
        }
    }
}

On this page

Aggiungi Ottieni Rimuovi Rimuovi tutto Aggiungere un listener a un evento