Assets laden

Besonders bei Spielen mit Online-Assets ist es wichtig, gute Ladepraktiken zu befolgen, um lange Wartezeiten zu vermeiden und das Erlebnis für den Spieler reibungslos zu gestalten.

Um Assets (Bilder, GIFs, Videos usw.) zu laden und zu verarbeiten, müssen Sie Assets verwenden. Assets ist eine Klasse mit vielen Funktionen und stammt aus der PixiJS-Bibliothek. Weitere Informationen finden Sie hier.

Aliase zum Laden von Assets verwenden

Um ein Asset zu laden, verwenden Sie immer seinen Alias — den eindeutigen Bezeichner, der im Manifest oder bei der Registrierung des Assets definiert wurde. Die direkte Verwendung des src-Pfades wird ausdrücklich nicht empfohlen: Sie koppelt Ihren Code an den Speicherort der Datei, was ihn bei Pfad- oder Hosting-Änderungen fehleranfällig macht.

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

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

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

Assets in Bundles organisieren

Eine bewährte Vorgehensweise ist es, Assets in Bundles zu gruppieren, anstatt sie einzeln zu registrieren. Mit Bundles können Sie einen ganzen Satz von Assets mit einem einzigen Aufruf laden und das Laden verzögern, bis die Assets tatsächlich benötigt werden.

Es wird empfohlen, jedes Bundle nach dem Ort zu benennen, an dem es verwendet wird. Zum Beispiel:

• Verwenden Sie die ID des label (z. B. startLabel.id) als Bundle-Name für Assets, die in diesem bestimmten label verwendet werden
• Verwenden Sie den Routenpfad (z. B. "/") als Bundle-Name für Assets, die im entsprechenden Bildschirm verwendet werden, z. B. im Hauptmenü

Auf diese Weise können Sie genau die richtigen Assets zum richtigen Zeitpunkt laden, ohne mehr als nötig zu laden.

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

Wann Assets geladen werden sollen

Standardmäßig werden Assets bei Bedarf geladen — nur wenn sie tatsächlich benötigt werden. Das Laden im letzten Moment kann jedoch während des Spiels zu spürbaren Pausen führen.

Hier sind die häufigsten und empfohlenen Zeitpunkte, um Assets im Voraus zu laden: