Генерация атласов в инструментах TexturePacker и Shoebox

Атлас текстур — это объединённое изображение, содержащее несколько спрайтов, упакованных в один файл. Использование атласов позволяет значительно оптимизировать производительность игр на базе Phaser, снижая количество отдельных загрузок изображений и ускоряя рендеринг.

Основы работы с атласами

Атлас текстур состоит из двух компонентов:

  1. Изображение атласа (PNG, JPG, WebP) — содержит все спрайты в одном файле.
  2. Файл описания (JSON, XML, CSV) — хранит координаты и размеры каждого спрайта внутри атласа.

Phaser может работать с атласами через this.load.atlas(key, textureURL, atlasURL) в сцене. Ключ используется для обращения к спрайтам, а JSON-файл содержит данные о позициях.

this.load.atlas('player', 'assets/player.png', 'assets/player.json');

TexturePacker

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

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

  • Автоматическая оптимизация расположения спрайтов для минимизации пустого пространства.
  • Поддержка форматов JSON, XML, CSS и других.
  • Возможность генерации ретина-версий (HiDPI) для разных разрешений экранов.
  • Настройка фильтров и обрезки прозрачных областей.

Процесс генерации атласа в TexturePacker:

  1. Добавление исходных спрайтов в проект.
  2. Настройка формата экспорта. Для Phaser рекомендуется выбирать JSON Hash или JSON Array.
  3. Указание максимальных размеров атласа (например, 2048x2048) для оптимизации памяти GPU.
  4. Настройка опций обрезки (Trim) и поворота спрайтов (Allow Rotation), что позволяет экономить место.
  5. Экспорт атласа: создается PNG-файл и JSON-файл с описанием.

Пример JSON Hash для Phaser:

{
  "frames": {
    "walk_01": {"frame": {"x":0,"y":0,"w":64,"h":64}},
    "walk_02": {"frame": {"x":64,"y":0,"w":64,"h":64}}
  },
  "meta": {
    "image": "player.png",
    "size": {"w":128,"h":64}
  }
}

В Phaser подключение атласа:

this.load.atlas('player', 'assets/player.png', 'assets/player.json');
this.add.sprite(100, 100, 'player', 'walk_01');

Shoebox

Shoebox — бесплатный инструмент, ориентированный на 2D-художников и инди-разработчиков. Основная функция — генерация атласов и спрайт-листов с простой настройкой.

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

  • Поддержка экспортов PNG + JSON, XML и TexturePacker совместимых форматов.
  • Возможность пакетной обработки кадров анимации.
  • Простой интерфейс drag-and-drop.
  • Поддержка сдвига спрайтов и автоматического выравнивания.

Процесс работы:

  1. Перетаскивание всех кадров анимации в Shoebox.
  2. Настройка параметров Padding и Border Padding, чтобы спрайты не пересекались.
  3. Выбор формата JSON Hash для совместимости с Phaser.
  4. Генерация атласа: формируются PNG и JSON с координатами спрайтов.

Советы по оптимизации атласов

  • Минимизация пустого пространства: использование опции поворота спрайтов позволяет помещать прямоугольники в более плотное расположение.
  • Объединение похожих спрайтов: анимации одного персонажа лучше объединять в один атлас, чтобы сократить переключение текстур.
  • Разделение больших атласов: если атлас превышает возможности видеопамяти устройства, имеет смысл разбить на несколько меньших.
  • Формат PNG с альфа-каналом: рекомендуется для прозрачных спрайтов. WebP может уменьшить размер, но поддержка зависит от платформы.

Интеграция в Phaser

После генерации атласа его можно использовать для:

  • Создания спрайтов и анимаций: this.anims.create() использует ключи фреймов из JSON.
  • Быстрой смены текстур спрайтов с помощью setFrame(frameName).
  • Оптимизации рендеринга через объединённые текстуры, что уменьшает количество draw calls.

Пример создания анимации:

this.anims.create({
    key: 'walk',
    frames: this.anims.generateFrameNames('player', {
        prefix: 'walk_',
        start: 1,
        end: 4
    }),
    frameRate: 10,
    repeat: -1
});

this.player = this.add.sprite(100, 100, 'player');
this.player.anims.play('walk');

Использование атласов в Phaser не только упрощает управление спрайтами, но и значительно повышает производительность, особенно при множестве одновременно отображаемых объектов.

Оглавление