Pixi’VNContainer (`ImageContainer`)
Usage and features of the ImageContainer component in Pixi’VN for grouping and manipulating multiple images as a single canvas component.
The ImageContainer component extends the Container component, so you can use all the methods and properties of Container. It allows you to group multiple images into a single component and manipulate them as one.
The children of the ImageContainer are ImageSprite components.
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);Compared to the Container component, ImageContainer adds the following features:
load: Loads all image URLs and sets the resulting textures in the children.- Additional positioning: align and position with percentage.
Show
The simplest way to show a group of images on the canvas is to use the showImageContainer function. This function combines load and 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,
});
},
]);Add
To add a group of images to the canvas, use the addImageCointainer function. This function only adds the component to the canvas; it does not show it or load its texture. It uses canvas.add to add the component to the 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());
},
]);Remove
As with other canvas components, you can remove this component using the canvas.remove function.