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,
});

PixiJS AssetPack

AssetPack is a tool for optimizing local assets for the web. It can be used to transform, combine, and compress assets.

If you want to use AssetPack, you can find the documentation here.

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:

Github

You can use Github to host your assets. You can use the raw link of the file in your project. The link will be in the following format:

https://github.com/[repository]/raw/refs/heads/main/[file path]

• Price: Completely free.
• Space limits: No space limits, but each single file must not exceed 100 MB.
• Type of files: You can upload any type of file.
• Traffic: Speed is not the best.
• Edit assets: You can edit the file while keeping the same URL.

Image hosting

Image hosting is a service that allows you to upload images. There are many sites to upload images for free, for example imgbb, imgix, imgur. You can use the link of the image in your project.

• Price: Completely free, but you can pay for more features.
• Space limits: No space limits, but each single file can have a maximum size.
• Type of files: You can upload only images.
• Traffic: Speed is good.
• Edit assets: You can't edit the file while keeping the same URL.

Cloud storage

Cloud storage is a service that allows you to upload files online.

• Price: Usually paid or with a free version with limits.
• Space limits: Monthly cost based on space used (usually free if you do not exceed a certain threshold).
• Type of files: You can upload any type of file.
• Traffic: Speed is good.
• Edit assets: You can edit the file while keeping the same URL.

Here is a list of some of the most popular cloud storage services:

• Firebase Storage is a cloud service that is very easy to use. Firebase has two plans: Spark (free) and Blaze (pay as you go). You can find more information here.
  Solving Firebase Storage CORS Issue:
  • Install gcloud CLI
  • Read this documentation to solve the CORS issue.
• Amazon S3 is a cloud service. Compared to its competitors, it has many settings, but it may be more difficult to use. There is a payment plan to use Amazon S3. You can find more information here.
• Supabase is an open-source Firebase alternative. Supabase has two plans: Free and Pay as you go. You can find more information here.
• Convex is a cloud service that allows you to store and serve user-generated content, such as photos, videos, or other files. Convex has two plans: Free and Pay as you go. You can find more information here.