Класс Assets как единая точка загрузки

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

В отличие от старого подхода с использованием Loader, Assets поддерживает асинхронную загрузку, кэширование и оптимизированное управление зависимостями между файлами.

Загрузка ресурсов

Загрузка осуществляется с помощью метода Assets.load, который принимает один или несколько путей к ресурсам, а также массив объектов с дополнительными параметрами.

import { Assets } from 'pixi.js';

await Assets.load([
    'images/sprite.png',
    { name: 'background', src: 'images/bg.jpg' }
]);

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

  • Поддержка именованных ресурсов — позволяет ссылаться на ассет по уникальному имени.
  • Асинхронность — возвращается Promise, что упрощает интеграцию с async/await.
  • Поддержка массивов и объектов — можно загружать сразу несколько ресурсов разной структуры.

Доступ к загруженным ассетам

После загрузки ассет доступен через метод Assets.get.

const bgTexture = Assets.get('background');
const spriteTexture = Assets.get('images/sprite.png');

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

  • Если ресурс не был загружен, метод вернёт undefined.
  • Для текстур возвращается экземпляр PIXI.Texture, который можно использовать напрямую в спрайтах:
import { Sprite } from 'pixi.js';

const sprite = new Sprite(spriteTexture);

Автозагрузка и кэширование

Assets автоматически кэширует загруженные ресурсы, предотвращая повторные запросы. Это обеспечивает эффективное использование памяти и сетевых ресурсов.

  • Повторная загрузка одного и того же пути не инициирует новый запрос.
  • Кэш можно очищать через метод Assets.reset, если требуется перезагрузка ресурсов:
Assets.reset();

Поддержка JSON и анимаций

Особое внимание уделяется работе с атласами спрайтов и анимациями. Assets корректно обрабатывает JSON-файлы, содержащие данные о текстурах и фреймах:

await Assets.load('animations/hero.json');
const heroSheet = Assets.get('animations/hero.json');
const heroFrames = heroSheet.animations['run'].map(frame => frame.texture);

Преимущества:

  • Полная интеграция с PIXI.AnimatedSprite.
  • Возможность предварительной загрузки и кэширования всех анимаций.

Пользовательские обработчики и плагины

Класс Assets поддерживает кастомные загрузчики, что позволяет расширять стандартное поведение под специфические типы файлов. Для этого используются методы register и use:

Assets.register('myFormat', {
    extension: '.my',
    load: async (url) => {
        const response = await fetch(url);
        const data = await response.json();
        return processMyData(data);
    }
});

Это обеспечивает гибкость при работе с нестандартными ресурсами, JSON-конфигурациями или бинарными форматами.

Отслеживание прогресса загрузки

Для больших проектов важно иметь информацию о состоянии загрузки. Assets поддерживает колбэки и события прогресса:

Assets.load(['images/bg.jpg', 'images/sprite.png'], {
    onProgress: (progress) => console.log(`Загружено ${progress * 100}%`)
});

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

  • progress возвращается в диапазоне от 0 до 1.
  • Можно использовать для создания индикаторов загрузки или анимаций прогресса.

Работа с пакетами ресурсов

Assets позволяет объединять ассеты в пакеты для удобного управления:

await Assets.loadBundle('game', {
    'hero': 'sprites/hero.png',
    'enemy': 'sprites/enemy.png',
    'background': 'images/bg.jpg'
});

const heroTexture = Assets.get('game/hero');

Преимущества:

  • Логическая группировка ресурсов.
  • Возможность массовой загрузки и очистки пакета.
  • Удобство при работе с уровнями игры или сценами.

Асинхронная интеграция с игровым циклом

Методы класса Assets легко интегрируются с игровым циклом PixiJS. Например, можно загружать ресурсы до старта сцены, а после завершения загрузки создавать спрайты и анимации:

async function initScene() {
    await Assets.load(['sprites/hero.png', 'sprites/enemy.png']);
    const hero = new Sprite(Assets.get('sprites/hero.png'));
    const enemy = new Sprite(Assets.get('sprites/enemy.png'));
    app.stage.addChild(hero, enemy);
}

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

Управление зависимостями

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

Класс Assets является мощным инструментом для централизованного управления ресурсами, обеспечивая асинхронность, кэширование, поддержку анимаций и пакетов ресурсов, а также гибкую интеграцию с игровым циклом PixiJS. Он заменяет устаревший Loader и предоставляет современный подход к организации ассетов в сложных приложениях.

Оглавление