# Container (`ImageContainer`) (/start/canvas-image-container)



The [`ImageContainer`](/jsdoc/pixi-vn/index/classes/ImageContainer) component extends the [`Container`](/jsdoc/pixi-vn/index/classes/Container) component, so you can use all the methods and properties of [`Container`](/jsdoc/pixi-vn/index/classes/Container). It allows you to group multiple images into a single component and manipulate them as one.

The children of the [`ImageContainer`](/jsdoc/pixi-vn/index/classes/ImageContainer) are [`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite) components.

<CodeBlockTabs defaultValue="main.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="main.ts">
      main.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="src/assets/manifest.gen.json">
      src/assets/manifest.gen.json
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="main.ts">
    ```ts
    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);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="src/assets/manifest.gen.json">
    ```json
    {
        "bundles": [
            {
                "name": "m01",
                "assets": [
                    {
                        "alias": "m01-body",
                        "src": "./assets/m01/m01-body.png"
                    },
                    {
                        "alias": "m01-head",
                        "src": "./assets/m01/m01-head.png"
                    },
                    {
                        "alias": "m01-eyes",
                        "src": "./assets/m01/m01-eyes.png"
                    }
                ]
            }
        ]
    }
    ```
  </CodeBlockTab>
</CodeBlockTabs>

Compared to the [`Container`](/jsdoc/pixi-vn/index/classes/Container) component, [`ImageContainer`](/jsdoc/pixi-vn/index/classes/ImageContainer) adds the following features:

* [`load`](/jsdoc/pixi-vn/index/classes/ImageContainer#load): Loads all image URLs and sets the resulting textures in the children.
* Additional positioning: <DynamicLink href="/start/canvas-position">align and position with percentage</DynamicLink>.

## Show [#show]

The simplest way to show a group of images on the canvas is to use the [`showImageContainer`](/jsdoc/pixi-vn/index/functions/showImageContainer) function. This function combines [`load`](/jsdoc/pixi-vn/index/classes/ImageContainer#load) and [`canvas.add`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#add).

<CodeBlockTabs defaultValue="content/labels/start.label.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="content/labels/start.label.ts">
      content/labels/start.label.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="assets/index.ts">
      assets/index.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="content/labels/start.label.ts">
    ```ts
    import {
        canvas,
        ImageContainer,
        newLabel,
        showImageContainer,
        tickers,
    } 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,
                },
            );
        },
        () => {
            tickers.removeAll();
            let tickerId = canvas.animate<ImageContainer>("james", {
                xAlign: 0,
                yAlign: 1,
            });
        },
    ]);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="assets/index.ts">
    ```ts
    import { AssetsManifest } from "@drincs/pixi-vn";

    /**
     * Manifest for the assets used in the game.
     * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
     */
    export const manifest: AssetsManifest = {
        bundles: [
            {
                name: "start",
                assets: [
                    {
                        alias: "m01-body",
                        src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-body.webp",
                    },
                    {
                        alias: "m01-eyes",
                        src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-eyes-smile.webp",
                    },
                    {
                        alias: "m01-mouth",
                        src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-mouth-smile00.webp",
                    },
                ],
            },
        ],
    };
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<PixiVnExample path="canvas/show-image-container" />

## Add [#add]

To add a group of images to the canvas, use the [`addImageCointainer`](/jsdoc/pixi-vn/index/functions/addImageCointainer) function. This function only adds the component to the canvas; it does **not** show it or load its texture. It uses [`canvas.add`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#add) to add the component to the canvas.

<CodeBlockTabs defaultValue="content/labels/start.label.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="content/labels/start.label.ts">
      content/labels/start.label.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="assets/index.ts">
      assets/index.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="content/labels/start.label.ts">
    ```ts
    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());
        },
    ]);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="assets/index.ts">
    ```ts
    import { AssetsManifest } from "@drincs/pixi-vn";

    /**
     * Manifest for the assets used in the game.
     * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
     */
    export const manifest: AssetsManifest = {
        bundles: [
            {
                name: "start",
                assets: [
                    {
                        alias: "m01-body",
                        src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-body.webp",
                    },
                    {
                        alias: "m01-eyes",
                        src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-eyes-smile.webp",
                    },
                    {
                        alias: "m01-mouth",
                        src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/m01/m01-mouth-smile00.webp",
                    },
                ],
            },
        ],
    };
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<PixiVnExample path="canvas/add-image-container" />

## Remove [#remove]

As with other canvas components, you can remove this component using the [`canvas.remove`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#remove) function.