# Assets (/ink/assets)



As explained in more detail <DynamicLink href="/start/assets-management">here</DynamicLink>, initialize the asset matrix at project start and decide when assets should be loaded.

In **_ink_** you have less control than in JavaScript/TypeScript over how and when to load assets. Pixi’VN provides a single **_ink_** command that <DynamicLink href="/start/assets-management#load-assets-before-a-label-starts">loads assets before a `label` starts</DynamicLink>. Use the following syntax:

To load the assets or bundle with await, use the `load` operation:

<CodeBlockTabs defaultValue="ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="CLI">
      CLI
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink">
    ```ink
    # load assets eggHead flowerTop
    ```
  </CodeBlockTab>

  <CodeBlockTab value="CLI">
    ```txt
    # load <assets or bundle> <list of URL/path/alias>

    where:
        assets or bundle = the type to load. `assets` loads with `Assets.load`, `bundle` loads with `Assets.loadBundle`.
        list of URL/path/alias = the list of URLs/paths of the images (or other assets), or of the bundle names, you want to load. If you initialized the <DynamicLink href="/start/assets-management#initialize-the-asset-matrix-at-project-start">asset matrix</DynamicLink>, you can use an asset alias instead of a URL. Note: to write `https://` in ***ink*** you must escape the slashes as `https:\/\/` because `//` is treated as a comment in ***ink***.
    ```
  </CodeBlockTab>
</CodeBlockTabs>

To load the assets or bundle in the background, use the `lazyload` operation:

<CodeBlockTabs defaultValue="ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink">
      ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="CLI">
      CLI
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="ink">
    ```ink
    # lazyload bundle main_menu
    ```
  </CodeBlockTab>

  <CodeBlockTab value="CLI">
    ```txt
    # lazyload <assets or bundle> <list of URL/path/alias>

    where:
        assets or bundle = the type to load. `assets` loads with `Assets.backgroundLoad`, `bundle` loads with `Assets.backgroundLoadBundle`.
        list of URL/path/alias = the list of URLs/paths of the images (or other assets), or of the bundle names, you want to load. If you initialized the <DynamicLink href="/start/assets-management#initialize-the-asset-matrix-at-project-start">asset matrix</DynamicLink>, you can use an asset alias instead of a URL. Note: to write `https://` in ***ink*** you must escape the slashes as `https:\/\/` because `//` is treated as a comment in ***ink***.
    ```
  </CodeBlockTab>
</CodeBlockTabs>

For example:

<CodeBlockTabs defaultValue="ink/start.ink">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="ink/start.ink">
      ink/start.ink
    </CodeBlockTabsTrigger>

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

  <CodeBlockTab value="ink/start.ink">
    ```ink
    === start ===
    # lazyload bundle main_menu start
    # load assets eggHead flowerTop my_video
    # show image eggHead
    # show image flowerTop
    # show video my_video
    # pause
    -> start
    ```
  </CodeBlockTab>

  <CodeBlockTab value="src/assets/index.ts">
    ```ts
    import generatedManifestJson from "@/assets/manifest.gen.json";
    import type { AssetsManifest } from "@drincs/pixi-vn";

    export const manifest: AssetsManifest = {
        bundles: [
            ...generatedManifestJson.bundles,
            {
                name: "main_menu",
                assets: [
                    {
                        alias: "background_main_menu",
                        src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/main-menu.png",
                    },
                ],
            },
            {
                name: "start",
                assets: [
                    {
                        alias: "bg01-hallway",
                        src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/bg01-hallway.webp",
                    },
                ],
            },
            {
                name: "images",
                assets: [
                    {
                        alias: "eggHead",
                        src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/images/eggHead.png",
                    },
                    {
                        alias: "flowerTop",
                        src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/images/flowerTop.png",
                    },
                ],
            },
        ],
    };
    ```
  </CodeBlockTab>
</CodeBlockTabs>