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

Анимация спрайтов — ключевой элемент любой 2D-игры, оживляющий персонажей и окружение. В Phaser этот процесс может быть простым и эффективным, если у вас есть подготовленная последовательность отдельных кадров. В этой статье мы разберем, как создать и запустить циклическую анимацию из набора PNG-изображений, используя встроенный менеджер анимаций Phaser. Этот подход идеально подходит для покадровых анимаций, когда каждый кадр — отдельный файл.

Версия 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/';

        this.load.image('cat1', 'cat1.png');
        this.load.image('cat2', 'cat2.png');
        this.load.image('cat3', 'cat3.png');
        this.load.image('cat4', 'cat4.png');
    }

    create ()
    {
        this.anims.create({
            key: 'snooze',
            frames: [
                { key: 'cat1' },
                { key: 'cat2' },
                { key: 'cat3' },
                { key: 'cat4', duration: 50 }
            ],
            frameRate: 8,
            repeat: -1
        });

        this.add.sprite(400, 300, 'cat1')
            .play('snooze');
    }
}

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    backgroundColor: '#fbf0e4',
    scene: Example
};

const game = new Phaser.Game(config);

Подготовка кадров: загрузка изображений

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

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.path = 'assets/animations/';

    this.load.image('cat1', 'cat1.png');
    this.load.image('cat2', 'cat2.png');
    this.load.image('cat3', 'cat3.png');
    this.load.image('cat4', 'cat4.png');
}

Создание анимации: метод `this.anims.create`

Основная логика анимации определяется с помощью метода this.anims.create(). В него передается объект конфигурации, где указывается ключ анимации, массив кадров, скорость воспроизведения и параметры повтора.

this.anims.create({
    key: 'snooze',
    frames: [
        { key: 'cat1' },
        { key: 'cat2' },
        { key: 'cat3' },
        { key: 'cat4', duration: 50 }
    ],
    frameRate: 8,
    repeat: -1
});

Ключевые параметры: - key: уникальное имя анимации, по которому она будет запускаться. - frames: массив объектов, где каждый объект содержит key — имя загруженного изображения. Можно задать индивидуальную duration (в миллисекундах) для конкретного кадра, как сделано для 'cat4'. - frameRate: общая скорость смены кадров в кадрах в секунду. Она определяет длительность каждого кадра, если не переопределена в duration. - repeat: количество повторений. Значение -1 означает бесконечный цикл.

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

После создания анимации ее нужно применить к игровому объекту. Сначала создается спрайт с помощью this.add.sprite(), указываются его начальные координаты и текстура для первого кадра. Затем на спрайте вызывается метод .play() с ключом созданной анимации.

this.add.sprite(400, 300, 'cat1')
    .play('snooze');

Спрайт автоматически начнет проигрывать анимацию 'snooze' с заданными параметрами. Начальная текстура ('cat1') будет первым кадром в последовательности.

Конфигурация игры и запуск сцены

Весь пример работает в рамках стандартной конфигурации Phaser. В объекте config задаются основные параметры игры: тип рендерера, размеры холста, цвет фона и класс сцены.

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    backgroundColor: '#fbf0e4',
    scene: Example
};

const game = new Phaser.Game(config);

Инициализация игры с этой конфигурацией автоматически запускает жизненный цикл сцены: preload(), create() и далее update().

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

Создание анимации из последовательности PNG-файлов в Phaser — это быстрый и гибкий процесс. Используя this.anims.create(), вы можете тонко настроить длительность каждого кадра и цикличность. Для экспериментов попробуйте изменить frameRate, добавить больше кадров, использовать repeat с конечным числом или создать несколько анимаций для одного спрайта, переключаясь между ними по событию.