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

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

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

Версия 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.atlas('walker', 'assets/animations/walker.png', 'assets/animations/walker.json');
        this.load.image('sky', 'assets/skies/ms3-sky.png');
        this.load.image('trees', 'assets/skies/ms3-trees.png');
    }

    create ()
    {
        this.bg = this.add.tileSprite(0, 38, 800, 296, 'sky').setOrigin(0, 0);
        this.trees = this.add.tileSprite(0, 280, 800, 320, 'trees').setOrigin(0, 0);

        const animConfig = {
            key: 'walk',
            frames: 'walker',
            frameRate: 60,
            repeat: -1
        };

        this.anims.create(animConfig);

        const sprite = this.add.sprite(400, 484, 'walker', 'frame_0000');

        sprite.play('walk');
    }

    update ()
    {
        this.bg.tilePositionX -= 2;
        this.trees.tilePositionX -= 6;
    }
}

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

const game = new Phaser.Game(config);

Подготовка ресурсов и загрузка

Первый шаг — загрузка всех необходимых графических ресурсов. В методе preload() мы используем методы загрузчика (this.load).

Обратите внимание на загрузку атласа анимаций. Атлас — это единое изображение (спрайтшит) и JSON-файл с координатами кадров. Этот подход эффективнее, чем загрузка множества отдельных файлов.

this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.atlas('walker', 'assets/animations/walker.png', 'assets/animations/walker.json');
this.load.image('sky', 'assets/skies/ms3-sky.png');
this.load.image('trees', 'assets/skies/ms3-trees.png');

Метод setBaseURL задаёт базовый URL для всех последующих загрузок, что упрощает указание путей. load.atlas загружает изображение спрайтшита и данные о кадрах. load.image загружает отдельные статичные изображения для фона.

Создание сцены: фон и анимация

В методе create() происходит инициализация игровых объектов. Сначала создаётся фон с эффектом параллакса с помощью TileSprite. Этот тип спрайта позволяет бесшовно повторять текстуру.

this.bg = this.add.tileSprite(0, 38, 800, 296, 'sky').setOrigin(0, 0);
this.trees = this.add.tileSprite(0, 280, 800, 320, 'trees').setOrigin(0, 0);

Параметры: X, Y координаты, ширина, высота и ключ текстуры. setOrigin(0, 0) устанавливает точку привязки в левый верхний угол.

Затем создаётся сама анимация. Конфигурация передаётся в this.anims.create().

const animConfig = {
    key: 'walk',          // Уникальный ключ для обращения к анимации
    frames: 'walker',     // Ключ загруженного атласа
    frameRate: 60,        // Скорость воспроизведения в кадрах в секунду
    repeat: -1            // Бесконечное повторение (-1)
};
this.anims.create(animConfig);

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

const sprite = this.add.sprite(400, 484, 'walker', 'frame_0000');
sprite.play('walk');

add.sprite создаёт спрайт в координатах (400, 484), использует атлас 'walker' и устанавливает начальный кадр 'frame_0000'. Метод play запускает анимацию по её ключу 'walk'.

Динамическое обновление: оживляем фон

Чтобы игра реагировала на время, используется метод update(). Он вызывается на каждом кадре игрового цикла (с частотой, зависящей от frameRate). Здесь мы реализуем движение фона, создавая иллюзию продвижения вперёд.

this.bg.tilePositionX -= 2;
this.trees.tilePositionX -= 6;

Свойство tilePositionX объекта TileSprite управляет смещением текстуры по горизонтали. Уменьшая его значение, мы сдвигаем текстуру влево. Ключевой момент — разная скорость смещения для дальнего (bg) и ближнего (trees) слоёв. Это классический приём параллакса: объекты, которые визуально ближе к наблюдателю, движутся быстрее, что добавляет сцене глубины и реализма.

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

Вся игра инициализируется через объект конфигурации, который передаётся в конструктор new Phaser.Game(config). Этот объект определяет базовые настройки приложения.

const config = {
    type: Phaser.AUTO,        // Автовыбор рендерера (WebGL или Canvas)
    parent: 'phaser-example', // ID DOM-элемента для вставки холста
    width: 800,               // Ширина игрового поля
    height: 600,              // Высота игрового поля
    backgroundColor: '#304858', // Цвет фона до загрузки ресурсов
    scene: Example            // Класс основной сцены
};
const game = new Phaser.Game(config);

Указание scene как класса (Example) автоматически создаст экземпляр этой сцены и будет управлять её жизненным циклом (preload, create, update).

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

Вы создали простую, но визуально привлекательную сцену с анимированным персонажем и параллакс-фоном. Ключевые элементы: использование атласов для анимации, конфигурация анимации через объект и обновление мира в методе update. Для экспериментов попробуйте: изменить frameRate анимации на 30 или 120 и наблюдать за плавностью; добавить управление персонажем с клавиатуры, чтобы он двигался вместе с фоном; создать несколько слоёв параллакса с разной скоростью; использовать другой триггер для запуска анимации, например, по нажатию кнопки.