Assets

Assets können lokal im Projekt gespeichert oder online gehostet werden. Häufig verwendete Assets — wie Charakter-Sprites, Hintergründe und Hintergrundmusik — werden am besten lokal gespeichert. Assets, die nur einmal verwendet werden oder große optionale Dateien, sind besser online gehostet. Jeder Ansatz hat Vor- und Nachteile:

Lokale Assets

Um Assets lokal zu speichern und zu verwenden, können Sie jeden Ordner verwenden — es gibt keine Einschränkungen. Es wird jedoch empfohlen, den Ordner src/assets zu verwenden. In diesem Ordner können Sie Unterordner erstellen, um Ihre Assets besser zu organisieren.

PixiJS AssetPack ist in den Pixi’VN-Projektvorlagen bereits über die Vite.js-Integration vorkonfiguriert — die Verarbeitung und Optimierung Ihrer Assets wird automatisiert, damit Sie sich auf die Entwicklung Ihres Projekts konzentrieren können.

Während der Entwicklung (vite dev) überwacht es den Ordner src/assets auf Änderungen und verarbeitet diese spontan. Beim Produktions-Build (vite build) führt es vor dem Bundling einen vollständigen Optimierungsdurchlauf durch.

Zu den angewendeten Optimierungen gehören:

• Komprimierung — reduziert Dateigrößen für schnelleres Laden.
• Formatkonvertierung — konvertiert Bilder in moderne Formate (z. B. WebP, AVIF), wenn unterstützt.
• Textur-Atlanten — kombiniert mehrere kleine Bilder zu einem einzigen Sprite-Sheet, um Draw-Calls zu reduzieren.

Sobald die Verarbeitung abgeschlossen ist, werden optimierte Dateien in public/assets sowie die Datei src/assets/manifest.gen.json erzeugt, die die Liste aller Asset-Bundles und ihrer Pfade enthält. Diese Ausgaben werden anschließend von PixiJS verwendet, um Assets effizient zu laden.

{
    "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"
                }
            ]
        }
    ]
}

Asset-Hosting

Sie können Ihre Assets online speichern. Dies ist eine gute Option, wenn Sie Speicherplatz in Ihrem Projekt sparen möchten oder ein Spiel erstellen möchten, das online spielbar ist, ohne es zuerst herunterladen zu müssen. Sie können jeden Cloud-Dienst verwenden, der das Hochladen von Dateien und das Generieren einer öffentlichen URL erlaubt (Sie müssen sicherstellen, dass der verwendete Cloud-Dienst CORS-Anfragen zulässt).

Hier sind einige beliebte Optionen für das Online-Hosting Ihrer Assets:

Sobald Ihre Assets bereit sind, müssen Sie manuell festlegen, welche davon Ihr Spiel verwenden kann und wie sie in Bundles gruppiert werden.

Alle Pixi’VN-Vorlagen enthalten eine src/assets/index.ts-Datei, die Sie bearbeiten können, um Ihre Assets zu registrieren:

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

Weitere Funktionen