Assets

Los assets pueden almacenarse localmente dentro del proyecto o alojarse en línea. Los assets de uso frecuente — como sprites de personajes, fondos y música de fondo — es mejor mantenerlos en local. Los assets usados una sola vez o los archivos opcionales de gran tamaño es mejor alojarlos en línea. Cada enfoque tiene sus ventajas e inconvenientes:

Assets locales

Para guardar y usar assets localmente, puedes usar cualquier carpeta — no hay restricciones. Sin embargo, se recomienda usar la carpeta src/assets. Dentro de esta carpeta puedes crear subcarpetas para organizar mejor tus assets.

PixiJS AssetPack ya está preconfigurado en las plantillas de proyecto de Pixi’VN mediante la integración con Vite.js — automatizando el procesamiento y la optimización de tus assets para que puedas concentrarte en construir tu proyecto.

Durante el desarrollo (vite dev) vigila la carpeta src/assets en busca de cambios y los procesa al instante. Durante el build de producción (vite build) ejecuta un proceso completo de optimización antes del bundling.

Las optimizaciones que aplica incluyen:

• Compresión — reduce el tamaño de los archivos para una carga más rápida.
• Conversión de formato — convierte imágenes a formatos modernos (p. ej. WebP, AVIF) cuando es compatible.
• Atlases de texturas — combina múltiples imágenes pequeñas en un único sprite sheet para reducir las llamadas de dibujo.

Una vez completado el procesamiento, genera archivos optimizados en public/assets y el archivo src/assets/manifest.gen.json, que contiene la lista de todos los bundles de assets y sus rutas. Estas salidas son luego utilizadas por PixiJS para cargar los assets de manera eficiente.

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

Alojamiento de assets

Puedes guardar tus assets en línea. Es una buena opción si quieres ahorrar espacio en tu proyecto o si quieres crear un juego jugable en línea sin necesidad de descargarlo primero. Puede usar cualquier servicio en la nube que le permita subir archivos y generar una URL pública (debe asegurarse de que el servicio en la nube que usa permita solicitudes CORS).

Aquí tienes algunas opciones populares para alojar tus assets en línea:

Una vez que tengas tus assets listos, debes definir manualmente cuáles puede usar tu juego y cómo se agrupan en bundles.

Todas las plantillas de Pixi’VN incluyen un archivo src/assets/index.ts que puedes editar para registrar tus 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",
                },
            ],
        },
    ],
};

Otras funcionalidades