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

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

Tween (или анимация) — один из ключевых инструментов для оживления игровых объектов. Phaser предоставляет мощную и гибкую систему твинов через `this.tweens`. В этом примере мы разберем, как создать базовое, бесконечно повторяющееся линейное движение. Линейный ease (`'linear'`) — это самый простой тип плавности, при котором объект движется с постоянной скоростью, что идеально подходит для механических или предсказуемых перемещений, например, движения фона, платформ или пуль.

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

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

        const ufo = this.add.image(100, 300, 'ufo');

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

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

const game = new Phaser.Game(config);

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

Как и в любой сцене Phaser, мы начинаем с методов жизненного цикла. В preload загружаются изображения, необходимые для примера. Обратите внимание на использование setBaseURL — это удобный способ задать базовый путь для всех последующих загрузок.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('bg', 'assets/tweens/space.png');
    this.load.image('ufo', 'assets/tweens/ufo2.png');
}

В методе create мы сначала создаем статичный фон и текстовую метку. Затем создаем наш целевой объект — изображение НЛО, которое будем анимировать. Его начальная позиция — (100, 300).

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

Вся магия происходит в вызове this.tweens.add. Этот метод принимает объект конфигурации, который описывает, какую анимацию мы хотим получить.

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

Давайте разберем ключевые свойства: - targets: Указывает, к каким объектам применяется твин. Это может быть один объект или массив. - x: 700: Свойство, которое нужно анимировать, и его конечное значение. Твин плавно изменит координату `x` объекта от текущего значения до 700. - duration: Длительность одного цикла анимации в миллисекундах (2000 мс = 2 секунды). - ease: 'linear': Функция плавности (easing). 'linear' означает отсутствие ускорения или замедления — движение с постоянной скоростью. - repeat: -1: Количество повторений. Значение -1 задает бесконечное повторение. - hold: Время в миллисекундах, в течение которого твин будет удерживать конечное значение перед началом повторения или завершением. - repeatDelay: Задержка в миллисекундах перед началом каждого повторения после этапа hold.

Как работают `hold` и `repeatDelay`

Сочетание hold и repeatDelay создает четкий цикл анимации, который легко визуализировать: 1. **Движение:** Объект перемещается из точки A (x=100) в точку B (x=700) за 2000 мс. 2. **Удержание (hold):** Объект остается в точке B 500 мс. 3. **Задержка повтора (repeatDelay):** Проходит еще 500 мс паузы. 4. **Повтор:** Цикл начинается снова, и объект мгновенно возвращается в точку A (так как мы анимируем только свойство `xдо 700, а не обратно). На практике для движения "туда-обратно" нужно анимировать свойство обратно или использовать другой подход, напримерyoyo`.

Таким образом, полный цикл (движение + паузы) занимает 2000 + 500 + 500 = 3000 мс.

Конфигурация игры

Код завершается стандартной конфигурацией игры Phaser и ее инициализацией. Обратите внимание, что scene указывает на наш класс Example.

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

const game = new Phaser.Game(config);

Эта конфигурация создает игровое окно размером 800x600 пикселей с темно-серым фоном (#2d2d2d) и помещает его в HTML-элемент с id='phaser-example'.

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

Линейные твины — это фундаментальный строительный блок для анимации в Phaser. Они дают полный контроль над временем и повторением движения. Для экспериментов попробуйте: 1. Заменить ease: 'linear' на 'Power2', 'Bounce' или 'Elastic', чтобы увидеть, как меняется характер движения. 2. Добавить свойство yoyo: true, чтобы объект автоматически возвращался в начальную позицию, создавая цикл "туда-обратно". 3. Анимировать несколько свойств одновременно, например, `x,yиangle`, чтобы создать более сложную траекторию. 4. Управлять твином динамически: назначать его переменной и затем использовать методы .pause(), .resume() или .stop().