Pixi’VN 2D game engine

Appearance

Assets ​

What are assets? The assets are all the 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 will need to make sure that the cloud service you are using allows CORS requests). Of course, if your assets are online, a requirement of the game will be to be connected online. Then you will have to notify the user and block the game where there is no connection.

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

To load and manipulate assets (images, gifs, videos...) you will need to use Assets. Assets is a class with many features and comes from the PixiJS library, if you want 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, local or online.

Local assets ​

To save and use assets locally, you can use any folder, there are no restrictions. But 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:

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

/**
 * Define all the assets that will be used in the game.
 * This function will be called before the game starts.
 * You can read more about assets management in the documentation: https://pixi-vn.web.app/start/assets-management.html
 */
export async function defineAssets() {
    Assets.add({
        alias: "bg01-hallway",
        src: bg01hallway,
    });
}

icon PixiJS AssetPack ​

AssetPack is a tool for optimising local assets for the web. It can be used to transform, combine, 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:

/utils/assets.ts
ts
import { Assets } from "@drincs/pixi-vn";

/**
 * Define all the assets that will be used in the game.
 * This function will be called before the game starts.
 * You can read more about assets management in the documentation: https://pixi-vn.web.app/start/assets-management.html
 */
export async function defineAssets() {
    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:

icon Github ​

You can use Github to host your assets. You can use the raw link of the file to use it 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: You have 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 keeping the same url.

Image hosting ​

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

  • Price: Completely free. But you can pay for more features.
  • Space limits: You have 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 keeping the same url.

icon Firebase Storage ​

Firebase Storage is a cloud service that allows you to store and serve user-generated content, such as photos or videos or other files. You can use the public URL of the file to use it in your project.

  • Price: Firebase have two plans: Spark (free) and Blaze (pay as you go). You can find more information here.
  • Space limits: You have, free, 5GB of free storage and 1GB/day of download. You can increase the storage by upgrading to Blaze plan. For 50GB you will pay around $1,17.
  • Type of files: You can upload any type of file.
  • Traffic: Speed is good.
  • Edit assets: You can edit the file keeping the same url.

Solving Firebase Storage CORS Issue:

icon Amazon S3 ​

Amazon S3 is a cloud service that allows you to store and serve user-generated content, such as photos or videos or other files. You can use the public URL of the file to use it in your project.

  • Price: There is a payment plan to use Amazon S3. You can find more information here.
  • Space limits: You pay for the storage you use. You can increase the storage by upgrading the plan.
  • Type of files: You can upload any type of file. The price is around $0,023 per GB, so for 50GB you will pay around $1,15.
  • Traffic: Speed is good.
  • Edit assets: You can edit the file keeping the same url.

icon Supabase ​

Supabase is an open-source Firebase alternative. You can use the public URL of the file to use it in your project.

  • Price: Supabase have two plans: Free and Pay as you go. You can find more information here.
  • Space limits: You have, free, 5GB of free storage and 1GB/day of download. You can increase the storage by upgrading the plan.
  • Type of files: You can upload any type of file.
  • Traffic: Speed is good.
  • Edit assets: You can edit the file keeping the same url.

Convex ​

Convex is a cloud service that allows you to store and serve user-generated content, such as photos or videos or other files. You can use the public URL of the file to use it in your project.

  • Price: Convex have two plans: Free and Pay as you go. You can find more information here.
  • Space limits: You have, free, 10GB of free storage and 1GB/month of download. You can increase the storage by upgrading the plan.
  • Type of files: You can upload any type of file.
  • Traffic: Speed is good.
  • Edit assets: You can edit the file keeping the same url.