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

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

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

Версия 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.image('block', 'assets/sprites/block.png');
    }

    create()
    {
        var image = this.add.image(400, 500, 'block');

        var tween = this.tweens.add({
            targets: image,
            y: '-=64',
            ease: 'Sine.easeInOut',
            yoyo: true,
            repeat: 6
        });

        console.log(tween);

    }
}

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

const game = new Phaser.Game(config);

Настройка сцены и загрузка спрайта

Вся логика примера содержится в классе сцены, унаследованном от Phaser.Scene. В методе preload мы указываем базовый URL для загрузки ассетов и загружаем одно изображение — спрайт с именем 'block'. Этот спрайт будет нашим целевым объектом для анимации.

preload()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('block', 'assets/sprites/block.png');
}

После загрузки, в методе create, мы создаем экземпляр этого изображения на сцене, помещая его в точку с координатами (400, 500).

Создание и конфигурация твина

Ключевая часть примера — создание твина. Мы вызываем метод this.tweens.add(), передавая ему объект конфигурации. Основные параметры: * targets: объект или массив объектов для анимации (наш спрайт image). * y: '-=64': Это относительное значение. Оно указывает, что свойство `y` (вертикальная позиция) цели должно уменьшиться на 64 пикселя от своего текущего значения. Это гораздо удобнее, чем вычислять и указывать абсолютные координаты. * ease: Функция плавности 'Sine.easeInOut' задает ускорение и замедление в начале и конце каждого шага анимации, делая движение более естественным.

var tween = this.tweens.add({
    targets: image,
    y: '-=64',
    ease: 'Sine.easeInOut',
    yoyo: true,
    repeat: 6
});

Повторение и режим Yoyo

Параметры repeat и yoyo работают в связке, создавая сложную циклическую анимацию из одной простой инструкции. * yoyo: true: Включает обратное проигрывание анимации. После того как спрайт достигнет конечной точки (y -= 64), он начнет двигаться обратно к стартовой позиции. * repeat: 6: Определяет, сколько раз должен повториться полный цикл анимации. Важно понимать, что один цикл — это движение «туда» (заданное y: '-=64') и, если yoyo активен, обратно. Таким образом, спрайт совершит 6 полных движений «вверх-вниз».

Созданный объект твина сохраняется в переменную tween и выводится в консоль для отладки. Через этот объект можно позднее управлять анимацией (пауза, возобновление, остановка).

Инициализация игры

Код завершается созданием конфигурационного объекта игры и экземпляра Phaser.Game. Конфигурация определяет основные параметры, такие как размер холста, цвет фона и корневой класс сцены, который будет запущен автоматически.

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

const game = new Phaser.Game(config);

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

Использование относительных значений ('-=64') в сочетании с yoyo и repeat — это мощный и лаконичный способ создания циклических анимаций в Phaser 3. Для экспериментов попробуйте изменить функцию плавности (ease) на 'Bounce.easeOut' для прыгающего эффекта, анимируйте другие свойства, например `xилиangle, или начните твин не сразу, установив параметрdelay. Также вы можете добавить обработчик событияonComplete` для выполнения кода после окончания всех повторений.