Assets management

To load and manipulate assets (images, gifs, videos, etc.) you will need to use Assets. Assets is a class with many features and comes from the PixiJS library. For more information, read here.

In all Pixi’VN functions, you can directly use the image URL, even if it is not defined in Assets.

let alien1 = await showImage("alien", "https://pixijs.com/assets/eggHead.png");

This method has some drawbacks:

• Changing the URL of an asset from one version to another may cause incompatibilities.
• The player will have to wait for a short loading time every time they press "continue" and a step is started that uses assets.
• Writing the entire URL in code will increase its length and make it less readable.

For these reasons, it is recommended to handle assets in the following ways.

Initialize the asset matrix at project start

Initializing the asset matrix at the beginning of the project allows you to reference assets by a unique alias without having to use the URL/path. Using the alias you can change the URL of an asset without having to worry about version compatibility.

To do this, it is recommended to create an asynchronous function defineAssets that will be called at the start of the project. In the defineAssets function, use Assets (e.g. Assets.add, Assets.addBundle, and Assets.init) to assign aliases to URLs. You can find more information about them here to assign an alias to each asset.

import { Assets, sound } from "@drincs/pixi-vn";
import manifest from "../assets/manifest";

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: 'video', src: "https://pixijs.com/assets/video.mp4" })
    sound.add('bird', 'https://pixijs.io/sound/examples/resources/bird.mp3');
    sound.add('musical', 'https://pixijs.io/sound/examples/resources/musical.mp3');
    // bundle
    Assets.addBundle('liam', {
        "liam-head": 'liam_head.png',
        "liam-body": 'liam_body.png',
        "liam-arms": 'liam_arms.png',
    });
}

Load assets

By default, assets are loaded only when needed.

But if the assets are not saved locally, but in an "assets hosting", their loading may take some time. This means that starting a step may not be immediate. So, after starting the execution of the next step (for example with the "next" button), the player may have to wait some time to "view" the changes and be able to run another step.

Performing these loadings at each step may be annoying to the player, even if they are very short.

To solve this problem, the developer can group multiple loadings at a certain stage of the game. In this way, the player will not have continuous loadings, but fewer, even if longer.

Here are various ways to load the assets: