Pixi’VNConteneur (`ImageContainer`)
Utilisation et fonctionnalités du composant ImageContainer dans Pixi’VN pour regrouper et manipuler plusieurs images en tant que composant de canvas unique.
Le composant ImageContainer étend le composant Container, vous pouvez donc utiliser toutes les méthodes et propriétés de Container. Il vous permet de regrouper plusieurs images en un seul composant et de les manipuler comme un tout.
Les enfants de ImageContainer sont des composants 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);Par rapport au composant Container, ImageContainer ajoute les fonctionnalités suivantes :
load: charge toutes les URL d'images et définit les textures résultantes dans les enfants.- Positionnement supplémentaire : alignement et positionnement en pourcentage.
Afficher
La façon la plus simple d'afficher un groupe d'images sur le canvas est d'utiliser la fonction showImageContainer. Cette fonction combine load et 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,
});
},
]);Ajouter
Pour ajouter un groupe d'images au canvas, utilisez la fonction addImageCointainer. Cette fonction se contente d'ajouter le composant au canvas ; elle ne l'affiche pas et ne charge pas sa texture. Elle utilise canvas.add pour ajouter le composant au 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());
},
]);Supprimer
Comme pour les autres composants du canvas, vous pouvez supprimer ce composant en utilisant la fonction canvas.remove.