Ручное создание спрайт-листа

В PixiJS спрайт-лист (texture atlas) представляет собой набор текстур, объединённых в одно изображение, что позволяет оптимизировать рендеринг и уменьшить количество загрузок ресурсов. Ручное создание спрайт-листа полезно при необходимости полного контроля над структурой и размещением текстур, особенно при динамическом контенте или нестандартных игровых эффектах.

Создание текстуры из изображения

Для начала необходимо загрузить исходное изображение с помощью PIXI.Texture.from. Это создаёт базовую текстуру, из которой впоследствии можно вырезать отдельные спрайты.

const baseTexture = PIXI.Texture.from('spritesheet.png');

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

Вырезка спрайтов из текстуры

Каждый спрайт создаётся на основе прямоугольной области исходного изображения с помощью PIXI.Texture и PIXI.Rectangle:

const frame = new PIXI.Rectangle(0, 0, 64, 64);
const spriteTexture = new PIXI.Texture(baseTexture, frame);
const sprite = new PIXI.Sprite(spriteTexture);

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

  • Rectangle(x, y, width, height) задаёт область внутри спрайт-листа.
  • Координаты (x, y) — это верхний левый угол области относительно всего изображения.
  • Каждая текстура может использоваться многократно для разных спрайтов.

Организация спрайт-листа вручную

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

const frames = {
    heroIdle: { x: 0, y: 0, width: 64, height: 64 },
    heroRun1: { x: 64, y: 0, width: 64, height: 64 },
    heroRun2: { x: 128, y: 0, width: 64, height: 64 },
};

Доступ к текстурам реализуется через динамическое создание объектов:

const textures = {};
for (const key in frames) {
    const f = frames[key];
    textures[key] = new PIXI.Texture(baseTexture, new PIXI.Rectangle(f.x, f.y, f.width, f.height));
}

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

Создание анимаций

PixiJS поддерживает анимации через PIXI.AnimatedSprite, используя массив текстур:

const runTextures = [textures.heroRun1, textures.heroRun2];
const runAnimation = new PIXI.AnimatedSprite(runTextures);

runAnimation.animationSpeed = 0.1;
runAnimation.loop = true;
runAnimation.play();

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

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

Управление ресурсами и производительностью

Ручной спрайт-лист позволяет минимизировать количество загрузок и улучшить производительность, но требует внимательного контроля памяти. Следует учитывать:

  • Не создавать слишком большие текстуры без необходимости.
  • Повторное использование PIXI.Texture вместо создания новых объектов снижает нагрузку.
  • Удаление неиспользуемых текстур через destroy() освобождает GPU-память:
spriteTexture.destroy(true);

Параметр true удаляет также исходный baseTexture, если он больше не нужен.

Динамическое добавление фреймов

В PixiJS можно добавлять новые области в существующую текстуру во время работы приложения. Для этого создаётся новая PIXI.Texture, ссылающаяся на исходное изображение:

const extraFrame = new PIXI.Rectangle(192, 0, 64, 64);
textures.heroJump = new PIXI.Texture(baseTexture, extraFrame);

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

Итоговые рекомендации

  • Хранить координаты фреймов в одном объекте для удобного управления.
  • Использовать массивы текстур для анимаций.
  • Минимизировать создание лишних текстур, опираясь на переиспользование baseTexture.
  • Учитывать ограничения GPU по размеру текстур при создании больших спрайт-листов.

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

Оглавление