# 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 &#x2A;**ink**&#x2A; you have less control than in JavaScript/TypeScript over how and when to load assets. Pixi’VN provides a single &#x2A;**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:

```ink title="ink"
# {operation} {assets or bundle} {list of URL/path of the image}
```

* `#`: is the hashtag symbol to identify a hashtag command.
* `operation`: the operation to perform. Currently supported:
  * `load`: It loads with await the assets or bundle (`Assets.load` or `Assets.loadBundle`).
  * `lazyload`: It loads the assets or bundle in the background (`Assets.backgroundLoad` or `Assets.backgroundLoadBundle`).
* `assets or bundle`: The type of asset to load. Available types are:
  * `assets`: It loads the assets.
  * `bundle`: It loads the bundle.
* `list of URL/path of the image`: The list of URLs/paths of the images (or other assets) 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://&#x60; in &#x2A;**ink*** you must escape the slashes as `https:\/\/` because `//&#x60; is treated as a comment in &#x2A;**ink***.

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

    <CodeBlockTabsTrigger value="utils/defineAssets.ts">
      utils/defineAssets.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="assets/manifest.ts">
      assets/manifest.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="utils/defineAssets.ts">
    ```ts
    import { Assets } from "@drincs/pixi-vn"

    export async function defineAssets() {
        // manifest
        await Assets.init({ manifest });
        // single asset
        Assets.add({ alias: 'eggHead', src: "https://pixijs.com/assets/eggHead.png" })
        Assets.add({ alias: 'flowerTop', src: "https://pixijs.com/assets/flowerTop.png" })
        Assets.add({ alias: "my_video", src: "https://pixijs.com/assets/video.mp4" });
    }
    ```
  </CodeBlockTab>

  <CodeBlockTab value="assets/manifest.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
     */
    const manifest: AssetsManifest = {
        bundles: [
            // screens
            {
                name: "main_menu",
                assets: [
                    {
                        alias: "background_main_menu",
                        src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/main-menu.png",
                    },
                ],
            },
            // labels
            {
                name: "start",
                assets: [
                    {
                        alias: "bg01-hallway",
                        src: "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/breakdown/bg01-hallway.webp",
                    },
                ],
            },
        ],
    };
    export default manifest;
    ```
  </CodeBlockTab>
</CodeBlockTabs>