Phaser.js: всё об играх и разработке

О чем этот пример

Современные игры требуют большого количества плавной и детализированной анимации. Загружать каждую текстуру по отдельности — неэффективно и медленно. В этой статье мы разберем, как загружать и использовать сложные анимации с помощью формата Multi Atlas. Этот подход позволяет загрузить все кадры одной анимации всего одним HTTP-запросом, что значительно ускоряет загрузку игры и упрощает управление ресурсами.

Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.

Живой запуск

Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.

Исходный код

class Example extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.path = 'assets/animations/cybercity/';
        this.load.multiatlas('cybercity', 'cybercity-multi.json');
    }

    create ()
    {
        this.anims.create({ key: 'fly', frames: this.anims.generateFrameNames('cybercity', { start: 0, end: 98 }), repeat: -1 });
        this.add.sprite(400, 300).setScale(2.7).play('fly');
    }
}

const config = {
    type: Phaser.WEBGL,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    pixelArt: true,
    scene: Example
};

const game = new Phaser.Game(config);

Что такое Multi Atlas?

Multi Atlas — это формат данных, который объединяет множество отдельных текстур (спрайтов) в один большой файл изображения (атлас) и сопутствующий JSON-файл с метаданными. В отличие от обычного атласа, Multi Atlas может состоять из нескольких файлов изображений (листов), что особенно удобно для очень длинных анимаций, которые не помещаются на один лист.

Phaser предоставляет специальный загрузчик multiatlas для работы с таким форматом. После загрузки вы получаете единый ключ текстуры (например, 'cybercity'), с которым можно работать, как с обычным атласом.

Загрузка ресурсов в `preload`

На этапе предзагрузки (preload) мы настраиваем базовый путь к ресурсам и загружаем Multi Atlas.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.path = 'assets/animations/cybercity/';
    this.load.multiatlas('cybercity', 'cybercity-multi.json');
}

1. setBaseURL и path задают базовый путь, от которого будут загружаться все последующие ресурсы. Это позволяет не указывать полные URL каждый раз. 2. load.multiatlas('cybercity', 'cybercity-multi.json') — ключевой метод. Первый аргумент ('cybercity') — это уникальный ключ, по которому мы будем обращаться к загруженному атласу в игре. Второй аргумент — путь к JSON-файлу с описанием атласа. Загрузчик сам прочитает этот файл и загрузит все указанные в нем изображения.

Создание анимации в `create`

После загрузки ресурсов в методе create мы создаем анимацию и добавляем спрайт на сцену.

create ()
{
    this.anims.create({ key: 'fly', frames: this.anims.generateFrameNames('cybercity', { start: 0, end: 98 }), repeat: -1 });
    this.add.sprite(400, 300).setScale(2.7).play('fly');
}

1. `this.anims.create(...)` создает новую анимацию в менеджере анимаций сцены. Параметр `key: 'fly'` задает ее уникальное имя.
2. `frames: this.anims.generateFrameNames('cybercity', { start: 0, end: 98 })` — здесь генерируется массив кадров. Метод `generateFrameNames` автоматически создает имена кадров для атласа `'cybercity'` по индексам от 0 до 98. Это возможно, если в JSON-файле атласа кадры названы по шаблону (например, `frame_000.png`, `frame_001.png`).
3. `repeat: -1` означает, что анимация будет зациклена бесконечно.
4. `this.add.sprite(400, 300)` создает спрайт в центре экрана.
5. `.setScale(2.7)` увеличивает спрайт, так как исходные кадры могут быть маленькими.
6. `.play('fly')` запускает на созданном спрайте анимацию с ключом `'fly'`.

Важные детали конфигурации игры

Конфигурация игры содержит важную настройку для пиксельной графики.

const config = {
    type: Phaser.WEBGL,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    pixelArt: true,
    scene: Example
};

Ключевой параметр здесь — pixelArt: true. Когда он установлен, Phaser отключает сглаживание (anti-aliasing) для всех загруженных текстур. Это критически важно для игр с пиксельной стилистикой, как в нашем примере. Без этого флага четкие пиксельные края кадров анимации будут размыты при масштабировании.

Что попробовать дальше

Использование Multi Atlas — это мощный и эффективный способ работы с анимациями в Phaser, особенно когда кадров много. Он оптимизирует загрузку и упрощает код. Для экспериментов попробуйте: 1. Изменить параметры start и end в generateFrameNames, чтобы проигрывать только часть анимации. 2. Настроить скорость анимации, добавив параметр frameRate в this.anims.create. 3. Загрузить несколько Multi Atlas и переключать анимации по событию (например, по клику).