В приложениях на PixiJS значительная часть работы связана с загрузкой внешних ресурсов: изображений, спрайтшитов, шрифтов, JSON-файлов, видео и аудио. Корректная организация процесса загрузки напрямую влияет на стабильность, производительность и пользовательский опыт.
В современных версиях библиотеки используется модуль загрузки из
пакета @pixi/assets. Он предоставляет:
Основной объект для работы — Assets.
Простейший пример загрузки одного ресурса:
import { Assets } from 'pixi.js';
const texture = await Assets.load('images/player.png');При вызове Assets.load():
Texture).Однако при загрузке нескольких ресурсов требуется механизм отслеживания прогресса и управления очередью.
Для загрузки нескольких файлов используется массив:
await Assets.load([
'images/bg.png',
'images/player.png',
'images/enemy.png'
]);PixiJS выполняет параллельную загрузку, оптимизируя количество одновременных запросов.
Чтобы контролировать процесс более гибко, используется Bundle.
Bundles позволяют логически объединить ресурсы:
Assets.addBundle('level1', {
background: 'images/bg.png',
player: 'images/player.png',
enemy: 'images/enemy.png'
});
await Assets.loadBundle('level1');После загрузки доступ к ресурсам осуществляется по ключам:
const playerTexture = Assets.get('player');Преимущества bundle-подхода:
Для отображения прогресса используется специальный callback.
await Assets.load(
['images/bg.png', 'images/player.png'],
(progress) => {
console.log(`Прогресс: ${Math.round(progress * 100)}%`);
}
);Параметр progress:
0 до 1;Это позволяет реализовать:
Пример использования Graphics для создания
прогресс-бара:
import { Application, Graphics } from 'pixi.js';
const app = new Application();
document.body.appendChild(app.view);
const progressBar = new Graphics();
app.stage.addChild(progressBar);
function drawProgress(value) {
progressBar.clear();
progressBar.beginFill(0x00ff00);
progressBar.drawRect(100, 300, 400 * value, 20);
progressBar.endFill();
}
await Assets.load(
['images/bg.png', 'images/player.png'],
(progress) => {
drawProgress(progress);
}
);В данном примере:
value изменяется от 0 до
1;clear() предотвращает наложение графики.PixiJS построен на асинхронной модели с использованием Promises. Однако логика событийной обработки остаётся актуальной.
В старых версиях PixiJS использовался Loader с
событийной моделью (onProgress, onComplete,
onError). В современных версиях предпочтение отдаётся
Promise-подходу.
Ошибка загрузки может возникнуть по причинам:
Обработка осуществляется через try/catch:
try {
await Assets.load('images/missing.png');
} catch (error) {
console.error('Ошибка загрузки:', error);
}При массовой загрузке:
try {
await Assets.load(['a.png', 'b.png']);
} catch (error) {
// обработка
}Если хотя бы один ресурс не загрузился, Promise отклоняется.
await Assets.loadBundle('level1', (progress) => {
console.log(progress);
});Принцип идентичен load(), но применяется ко всей
группе.
Для оптимизации памяти используется отложенная загрузка:
Пример:
await Assets.loadBundle('menu');
startMenu();
await Assets.loadBundle('level1');
startLevel();Такой подход:
Отслеживание жизненного цикла ресурсов важно при работе с большими проектами.
Assets.unloadBundle('level1');После вызова:
Также можно удалить конкретный ресурс:
Assets.unload('images/player.png');PixiJS автоматически кэширует ресурсы. Повторный вызов:
await Assets.load('images/player.png');не выполняет новый сетевой запрос, если ресурс уже находится в кэше.
Получение из кэша:
const texture = Assets.get('images/player.png');Это важно при работе с прогрессом: уже загруженные файлы не влияют на текущий процент.
PixiJS внутренне ограничивает количество одновременных HTTP-запросов. Это предотвращает:
При необходимости возможна настройка через конфигурацию:
Assets.init({
concurrency: 5
});concurrency определяет максимальное число параллельных
загрузок.
Часто загрузка организуется в виде отдельной сцены:
LoadingScene.Assets.loadBundle.Пример логики:
class LoadingScene {
async load() {
await Assets.loadBundle('level1', (progress) => {
this.updateProgress(progress);
});
this.onComplete();
}
}Преимущества:
После загрузки текстуры создаётся BaseTexture. Внутренне
она также генерирует события:
loadederrordisposeХотя в большинстве случаев работа идёт через Assets,
понимание этого механизма важно при создании кастомных загрузчиков.
При загрузке JSON-спрайтшита:
await Assets.load('spritesheet.json');PixiJS:
Прогресс учитывает все связанные файлы.
В крупных проектах применяется предварительная загрузка:
Assets.backgroundLoadBundle('level2');Метод запускает фоновую загрузку без блокировки текущей логики. Это позволяет:
Пример с ручным управлением:
const promise = Assets.loadBundle('level1', (progress) => {
console.log(progress);
});
promise.then(() => {
console.log('Готово');
}).catch((err) => {
console.error(err);
});Такой подход позволяет интегрировать загрузку в существующую архитектуру на основе Promise.
При работе с прогрессом и событиями необходимо учитывать:
Рекомендуется:
Assets.loadBundle с callback прогресса.Такая архитектура обеспечивает:
Механизмы прогресса и событий в PixiJS формируют основу управляемой, предсказуемой и производительной системы загрузки ресурсов, необходимой для сложных интерактивных приложений и игр.