Pixi’VNContenitore (`ImageContainer`)
Utilizzo e funzionalità del componente ImageContainer in Pixi’VN per raggruppare e manipolare più immagini come un singolo componente del canvas.
Il componente ImageContainer estende il componente Container, quindi è possibile utilizzare tutti i metodi e le proprietà di Container. Permette di raggruppare più immagini in un unico componente e di manipolarle come un insieme.
I figli di ImageContainer sono componenti ImageSprite.
import { canvas, ImageContainer } from "@drincs/pixi-vn";
let james = new ImageContainer(
{
anchor: { x: 0.5, y: 0.5 },
x: 100,
y: 100,
},
["m01-body", "m01-eyes", "m01-mouth"],
);
await james.load();
canvas.add("james", james);Rispetto al componente Container, ImageContainer aggiunge le seguenti funzionalità:
load: carica tutti gli URL delle immagini e imposta le texture risultanti nei figli.- Posizionamento aggiuntivo: allineamento e posizione con percentuale.
Mostrare
Il modo più semplice per mostrare un gruppo di immagini sul canvas è utilizzare la funzione showImageContainer. Questa funzione combina load e canvas.add.
import {
canvas,
ImageContainer,
newLabel,
showImageContainer,
} from "@drincs/pixi-vn";
export const startLabel = newLabel("start", [
async () => {
let james = await showImageContainer(
"james",
["m01-body", "m01-eyes", "m01-mouth"],
{
xAlign: 0.5,
yAlign: 1,
},
);
},
() => {
canvas.removeAllTickers();
let tickerId = canvas.animate<ImageContainer>("james", {
xAlign: 0,
yAlign: 1,
});
},
]);Aggiungere
Per aggiungere un gruppo di immagini al canvas, utilizzare la funzione addImageCointainer. Questa funzione aggiunge soltanto il componente al canvas; non lo visualizza né carica la sua texture. Utilizza canvas.add per aggiungere il componente al canvas.
import {
addImageCointainer,
canvas,
ImageContainer,
newLabel,
} from "@drincs/pixi-vn";
export const startLabel = newLabel("start", [
() => {
let james = await addImageCointainer(
"james",
["m01-body", "m01-eyes", "m01-mouth"],
{
xAlign: 0.5,
yAlign: 1,
},
);
},
async () => {
let james = canvas.find<ImageContainer>("james");
james && (await james.load());
},
]);Rimuovere
Come per gli altri componenti del canvas, puoi rimuovere questo componente usando la funzione canvas.remove.