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

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

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

Версия 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('gauge', 'assets/tweens/gauge.png');
        this.load.image('middle', 'assets/tweens/needle-middle.png');
        this.load.image('needle', 'assets/tweens/needle.png');
    }

    create ()
    {
        this.add.image(400, 300, 'gauge');

        const needle = this.add.image(400, 300, 'needle').setOrigin(0.70, 0.32);

        this.add.image(400, 300, 'middle').setOrigin(0.70, 0.32);

        //  Our need ranges from 5 degrees to 260 degrees (to align with the RPM gauge)
        needle.setAngle(5);

        this.tweens.add({
            targets: needle,
            angle: '+=255',
            duration: 3000,
            ease: 'Sine.inOut',
            yoyo: true,
            repeat: -1
        });
    }
}

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 загружаются три изображения: фон датчика (gauge), сама стрелка (needle) и декоративная центральная заглушка (middle).

class Example extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('gauge', 'assets/tweens/gauge.png');
        this.load.image('middle', 'assets/tweens/needle-middle.png');
        this.load.image('needle', 'assets/tweens/needle.png');
    }

Создание и позиционирование графики

В методе create мы размещаем изображения на сцене. Ключевой момент — установка точки вращения (origin) для стрелки и заглушки. Без этого стрелка будет вращаться вокруг своего центра, а не вокруг фиксированной точки у своего основания.

Метод setOrigin(0.70, 0.32) смещает точку вращения. Первый аргумент (0.70) — смещение по оси X (70% от ширины спрайта), второй (0.32) — по оси Y (32% от высоты). Эти значения подобраны эмпирически, чтобы совместить точку вращения с центром круглой части датчика на фоне.

create ()
{
    this.add.image(400, 300, 'gauge');

    const needle = this.add.image(400, 300, 'needle').setOrigin(0.70, 0.32);

    this.add.image(400, 300, 'middle').setOrigin(0.70, 0.32);

После создания стрелке сразу задается начальный угол в 5 градусов с помощью setAngle(5). Это соответствует начальному положению на шкале датчика.

Создание и настройка твина

Сердце анимации — вызов this.tweens.add(). Твин — это интерполяция свойств объекта между двумя состояниями за заданное время.

Конфигурационный объект твина содержит несколько важных свойств: - targets: объект или массив объектов, свойства которых будут анимированы. - angle: целевое значение свойства. Синтаксис '+=255' означает, что твин будет анимировать изменение угла от текущего значения (5°) до значения 5° + 255° = 260°. - duration: длительность одного цикла анимации в миллисекундах (3000 мс = 3 секунды). - ease: функция плавности 'Sine.inOut'. Она обеспечивает плавное ускорение в начале и замедление в конце движения, что делает анимацию более естественной. - yoyo: если true, после завершения анимации до целевого значения она проиграется в обратном порядке. - repeat: количество повторений. Значение -1 означает бесконечное повторение.

needle.setAngle(5);

    this.tweens.add({
        targets: needle,
        angle: '+=255',
        duration: 3000,
        ease: 'Sine.inOut',
        yoyo: true,
        repeat: -1
    });
}

В результате стрелка будет плавно "ездить" по шкале от 5° до 260° и обратно каждые 3 секунды.

Инициализация игры и конфигурация

За пределами класса сцены создается объект конфигурации игры (config) и инстанс самой игры (game). Это стандартная структура для Phaser 3.

Конфигурация определяет базовые параметры: - type: рендерер (WebGL или Canvas). Phaser.AUTO позволяет движку выбрать лучший из доступных. - width и height: размер игрового холста. - backgroundColor: цвет фона. - parent: ID HTML-элемента, в который будет встроен холст. - scene: класс сцены, которая будет запущена сразу после инициализации игры.

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

const game = new Phaser.Game(config);

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

Твининг в Phaser — мощный и простой инструмент для создания плавных анимаций. На примере стрелки датчика мы увидели, как анимировать свойство angle с контролем точки вращения, длительности и плавности. **Идеи для экспериментов:** 1. Замените angle на scaleX или alpha, чтобы создать анимацию "пульсации" или постепенного появления/исчезновения. 2. Используйте событие onComplete в конфигурации твина, чтобы запустить другую анимацию или игровое событие по окончании цикла. 3. Создайте несколько стрелок-индикаторов с разными задержками (delay) и значениями angle, чтобы сымитировать работу сложного приборного щита.