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

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

Версия 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('bg', 'assets/tweens/space.png');
        this.load.image('ufo1', 'assets/tweens/ufo1.png');
        this.load.image('ufo2', 'assets/tweens/ufo2.png');
        this.load.image('ufo3', 'assets/tweens/ufo3.png');
    }

    create ()
    {
        this.add.image(400, 300, 'bg');
        this.add.text(20, 20, 'Quintic Ease').setFontSize(32).setShadow(2, 2);

        this.add.text(750, 70, 'Quint.in').setShadow(2, 2).setOrigin(1, 0);
        this.add.text(750, 255, 'Quint.out').setShadow(2, 2).setOrigin(1, 0);
        this.add.text(750, 440, 'Quint.inOut').setShadow(2, 2).setOrigin(1, 0);

        const ufo1 = this.add.image(100, 140, 'ufo1');
        const ufo2 = this.add.image(100, 325, 'ufo2');
        const ufo3 = this.add.image(100, 510, 'ufo3');

        this.tweens.add({
            targets: ufo1,
            x: 700,
            duration: 2000,
            repeat: -1,
            hold: 500,
            repeatDelay: 500,
            ease: 'quint.in'
        });

        this.tweens.add({
            targets: ufo2,
            x: 700,
            duration: 2000,
            repeat: -1,
            hold: 500,
            repeatDelay: 500,
            ease: 'quint.out'
        });

        this.tweens.add({
            targets: ufo3,
            x: 700,
            duration: 2000,
            repeat: -1,
            hold: 500,
            repeatDelay: 500,
            ease: 'quint.inout'
        });
    }
}

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

const game = new Phaser.Game(config);

Что такое Easing и зачем он нужен

Easing (или функция плавности) определяет, как изменяется скорость анимации со временем. Без easing объекты двигались бы линейно, с постоянной скоростью, что выглядит роботизированно и неестественно. В реальном мире объекты разгоняются и замедляются. Easing-функции как раз имитируют это поведение.

Phaser предоставляет множество встроенных easing-функций, объединенных в группы. Quintic — одна из таких групп, обеспечивающая довольно выраженный, "сильный" эффект ускорения и замедления. Она идеальна для создания драматичных или стилизованных перемещений.

Структура примера: загрузка и отрисовка

Пример начинается с базовой настройки сцены: загрузки ресурсов в preload и их размещения в create. Обратите внимание, как устанавливается базовый URL для загрузки — это удобно при работе с внешними ресурсами.

this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.image('bg', 'assets/tweens/space.png');
this.load.image('ufo1', 'assets/tweens/ufo1.png');
// ... загрузка ufo2 и ufo3

В методе create сначала отрисовывается фон и текстовые подписи для каждого типа easing с помощью this.add.text. Затем создаются три спрайта НЛО, которые станут целями для наших твинов.

const ufo1 = this.add.image(100, 140, 'ufo1');
const ufo2 = this.add.image(100, 325, 'ufo2');
const ufo3 = this.add.image(100, 510, 'ufo3');

Создание твинов с Quintic Easing

Сердце примера — три вызова this.tweens.add. Каждый твин анимирует свой спрайт НЛО, перемещая его по оси X от 100 до 700 пикселей за 2000 миллисенд (2 секунды). Ключевое отличие — в свойстве ease.

* **ease: 'quint.in'**: Анимация начинается медленно и резко ускоряется к концу. Объект как бы "выстреливает" из стартовой точки. * **ease: 'quint.out'**: Анимация начинается быстро и резко замедляется в конце. Объект плавно "причаливает" к финишу. * **ease: 'quint.inout'**: Комбинация двух предыдущих. Анимация плавно ускоряется в первой половине пути и плавно замедляется во второй. Это создает наиболее естественное и сбалансированное движение.

this.tweens.add({
    targets: ufo1,
    x: 700,
    duration: 2000,
    repeat: -1,
    hold: 500,
    repeatDelay: 500,
    ease: 'quint.in'
});

Обратите внимание на другие полезные свойства конфигурации твина: * repeat: -1 — бесконечное повторение анимации. * hold: 500 — пауза в 500 мс в конечной точке перед началом повторения. * repeatDelay: 500 — задержка в 500 мс перед началом каждого нового цикла анимации (после фазы hold).

Практическое применение и выбор функции

Как выбрать подходящий easing для вашей игры?

* **quint.in (медленный старт)**: Используйте для объектов, которые появляются из невидимости или резко стартуют (например, выстрел из пушки, прыжок после заряда). * **quint.out (медленный финиш)**: Идеально для плавной остановки, "приземления" объектов (персонаж приземляется на платформу, окно плавно закрывается). * **quint.inout (симметричное ускорение)**: Лучший выбор для большинства циклических или возвратных движений, перемещения камеры, перехода между меню. Создает профессиональное, полированное ощущение.

Не бойтесь экспериментировать. Phaser поддерживает множество других функций: quad, cubic, sine, expo и другие. Каждая дает уникальный характер движения. Вы можете легко заменить 'quint' на 'cubic' или 'expo' в свойстве ease, чтобы увидеть разницу.

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

Использование easing-функций — это простой, но невероятно эффективный способ добавить вашей игре полировки и живости. На примере Quintic мы увидели, как несколько строк кода превращают скучное линейное перемещение в выразительную анимацию. **Идеи для экспериментов:** 1. Помимо `x, анимируйте другие свойства:scaleдля эффекта увеличения,angleдля вращения,alpha` для исчезновения. 2. Создайте цепочку твинов с разными функциями easing, чтобы объект двигался по сложной траектории. 3. Используйте встроенный визуальный редактор easing в Phaser Sandbox, чтобы подобрать идеальную кривую для вашего эффекта.