Assets

Les assets peuvent être stockés localement dans le projet ou hébergés en ligne. Les assets fréquemment utilisés — tels que les sprites de personnages, les arrière-plans et la musique de fond — sont mieux conservés en local. Les assets utilisés une seule fois ou les fichiers optionnels volumineux sont mieux hébergés en ligne. Chaque approche présente des compromis :

Assets locaux

Pour enregistrer et utiliser des assets localement, vous pouvez utiliser n'importe quel dossier — il n'y a aucune restriction. Cependant, il est recommandé d'utiliser le dossier src/assets. Dans ce dossier, vous pouvez créer des sous-dossiers pour mieux organiser vos assets.

PixiJS AssetPack est déjà préconfiguré dans les modèles de projet Pixi’VN via l'intégration Vite.js — automatisant le traitement et l'optimisation de vos assets afin que vous puissiez vous concentrer sur la création de votre projet.

Pendant le développement (vite dev), il surveille les modifications du dossier src/assets et les traite à la volée. Lors du build de production (vite build), il effectue une passe d'optimisation complète avant le bundling.

Les optimisations qu'il applique comprennent :

• Compression — réduit la taille des fichiers pour un chargement plus rapide.
• Conversion de format — convertit les images en formats modernes (p. ex. WebP, AVIF) lorsque cela est pris en charge.
• Atlases de textures — combine plusieurs petites images en une seule feuille de sprites pour réduire les appels de dessin.

Une fois le traitement terminé, il génère des fichiers optimisés dans public/assets ainsi que le fichier src/assets/manifest.gen.json, qui contient la liste de tous les bundles d'assets et leurs chemins. Ces sorties sont ensuite utilisées par PixiJS pour charger les assets efficacement.

{
    "bundles": [
        {
            "name": "audio",
            "assets": [
                {
                    "alias": "bgm_cheerful",
                    "src": "./assets/audio/bgm_cheerful.wav"
                },
                {
                    "alias": "sfx_whoosh",
                    "src": "./assets/audio/sfx_whoosh.wav"
                }
            ]
        },
        {
            "name": "mainmenu",
            "assets": [
                {
                    "alias": "background_main_menu",
                    "src": "./assets/mainmenu/background_main_menu.png"
                }
            ]
        },
        {
            "name": "start",
            "assets": [
                {
                    "alias": "bg01-hallway",
                    "src": "./assets/start/bg01-hallway.webp"
                }
            ]
        },
        {
            "name": "mc",
            "assets": [
                {
                    "alias": "mc-neutral",
                    "src": "./assets/mc/mc-neutral.png"
                }
            ]
        }
    ]
}

Hébergement des assets

Vous pouvez enregistrer vos assets en ligne. C'est une bonne option si vous souhaitez économiser de l'espace dans votre projet ou si vous voulez créer un jeu jouable en ligne sans avoir besoin de le télécharger au préalable. Vous pouvez utiliser n'importe quel service cloud qui vous permet de téléverser des fichiers et de générer une URL publique (vous devez vous assurer que le service cloud que vous utilisez autorise les requêtes CORS).

Voici quelques options populaires pour héberger vos assets en ligne :

Une fois vos assets prêts, vous devez définir manuellement ceux que votre jeu peut utiliser et comment ils sont regroupés en bundles.

Tous les modèles Pixi’VN incluent un fichier src/assets/index.ts que vous pouvez modifier pour enregistrer vos assets :

import generatedManifestJson from "@/assets/manifest.gen.json";
import { AUDIO_BUNDLE_NAME } from "@/constants";
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: [
        ...generatedManifestJson.bundles,
        {
            name: AUDIO_BUNDLE_NAME,
            assets: [
                {
                    alias: "bgm_cheerful",
                    src: "https://raw.githubusercontent.com/user/project/refs/heads/main/audio/bgm_cheerful.wav",
                },
                {
                    alias: "sfx_whoosh",
                    src: "https://raw.githubusercontent.com/user/project/refs/heads/main/audio/sfx_whoosh.wav",
                },
            ],
        },
        // 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",
                },
            ],
        },
        // characters
        {
            name: "mc",
            assets: [
                {
                    alias: "mc-neutral",
                    src: "https://raw.githubusercontent.com/user/project/refs/heads/main/characters/mc-neutral.png",
                },
            ],
        },
    ],
};

Autres fonctionnalités