Загрузка спрайт-листа через Assets

В PixiJS библиотека Assets обеспечивает удобный и современный способ управления ресурсами, включая изображения, аудио и спрайт-листы. Использование спрайт-листов через Assets позволяет загружать наборы текстур сразу, оптимизировать память и ускорять рендеринг.

Импорт и базовая инициализация

Для работы с Assets необходимо подключить модуль из pixi.js:

import { Application, Assets, Sprite, Texture } from 'pixi.js';

const app = new Application({
    width: 800,
    height: 600,
    backgroundColor: 0x1099bb
});

document.body.appendChild(app.view);

Модуль Assets доступен напрямую и позволяет использовать методы загрузки, такие как Assets.load и Assets.addBundle.

Формат спрайт-листа

Спрайт-лист в PixiJS представляет собой JSON-файл, описывающий координаты и размеры каждого фрейма внутри текстуры. Пример структуры JSON:

{
  "frames": {
    "walk_0": { "frame": {"x":0,"y":0,"w":64,"h":64} },
    "walk_1": { "frame": {"x":64,"y":0,"w":64,"h":64} }
  },
  "meta": {
    "image": "character.png",
    "size": {"w":128,"h":64}
  }
}

Ключ frames содержит набор отдельных кадров, а meta.image указывает на файл текстуры.

Загрузка одного спрайт-листа

Для загрузки спрайт-листа используется метод Assets.load. Если JSON описывает несколько кадров, PixiJS автоматически создаёт объект Textures для каждого фрейма:

const spriteSheetUrl = 'assets/character.json';

Assets.load(spriteSheetUrl).then((sheet) => {
    const texture = sheet.textures['walk_0'];
    const sprite = new Sprite(texture);
    sprite.x = 100;
    sprite.y = 100;
    app.stage.addChild(sprite);
});

Особенности:

  • sheet.textures — объект, где ключи совпадают с названиями фреймов в JSON.
  • Можно обращаться к любому кадру через sheet.textures['имя_кадра'].
  • Одновременно с JSON подгружается связанный PNG-файл, указанный в meta.image.

Загрузка нескольких спрайт-листов через бандл

Для управления множеством ресурсов эффективнее использовать бандлы:

Assets.addBundle('characters', {
    hero: 'assets/hero.json',
    enemy: 'assets/enemy.json'
});

Assets.loadBundle('characters').then((bundle) => {
    const heroSprite = new Sprite(bundle.hero.textures['walk_0']);
    heroSprite.x = 50;
    heroSprite.y = 50;
    app.stage.addChild(heroSprite);

    const enemySprite = new Sprite(bundle.enemy.textures['idle_0']);
    enemySprite.x = 300;
    enemySprite.y = 50;
    app.stage.addChild(enemySprite);
});

Преимущества использования бандлов:

  • Упрощение загрузки большого количества ресурсов.
  • Возможность именованного доступа к отдельным спрайт-листам.
  • Централизованное управление кэшированием.

Анимация спрайт-листа

PixiJS поддерживает создание анимаций с помощью класса AnimatedSprite:

import { AnimatedSprite } from 'pixi.js';

Assets.load('assets/character.json').then((sheet) => {
    const frames = Object.keys(sheet.textures)
        .filter(name => name.startsWith('walk_'))
        .map(name => sheet.textures[name]);

    const walkAnimation = new AnimatedSprite(frames);
    walkAnimation.animationSpeed = 0.15;
    walkAnimation.play();
    walkAnimation.x = 200;
    walkAnimation.y = 200;

    app.stage.addChild(walkAnimation);
});

Ключевые моменты:

  • Object.keys(sheet.textures) позволяет получить все кадры.
  • Фильтрация по префиксу имени обеспечивает последовательность кадров.
  • Метод play() запускает анимацию автоматически.

Асинхронная загрузка и кэширование

Assets кэширует все загруженные ресурсы, что исключает повторные загрузки:

async function loadHero() {
    const sheet = await Assets.load('assets/hero.json');
    return sheet.textures['idle_0'];
}

// Позже можно использовать тот же ресурс без повторной загрузки
const idleTexture = await loadHero();
const sprite = new Sprite(idleTexture);
app.stage.addChild(sprite);

Особенности кэширования:

  • Повторный вызов Assets.load для того же URL возвращает уже загруженный ресурс.
  • Можно очищать кэш через Assets.remove(key) при необходимости освобождения памяти.

Загрузка с указанием альтернативных форматов

Для оптимизации можно использовать форматы, поддерживающие сжатие текстур:

Assets.load('assets/character.json', {
    crossOrigin: 'anonymous',
    loadOptions: {
        imageType: 'webp'
    }
});

Опции позволяют:

  • Управлять CORS.
  • Использовать более эффективные форматы изображений.
  • Настраивать поведение загрузчика для специфических сценариев.

Работа с динамическими ресурсами

Assets поддерживает динамическую загрузку ресурсов в процессе работы приложения:

async function loadDynamicSprite(name) {
    const sheet = await Assets.load(`assets/${name}.json`);
    return new Sprite(sheet.textures['idle_0']);
}

const enemySprite = await loadDynamicSprite('enemy');
enemySprite.x = 400;
enemySprite.y = 100;
app.stage.addChild(enemySprite);

Такой подход позволяет подгружать только необходимые спрайт-листы, экономя память и ускоряя запуск приложения.

Итоговые рекомендации по работе с Assets и спрайт-листами

  • Использовать бандлы для организации большого числа ресурсов.
  • Структурировать JSON-файлы с понятными именами кадров для упрощения анимаций.
  • Применять AnimatedSprite для воспроизведения анимаций без ручного управления кадрами.
  • Кэшировать ресурсы через Assets для оптимизации повторного использования.
  • Динамическая подгрузка позволяет снижать нагрузку на начальную загрузку приложения.

Эти приёмы обеспечивают быстрый старт и стабильную работу графики в PixiJS при использовании спрайт-листов.

Оглавление