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

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

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

Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.

Живой запуск

Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.

Исходный код

class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('bg', 'assets/skies/darkstone.png');
        this.load.image('arrow', 'assets/sprites/longarrow.png');
    }

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

        const sprite = this.add.sprite(400, 400, 'arrow').setOrigin(0, 0.5);

        this.tweens.add({
            targets: sprite,
            angle: { from: -60, to: -120 },
            duration: 1000,
            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);

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

Вся работа начинается в методе preload(). Здесь мы загружаем два изображения: фон (bg) и спрайт стрелки (arrow). Обратите внимание на использование метода setBaseURL — он позволяет задать базовый путь для всех последующих загрузок, что упрощает указание относительных путей к файлам.

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

Создание спрайта и настройка точки вращения

В методе create() мы сначала добавляем фоновое изображение. Затем создаем спрайт стрелки. Критически важный шаг здесь — установка точки вращения с помощью метода .setOrigin(0, 0.5). Первый аргумент `0устанавливает точку привязки по оси X в левый край спрайта. Второй аргумент0.5` устанавливает точку по оси Y в центр высоты спрайта. В результате спрайт будет вращаться вокруг своего левого края, как стрелка на циферблате.

const sprite = this.add.sprite(400, 400, 'arrow').setOrigin(0, 0.5);

Создание и настройка твина для анимации угла

Сердце анимации — твин, создаваемый через this.tweens.add(). Конфигурационный объект твина содержит несколько ключевых свойств: * targets: объект или массив объектов, к которым применяется анимация. * angle: целевое свойство, которое мы анимируем. Мы задаем объект с полями from и to, определяющими начальный и конечный угол в градусах. * duration: длительность одного цикла анимации в миллисекундах. * yoyo: если true, твин автоматически проиграется в обратном порядке после завершения прямого цикла. * repeat: количество повторений. Значение -1 означает бесконечное повторение.

this.tweens.add({
    targets: sprite,
    angle: { from: -60, to: -120 },
    duration: 1000,
    yoyo: true,
    repeat: -1
});

Твин плавно изменит свойство angle спрайта от -60 до -120 градусов за 1 секунду, затем вернет его обратно к -60 (благодаря yoyo: true) и будет повторять этот процесс бесконечно.

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

За пределами класса сцены мы определяем конфигурационный объект игры. В нем задаются базовые параметры: тип рендерера, размеры холста, цвет фона, ID родительского HTML-элемента и класс основной сцены. После этого создается экземпляр игры new Phaser.Game(config), который запускает весь процесс.

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

const game = new Phaser.Game(config);

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

Использование твинов для анимации свойств вроде angle — это мощный и простой способ "оживить" вашу игру. Для экспериментов попробуйте: заменить angle на rotation (значения в радианах), анимировать несколько свойств одновременно (например, angle и scale), изменить функцию эasing твина через свойство ease или привязать запуск анимации к игровым событиям.