Форматы текстурных атласов: JSON Array, JSON Hash, XML

В игровых проектах на Phaser эффективное управление графическими ресурсами критически важно для производительности и удобства разработки. Текстурные атласы позволяют объединять множество спрайтов в одно изображение, сокращая количество обращений к видеопамяти и упрощая организацию ресурсов. Phaser поддерживает несколько форматов описания атласов, среди которых JSON Array, JSON Hash и XML. Каждый формат имеет свои особенности и области применения.

JSON Array

JSON Array — это формат, в котором информация о спрайтах хранится в виде массива объектов. Каждый объект описывает отдельный фрейм атласа.

Пример структуры JSON Array:

{
  "frames": [
    {
      "filename": "hero_idle",
      "frame": { "x": 0, "y": 0, "w": 64, "h": 64 },
      "rotated": false,
      "trimmed": true,
      "spriteSourceSize": { "x": 0, "y": 0, "w": 64, "h": 64 },
      "sourceSize": { "w": 64, "h": 64 }
    },
    {
      "filename": "hero_run",
      "frame": { "x": 64, "y": 0, "w": 64, "h": 64 },
      "rotated": false,
      "trimmed": true,
      "spriteSourceSize": { "x": 0, "y": 0, "w": 64, "h": 64 },
      "sourceSize": { "w": 64, "h": 64 }
    }
  ]
}

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

  • frames — массив объектов, каждый из которых представляет отдельный спрайт.
  • filename — уникальное имя фрейма, используемое при создании спрайтов или анимаций.
  • frame — координаты и размеры области спрайта на атласе.
  • rotated и trimmed — флаги, определяющие поворот фрейма и наличие обрезки пустых пикселей.
  • spriteSourceSize и sourceSize — информация для корректного размещения и восстановления исходного размера спрайта.

В Phaser загрузка JSON Array выполняется через this.load.atlas():

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

Использование JSON Array удобно для проектов с регулярными фреймами одинакового размера или с последовательными анимациями.

JSON Hash

JSON Hash отличается тем, что фреймы хранятся не в массиве, а в объекте, где ключи — это имена спрайтов, а значения — их параметры. Это ускоряет поиск конкретного фрейма по имени, особенно при большом количестве спрайтов.

Пример структуры JSON Hash:

{
  "frames": {
    "hero_idle": {
      "frame": { "x": 0, "y": 0, "w": 64, "h": 64 },
      "rotated": false,
      "trimmed": true,
      "spriteSourceSize": { "x": 0, "y": 0, "w": 64, "h": 64 },
      "sourceSize": { "w": 64, "h": 64 }
    },
    "hero_run": {
      "frame": { "x": 64, "y": 0, "w": 64, "h": 64 },
      "rotated": false,
      "trimmed": true,
      "spriteSourceSize": { "x": 0, "y": 0, "w": 64, "h": 64 },
      "sourceSize": { "w": 64, "h": 64 }
    }
  }
}

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

  • Прямой доступ к фрейму по имени через объект вместо перебора массива.
  • Более эффективная работа с большими атласами, где часто требуются отдельные фреймы.
  • Совместим с методами Phaser для анимаций и создания спрайтов.

Загрузка аналогична JSON Array:

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

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

XML

Формат XML является старым, но все еще поддерживаемым способом описания текстурных атласов. В XML каждая текстура представлена отдельным элементом <SubTexture> с атрибутами, определяющими координаты и размеры.

Пример структуры XML:

<TextureAtlas imagePath="hero.png">
  <SubTexture name="hero_idle" x="0" y="0" width="64" height="64"/>
  <SubTexture name="hero_run" x="64" y="0" width="64" height="64"/>
</TextureAtlas>

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

  • imagePath указывает на файл атласа.
  • <SubTexture> содержит атрибуты name, x, y, width, height.
  • Поддерживает базовые свойства, но не содержит детализированной информации о поворотах или обрезке, как JSON.

Загрузка XML в Phaser выполняется так:

this.load.atlasXML('hero', 'assets/hero.png', 'assets/hero.xml');

XML используется чаще для совместимости с инструментами, которые не экспортируют JSON, например, старые версии TexturePacker.

Сравнение форматов

Формат Структура хранения Преимущества Недостатки
JSON Array Массив объектов Простота, удобен для последовательных фреймов Поиск по имени медленнее
JSON Hash Объект с ключами Быстрый доступ к фрейму по имени Меньшая совместимость со старыми инструментами
XML Элементы <SubTexture> Широкая поддержка, совместимость с Legacy Нет детальной информации о обрезке/повороте

Выбор формата зависит от масштаба проекта, требуемой производительности и используемых инструментов для создания атласов. JSON Hash эффективен для динамических и больших игр, JSON Array — для простых последовательностей, XML — для интеграции со старыми редакторами или импортом из внешних ресурсов.

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

Создание анимации из атласа:

this.anims.create({
  key: 'hero_run',
  frames: this.anims.generateFrameNames('hero', {
    prefix: 'hero_run',
    start: 0,
    end: 5,
    zeroPad: 0
  }),
  frameRate: 10,
  repeat: -1
});

this.add.sprite(100, 200, 'hero').play('hero_run');

Важно учитывать:

  • Для JSON Hash prefix должен совпадать с именем ключа фрейма.
  • Для JSON Array порядок фреймов в массиве определяет их последовательность в анимации.
  • XML может потребовать ручной настройки имен для анимаций.

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

Оглавление