Caricamento delle risorse

Specialmente per i giochi con risorse online, seguire buone pratiche di caricamento è essenziale per evitare lunghe attese e mantenere un'esperienza fluida per il giocatore.

Per caricare e manipolare le risorse (immagini, GIF, video, ecc.) sarà necessario utilizzare Assets. Assets è una classe con molte funzionalità e proviene dalla libreria PixiJS. Per ulteriori informazioni, consulta qui.

Utilizzare gli alias per caricare le risorse

Per caricare una risorsa, usa sempre il suo alias — l'identificatore univoco definito nel manifest o durante la registrazione della risorsa. L'uso diretto del percorso src è fortemente sconsigliato: accoppia il codice alla posizione del file, rendendolo fragile quando i percorsi o l'hosting cambiano.

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

const texture = await Assets.load("eggHead");

{
    "bundles": [
        {
            "name": "default",
            "assets": [
                {
                    "alias": "eggHead",
                    "src": "./assets/eggHead.png"
                }
            ]
        }
    ]
}

Organizzare le risorse in bundle

La best practice è raggruppare le risorse in bundle piuttosto che registrarle singolarmente. I bundle consentono di caricare un intero set di risorse con una singola chiamata e di differire il caricamento fino a quando le risorse sono effettivamente necessarie.

Si raccomanda di nominare ogni bundle in base a dove verrà utilizzato. Ad esempio:

• usa l'id della label (es. startLabel.id) come nome del bundle per le risorse usate in quella specifica label
• usa il percorso della route (es. "/") come nome del bundle per le risorse usate nella schermata corrispondente, come il menu principale

In questo modo, puoi caricare esattamente le risorse giuste al momento giusto, senza caricare più del necessario.

import { startLabel } from "@/content/labels/start.label";
import type { FileRouteTypes } from "@/routeTree.gen";
import type { AssetsManifest } from "@drincs/pixi-vn";

export const manifest: AssetsManifest = {
    bundles: [
        // screens
        {
            // main menu
            name: "/" as FileRouteTypes["fullPaths"],
            assets: [
                {
                    alias: "background_main_menu",
                    src: "https://raw.githubusercontent.com/user/project/refs/heads/main/main-menu.png",
                },
            ],
        },
        // labels
        {
            name: startLabel.id,
            assets: [
                {
                    alias: "bg01-hallway",
                    src: "https://raw.githubusercontent.com/user/project/refs/heads/main/breakdown/bg01-hallway.webp",
                },
            ],
        },
    ],
};

Quando caricare le risorse

Per impostazione predefinita, le risorse vengono caricate su richiesta — solo quando sono effettivamente necessarie. Tuttavia, il caricamento all'ultimo momento può causare pause evidenti durante il gioco.

Ecco i momenti più comuni e raccomandati per caricare le risorse in anticipo: