Pixi’VNComponents 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);
},
]);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;
}
},
]);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");
},
]);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();
},
]);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 use a listener with the on method, but if you don't use the @eventDecorator decorator, the event will not be registered in the Pixi’VN event system, so if you load a save where that event was used, it will be lost.
@eventDecorator is a decorator that saves the event in memory (How to enable decorators in TypeScript?). This function has the following parameters:
name: The id used by Pixi’VN to refer to this function (must be unique). If you don't pass the id, the function name will be used as the id.
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;
}
}
}