Pixi’VNContenedor (`ImageContainer`)
Uso y funcionalidades del componente ImageContainer en Pixi’VN para agrupar y manipular múltiples imágenes como un único componente del canvas.
El componente ImageContainer extiende el componente Container, por lo que puede utilizar todos los métodos y propiedades de Container. Permite agrupar múltiples imágenes en un único componente y manipularlas como una sola unidad.
Los hijos de ImageContainer son componentes 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);En comparación con el componente Container, ImageContainer añade las siguientes funcionalidades:
load: carga todas las URL de imágenes y establece las texturas resultantes en los hijos.- Posicionamiento adicional: alineación y posición con porcentaje.
Mostrar
La forma más sencilla de mostrar un grupo de imágenes en el canvas es utilizar la función showImageContainer. 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,
});
},
]);Agregar
Para añadir un grupo de imágenes al canvas, utilice la función addImageCointainer. Esta función solo añade el componente al lienzo; no lo muestra ni carga su textura. Utiliza canvas.add para agregar el componente al lienzo.
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());
},
]);Eliminar
Al igual que con otros componentes del lienzo, puedes eliminar este componente usando la función canvas.remove.