Assets

What are assets? Assets are all files that are not code, such as images, sounds, and videos.

You can use assets saved locally in the project or online (for the second option, you need to make sure that the cloud service you are using allows CORS requests). If your assets are online, your game will require an internet connection. You should notify the user and block the game if there is no connection.

If you are creating a visual novel, it is recommended to keep frequently used assets locally. For assets used only once in the game, it is better to publish them online.

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. It is also very important that you read this documentation to better organize the uploading of your assets.

You mainly have two choices for where to save your assets: locally or online.

Local assets

To save and use assets locally, you can use any folder—there are no restrictions. However, it is recommended to use the assets folder. Inside this folder, you can create subfolders to better organize your assets.

Here is an example of how to import and load an asset into your project:

import { Assets } from "@drincs/pixi-vn";
import bg01hallway from "../assets/images/bg01-hallway.webp";

Assets.add({
    alias: "bg01-hallway",
    src: bg01hallway,
});

Assets hosting

You can save your assets online. This is a good option if you want to save space on your computer. You can use any cloud service that allows you to upload files and generate a public URL (CORS enabled).

Here is an example of how to import and load an asset into your project:

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

Assets.add({
    alias: "bg01-hallway",
    src: "https://firebasestorage.googleapis.com/v0/b/pixi-vn.appspot.com/o/public%2Fbreakdown%2Fbg01-hallway.webp?alt=media",
});

You can save your assets as you like, with complete freedom. If you plan to save your assets online, here are some of the options: