Chargement des ressources

En particulier pour les jeux avec des ressources en ligne, suivre de bonnes pratiques de chargement est essentiel pour éviter de longs temps d'attente et maintenir une expérience fluide pour le joueur.

Pour charger et manipuler des ressources (images, gifs, vidéos, etc.) vous devrez utiliser Assets. Assets est une classe dotée de nombreuses fonctionnalités et provient de la bibliothèque PixiJS. Pour plus d'informations, lisez ici.

Utiliser des alias pour charger des ressources

Pour charger une ressource, utilisez toujours son alias — l'identifiant unique défini dans le manifeste ou lors de l'enregistrement de la ressource. L'utilisation directe du chemin src est fortement déconseillée : elle lie votre code à l'emplacement du fichier, ce qui le rend fragile lorsque les chemins ou l'hébergement changent.

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

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

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

Organiser les ressources en bundles

Une bonne pratique consiste à regrouper les ressources en bundles plutôt que de les enregistrer individuellement. Les bundles vous permettent de charger un ensemble complet de ressources en un seul appel, et de différer le chargement jusqu'à ce que les ressources soient réellement nécessaires.

Il est recommandé de nommer chaque bundle en fonction de l'endroit où il sera utilisé. Par exemple :

• utilisez l'identifiant du label (p. ex. startLabel.id) comme nom de bundle pour les ressources utilisées dans ce label spécifique
• utilisez le chemin de la route (p. ex. "/") comme nom de bundle pour les ressources utilisées dans l'écran correspondant, tel que le menu principal

De cette façon, vous pouvez charger exactement les bonnes ressources au bon moment, sans charger plus que nécessaire.

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",
                },
            ],
        },
    ],
};

Quand charger les ressources

Par défaut, les ressources sont chargées à la demande — uniquement lorsqu'elles sont réellement nécessaires. Cependant, charger au dernier moment peut provoquer des pauses perceptibles pendant le jeu.

Voici les moments les plus courants et recommandés pour charger les ressources à l'avance :