Carga de assets

Especialmente en juegos con assets en línea, seguir buenas prácticas de carga es esencial para evitar largos tiempos de espera y mantener una experiencia fluida para el jugador.

Para cargar y manipular assets (imágenes, gifs, vídeos, etc.) necesitarás usar Assets. Assets es una clase con muchas funcionalidades y proviene de la librería PixiJS. Para más información, lee aquí.

Usar alias para cargar assets

Para cargar un asset, usa siempre su alias — el identificador único definido en el manifiesto o al registrar el asset. Se desaconseja firmemente usar la ruta src directamente: acopla tu código a la ubicación del archivo, haciéndolo frágil cuando cambien las rutas o el alojamiento.

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

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

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

Organizar los assets en bundles

Una buena práctica es agrupar los assets en bundles en lugar de registrarlos individualmente. Los bundles te permiten cargar un conjunto completo de assets con una sola llamada, y diferir la carga hasta que los assets sean realmente necesarios.

Se recomienda nombrar cada bundle en función de dónde se usará. Por ejemplo:

• usa el id del label (por ejemplo, startLabel.id) como nombre del bundle para los assets usados en ese label específico
• usa la ruta de la ruta (por ejemplo, "/") como nombre del bundle para los assets usados en la pantalla correspondiente, como el menú principal

De esta forma, puedes cargar exactamente los assets correctos en el momento adecuado, sin cargar más de lo necesario.

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

Cuándo cargar los assets

Por defecto, los assets se cargan bajo demanda — solo cuando son realmente necesarios. Sin embargo, cargar en el último momento puede causar pausas notables durante el juego.

Estos son los momentos más comunes y recomendados para cargar los assets con antelación: