Встроенные парсеры ресурсов

В основе работы с внешними файлами в PixiJS лежит модуль @pixi/assets, пришедший на смену устаревшему Loader. Современная система загрузки построена на понятии парсеров ресурсов — специализированных обработчиков, которые преобразуют загруженные данные в объекты, пригодные для использования в графическом движке.

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

  1. Определяет, может ли он обработать конкретный ресурс.
  2. Преобразует загруженные данные в конечный объект (Texture, BaseTexture, SpriteSheet, BitmapFont, Sound и др.).

Таким образом, механизм загрузки разделяется на два этапа:

  • Транспортный уровень — получение данных (fetch/XHR).
  • Уровень интерпретации — преобразование данных во внутренние структуры PixiJS.

Общая схема работы встроенных парсеров

Процесс загрузки ресурса проходит через несколько стадий:

  1. Определение типа ресурса (по расширению или MIME-типу).
  2. Выбор подходящего парсера.
  3. Загрузка исходных данных.
  4. Передача данных в парсер.
  5. Создание и кеширование итогового объекта.

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

Пример загрузки ресурса:

import { Assets } from 'pixi.js';

const texture = await Assets.load('images/player.png');

В зависимости от расширения .png автоматически будет задействован соответствующий парсер изображений.

Парсер изображений

Поддерживаемые форматы

Встроенный парсер изображений обрабатывает:

  • PNG
  • JPG / JPEG
  • WEBP
  • AVIF (при поддержке браузером)
  • SVG

Результат работы

Парсер создаёт:

  • BaseTexture
  • Texture

Загруженное изображение автоматически кешируется. Повторный вызов Assets.load() с тем же URL вернёт уже существующий объект.

Пример:

const texture = await Assets.load('hero.png');
const sprite = new PIXI.Sprite(texture);

Особенности работы

  • Используется createImageBitmap, если доступен, что ускоряет декодирование.
  • Поддерживается автоматическая настройка resolution.
  • Учитываются параметры CORS.
  • Поддерживается масштабирование для Retina-дисплеев (например, hero@2x.png).

Парсер JSON

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

Варианты использования

  1. Загрузка произвольных данных:
const data = await Assets.load('config.json');
  1. JSON-атласы (SpriteSheet)
  2. BitmapFont-описания
  3. Spine-анимации (при подключении соответствующего плагина)

Парсер JSON определяет структуру содержимого и, при необходимости, передаёт обработку специализированному парсеру (например, для атласов).

Парсер SpriteSheet (текстурные атласы)

Текстурный атлас — это изображение, содержащее множество спрайтов, плюс JSON-файл с координатами каждого фрагмента.

Структура JSON атласа

{
  "frames": {
    "walk_01.png": {
      "frame": { "x": 0, "y": 0, "w": 64, "h": 64 }
    }
  },
  "meta": {
    "image": "atlas.png"
  }
}

Механизм работы

  1. Загружается JSON.
  2. Извлекается имя изображения.
  3. Загружается базовая текстура.
  4. Создаётся SpriteSheet.
  5. Генерируются отдельные Texture для каждого кадра.

Пример загрузки:

const sheet = await Assets.load('atlas.json');
const sprite = new PIXI.Sprite(sheet.textures['walk_01.png']);

Ключевые особенности

  • Поддержка trimmed-фреймов.
  • Поддержка rotated-фреймов.
  • Возможность асинхронного парсинга.
  • Автоматическое кеширование всех под-текстур.

Парсер BitmapFont

BitmapFont используется для высокопроизводительного рендеринга текста.

Состав ресурсов

  • XML или JSON-файл с описанием символов.
  • PNG-файл с текстурой глифов.

Пример загрузки:

await Assets.load('font.fnt');

После загрузки шрифт регистрируется в системе BitmapFont.

Особенности

  • Поддержка kerning.
  • Поддержка нескольких страниц текстур.
  • Интеграция с BitmapText.

Создание текста:

const text = new PIXI.BitmapText('SCORE: 100', {
    fontName: 'ArcadeFont'
});

Парсер SVG

SVG-файлы обрабатываются иначе, чем растровые изображения.

Принцип работы

  1. SVG загружается как текст.
  2. Создаётся Image.
  3. SVG рендерится в Canvas.
  4. На основе canvas создаётся Texture.

Ограничения

  • Производительность ниже по сравнению с PNG.
  • SVG всегда растрируется.
  • Размер текстуры зависит от указанных параметров или viewBox.

SVG подходит для иконок и масштабируемых элементов интерфейса.

Парсер видео

PixiJS поддерживает загрузку видеофайлов в качестве текстур.

Поддерживаемые форматы

  • MP4
  • WebM
  • OGV (в зависимости от браузера)

Пример:

const texture = await Assets.load('intro.mp4');
const videoSprite = new PIXI.Sprite(texture);

Механизм

  • Создаётся HTMLVideoElement.
  • Видео используется как источник для BaseTexture.
  • Обновление кадра происходит автоматически при воспроизведении.

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

  • Поддержка autoplay и loop.
  • Возможность управления через video-элемент.
  • Требуется взаимодействие пользователя для автозапуска в большинстве браузеров.

Парсер аудио

При подключении пакета @pixi/sound добавляется парсер аудиофайлов.

Поддерживаемые форматы:

  • MP3
  • OGG
  • WAV

Пример:

import { sound } from '@pixi/sound';

await Assets.load('jump.mp3');
sound.play('jump.mp3');

Парсер создаёт объект звука и регистрирует его в системе управления аудио.

Парсер текстовых файлов

Файлы .txt, .glsl, .frag, .vert загружаются как строки.

Это особенно важно для:

  • Шейдеров
  • Конфигураций
  • Локализаций

Пример загрузки шейдера:

const fragmentShader = await Assets.load('shader.frag');

Полученный текст можно передать в PIXI.Filter.

Обнаружение парсера

Система определяет подходящий парсер по:

  • расширению файла;
  • MIME-типу;
  • внутреннему содержимому (в случае JSON).

Приоритет парсеров задаётся при их регистрации. Более специфичные обработчики имеют больший приоритет.

Кеширование ресурсов

После успешного парсинга ресурс помещается в кеш Assets.cache.

Повторная загрузка:

const texture1 = await Assets.load('enemy.png');
const texture2 = await Assets.load('enemy.png');

texture1 и texture2 будут ссылаться на один и тот же объект.

Очистка кеша:

Assets.unload('enemy.png');

Это освобождает связанные текстуры и GPU-память.

Управление бандлами

Система поддерживает группировку ресурсов в бандлы:

Assets.addBundle('level1', {
    background: 'bg.png',
    atlas: 'atlas.json'
});

await Assets.loadBundle('level1');

Каждый ресурс внутри бандла проходит через соответствующий встроенный парсер.

Взаимодействие парсеров между собой

Некоторые парсеры зависят друг от друга:

  • SpriteSheet зависит от JSON и Image-парсеров.
  • BitmapFont зависит от XML/JSON и Image-парсеров.
  • Видео использует Image/BaseTexture инфраструктуру.
  • Аудио расширяет стандартную систему загрузки.

Такая композиция делает систему расширяемой и независимой от конкретных типов ресурсов.

Производительность встроенных парсеров

Ключевые механизмы оптимизации:

  • Использование createImageBitmap.
  • Асинхронный парсинг атласов.
  • Ленивое создание текстур.
  • Автоматическое управление GPU-ресурсами.
  • Минимизация повторной декодировки.

При работе с большим количеством ресурсов рекомендуется:

  • Использовать атласы вместо отдельных изображений.
  • Загружать ресурсы бандлами.
  • Освобождать неиспользуемые текстуры.
  • Применять форматы сжатия (WebP, AVIF).

Расширяемость

Встроенные парсеры являются лишь частью системы. Архитектура позволяет:

  • отключать стандартные обработчики;
  • изменять приоритеты;
  • добавлять собственные форматы.

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

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

Оглавление