Работа с фреймами внутри атласа

В библиотеке Phaser атлас (Texture Atlas) представляет собой набор изображений, объединённых в один большой файл, который оптимизирует загрузку и рендеринг графики. Каждый элемент атласа называется фреймом и может использоваться как отдельный спрайт или часть анимации.

Загрузка атласа

Атлас загружается через метод this.load.atlas в сцене. Синтаксис:

this.load.atlas(
    'atlasKey',       // ключ для доступа к атласу
    'assets/atlas.png', // путь к изображению атласа
    'assets/atlas.json' // путь к JSON с координатами фреймов
);

JSON-файл может быть в формате JSON Hash или JSON Array, где для каждого фрейма указаны координаты в текстуре, ширина и высота.

Получение фреймов

После загрузки атласа доступ к фреймам возможен через ключ атласа и имя фрейма:

const sprite = this.add.sprite(100, 100, 'atlasKey', 'frameName');
  • 'atlasKey' — ключ атласа, указанный при загрузке.
  • 'frameName' — имя фрейма, как указано в JSON.

Можно получить список всех фреймов атласа через:

const frames = this.textures.get('atlasKey').getFrameNames();

Это удобно для динамического создания спрайтов или анимаций.

Работа с анимациями

Фреймы атласа часто используют для создания анимаций. Создание анимации происходит через this.anims.create:

this.anims.create({
    key: 'walk',
    frames: this.anims.generateFrameNames('atlasKey', {
        prefix: 'walk_',
        start: 1,
        end: 6,
        zeroPad: 2
    }),
    frameRate: 10,
    repeat: -1
});
  • prefix — общий префикс имен фреймов.
  • start и end — диапазон номеров фреймов.
  • zeroPad — количество нулей в номере фрейма (например, walk_01).
  • frameRate — количество кадров в секунду.
  • repeat: -1 — зацикливание анимации.

Применение анимации к спрайту:

sprite.play('walk');

Динамическая смена фреймов

Фреймы можно менять на лету, что полезно для состояния персонажей или эффекта удара:

sprite.setFrame('frameName');

Также допустимо передавать массив фреймов для последовательного отображения:

sprite.anims.loadFrame('frame1');
sprite.anims.loadFrame('frame2');

Редактирование и управление атласами

Phaser позволяет получать доступ к информации о каждом фрейме:

const frame = this.textures.get('atlasKey').get('frameName');
console.log(frame.width, frame.height, frame.cutWidth, frame.cutHeight);
  • frame.width и frame.height — размеры исходного изображения.
  • frame.cutWidth и frame.cutHeight — размеры фрейма внутри атласа.
  • frame.customPivot — точка привязки спрайта (при необходимости изменить).

Оптимизация использования

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

  • Объединять мелкие графические элементы в один атлас.
  • Использовать JSON Hash, если требуется прямой доступ по имени фрейма.
  • Создавать анимации через generateFrameNames для автоматической генерации последовательностей.

Встроенные возможности Phaser для атласов

  • Кэширование текстур: позволяет повторно использовать фреймы без повторной загрузки.
  • Отсечение прозрачных пикселей: уменьшает память, выделяемую под спрайт.
  • Поддержка нескольких атласов: сцена может одновременно работать с несколькими наборами фреймов.

Примеры типовых задач

  1. Создание кнопок из атласа:
const button = this.add.sprite(200, 300, 'uiAtlas', 'button_idle');
button.setInteractive();
button.on('pointerover', () => button.setFrame('button_hover'));
button.on('pointerout', () => button.setFrame('button_idle'));
button.on('pointerdown', () => button.setFrame('button_pressed'));
  1. Анимация персонажа с разными направлениями движения:
const directions = ['up', 'down', 'left', 'right'];

directions.forEach(dir => {
    this.anims.create({
        key: `walk_${dir}`,
        frames: this.anims.generateFrameNames('playerAtlas', { prefix: `${dir}_`, start: 1, end: 4 }),
        frameRate: 8,
        repeat: -1
    });
});
  1. Случайное отображение фреймов для эффекта частиц:
const frames = this.textures.get('particlesAtlas').getFrameNames();
const particle = this.add.sprite(400, 300, 'particlesAtlas', Phaser.Utils.Array.GetRandom(frames));

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

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

Оглавление