ImageContainer

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.

To initialize this component, you must pass the following parameters:

• options (Optional): The options for the component, matching the ImageContainerOptions<ImageSprite> interface.
• imageUrls (Optional): An array of image URLs or paths. If you have initialized the asset matrix, you can use the alias of the texture.

import { canvas, ImageContainer } from "@drincs/pixi-vn"

let james = new ImageContainer({
    anchor: { x: 0.5, y: 0.5 },
    x: 100,
    y: 100,
}, [
    'https://image.com/body.webp',
    'https://image.com/head.webp',
    'https://image.com/eyes.webp',
])

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.

This function returns an ImageContainer that you can use to manipulate the component. This function has the following parameters:

• alias: The alias to identify the component.
• imageUrls (Optional): An array of image URLs or paths. If you have initialized the asset matrix, you can use the alias of the texture.
• options (Optional): The options for the container.

import { canvas, MoveTicker, newLabel, showImageContainer } from "@drincs/pixi-vn";

export const startLabel = newLabel("start_label", [
    async () => {
        let james = await showImageContainer("james", ["m01-body", "m01-eyes", "m01-mouth"], { 
            xAlign: 0.5, 
            yAlign: 1, 
        }); 
    },
    () => {
        canvas.removeAllTickers();
        let tickerId = canvas.addTicker("james", new MoveTicker({ destination: { x: 0, y: 1, type: "align" } }));
    },
]);

import { Assets } from "@drincs/pixi-vn";

export async function defineAssets() {
    Assets.add({ alias: 'm01-body', src: "https://firebasestorage.googleapis.com/v0/b/pixi-vn.appspot.com/o/public%2Fbreakdown%2Fm01%2Fm01-body.webp?alt=media" })
    Assets.add({ alias: 'm01-eyes', src: "https://firebasestorage.googleapis.com/v0/b/pixi-vn.appspot.com/o/public%2Fbreakdown%2Fm01%2Fm01-eyes-smile.webp?alt=media" })
    Assets.add({ alias: 'm01-mouth', src: "https://firebasestorage.googleapis.com/v0/b/pixi-vn.appspot.com/o/public%2Fbreakdown%2Fm01%2Fm01-mouth-smile00.webp?alt=media" })
}

Add

To add a group of images to the canvas, you can 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 image to the canvas.

This function returns an ImageContainer that you can use to manipulate the container. This function has the following parameters:

• alias: The alias to identify the component.
• imageUrls (Optional): An array of image URLs or paths. If you have initialized the asset matrix, you can use the alias of the texture. If not provided, the alias is used as the URL.
• options (Optional): The options for the container.

import { addImageCointainer, canvas, ImageContainer, newLabel } from "@drincs/pixi-vn";

export const startLabel = newLabel("start_label", [
    () => {
        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());
    },
]);

import { Assets } from "@drincs/pixi-vn";

export async function defineAssets() {
    Assets.add({ alias: 'm01-body', src: "https://firebasestorage.googleapis.com/v0/b/pixi-vn.appspot.com/o/public%2Fbreakdown%2Fm01%2Fm01-body.webp?alt=media" })
    Assets.add({ alias: 'm01-eyes', src: "https://firebasestorage.googleapis.com/v0/b/pixi-vn.appspot.com/o/public%2Fbreakdown%2Fm01%2Fm01-eyes-smile.webp?alt=media" })
    Assets.add({ alias: 'm01-mouth', src: "https://firebasestorage.googleapis.com/v0/b/pixi-vn.appspot.com/o/public%2Fbreakdown%2Fm01%2Fm01-mouth-smile00.webp?alt=media" })
}

Remove

As with other canvas components, you can remove this component using the canvas.remove function.