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

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

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

Версия 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 marker = this.add.image(100, 100, 'block').setAlpha(0.3);
        var image = this.add.image(100, 100, 'block');

        var tween = this.tweens.add({
            targets: image,
            x: 600,
            ease: 'Power1',
            duration: 3000,
            delay: 2000
        });
    }
}

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 мы загружаем спрайт, который будем анимировать. Важно заметить использование метода load.setBaseURL, который задаёт базовый URL для всех последующих загрузок. Это удобно, чтобы не писать полный путь к файлам каждый раз.

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

Создание визуальных маркеров и объектов

В методе create мы создаём два графических объекта из одного и того же изображения 'block'. Первый объект, marker, служит статичным указателем исходной позиции. Его прозрачность уменьшена с помощью setAlpha(0.3), чтобы визуально отделить от движущегося объекта.

Второй объект, image, — это тот самый спрайт, который мы будем анимировать. Изначально он помещён в ту же точку (100, 100), что и маркер.

var marker = this.add.image(100, 100, 'block').setAlpha(0.3);
var image = this.add.image(100, 100, 'block');

Настройка и запуск твина с задержкой

Самое интересное — создание анимации с помощью менеджера твинов this.tweens.add. Конфигурационный объект твина содержит несколько ключевых параметров: * targets: объект или массив объектов для анимации. * `x`: конечная координата по оси X. * ease: функция плавности анимации ('Power1'). * duration: длительность основного движения в миллисекундах (3000 мс = 3 сек). * delay: время задержки *перед началом* анимации в миллисекундах (2000 мс = 2 сек).

Именно параметр delay отвечает за паузу между созданием твина и стартом перемещения спрайта из точки (100, 100) в точку (600, 100).

var tween = this.tweens.add({
    targets: image,
    x: 600,
    ease: 'Power1',
    duration: 3000,
    delay: 2000
});

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

Код завершается стандартной для Phaser 3 конфигурацией игры. В объекте config задаются тип рендерера, размеры холста, цвет фона, 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);

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

Свойство delay в твинах Phaser 3 — это простой, но крайне полезный инструмент для точного управления временем в анимациях. Оно позволяет легко создавать последовательности действий, паузы для драматического эффекта или синхронизацию движения нескольких объектов. Для экспериментов попробуйте: 1. Анимировать несколько спрайтов с разными задержками, создав "волну" движений. 2. Комбинировать delay с другими свойствами твина, например, repeat или yoyo, чтобы создать сложные циклические анимации с паузами между фазами. 3. Динамически задавать задержку в зависимости от игровых событий, например, увеличивая паузу с каждым новым уровнем.