Ресурсы

Ассеты можно хранить локально внутри проекта или размещать онлайн. Часто используемые ассеты — такие как спрайты персонажей, фоновые изображения и фоновая музыка — лучше всего хранить локально. Ассеты, используемые единожды, или большие необязательные файлы лучше размещать онлайн. У каждого подхода есть свои компромиссы:

Локальные ресурсы

Для сохранения и использования ресурсов локально можно использовать любую папку — ограничений нет. Однако рекомендуется использовать папку src/assets. Внутри этой папки можно создавать подпапки для лучшей организации ресурсов.

PixiJS AssetPack уже преднастроен в шаблонах проектов Pixi’VN через интеграцию с Vite.js — автоматизируя обработку и оптимизацию ресурсов, чтобы вы могли сосредоточиться на разработке проекта.

Во время разработки (vite dev) он отслеживает изменения в папке src/assets и обрабатывает их на лету. При сборке для продакшена (vite build) выполняется полный проход оптимизации перед бандлингом.

Применяемые оптимизации включают:

• Сжатие — уменьшает размеры файлов для более быстрой загрузки.
• Конвертация форматов — конвертирует изображения в современные форматы (например, WebP, AVIF) при наличии поддержки.
• Текстурные атласы — объединяет несколько маленьких изображений в один спрайт-лист для уменьшения количества вызовов отрисовки.

По завершении обработки он генерирует оптимизированные файлы в public/assets, а также файл src/assets/manifest.gen.json, который содержит список всех бандлов ресурсов и их путей. Затем эти данные используются PixiJS для эффективной загрузки ресурсов.

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

Хостинг ресурсов

Вы можете хранить ресурсы онлайн. Это хороший вариант, если вы хотите сэкономить место в проекте или создать игру, в которую можно играть онлайн без необходимости предварительной загрузки. Можно использовать любой облачный сервис, позволяющий загружать файлы и генерировать публичный URL (необходимо убедиться, что используемый облачный сервис поддерживает CORS-запросы).

Вот несколько популярных вариантов для онлайн-хостинга ресурсов:

Когда ресурсы готовы, необходимо вручную определить, какие из них может использовать игра и как они группируются в бандлы.

Все шаблоны Pixi’VN включают файл src/assets/index.ts, который можно редактировать для регистрации ресурсов:

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

Другие возможности