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

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

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

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

Живой запуск

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

Исходный код

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

var game = new Phaser.Game(config);

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

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

    var tween = this.tweens.add({
        targets: image,
        x: 700,
        duration: 6000,
        ease: 'Power2'
    });

    tween.pause();

    this.input.once('pointerdown', () => {

        tween.resume();

    });
}

Настройка сцены и загрузка ресурсов

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

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

var game = new Phaser.Game(config);

Функция preload отвечает за загрузку необходимых ресурсов. Здесь мы устанавливаем базовый URL для загрузки и загружаем одно изображение — спрайт 'block', который будет использоваться для визуализации анимации.

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

Создание объектов и анимации Tween

В функции create мы создаем визуальные элементы и саму анимацию. Сначала добавляются два спрайта с изображением 'block' на одинаковой стартовой позиции (x:100, y:300). Первый спрайт marker служит статичным указателем начальной точки, его прозрачность уменьшена до 0.3. Второй спрайт image — это активный объект, который мы будем анимировать.

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

Далее создается Tween-анимация с помощью this.tweens.add. Целью анимации (targets) является наш спрайт image. Анимация будет перемещать спрайт по оси X от 100 до 700 пикселей за 6000 миллисекунд (6 секунд) с плавностью ease: 'Power2'.

var tween = this.tweens.add({
        targets: image,
        x: 700,
        duration: 6000,
        ease: 'Power2'
    });

Управление анимацией: пауза и запуск по событию

Ключевой момент примера — управление состоянием анимации. Сразу после создания Tween мы вызываем метод pause() для объекта tween. Это останавливает выполнение анимации до того, как она начнется. Спрайт image останется неподвижным на стартовой позиции.

tween.pause();

Чтобы возобновить анимацию, мы настраиваем обработчик события. Метод this.input.once регистрирует одноразовый обработчик для события 'pointerdown' (клик или касание). Когда пользователь взаимодействует с игрой, вызывается функция, которая запускает анимацию заново с помощью метода resume().

this.input.once('pointerdown', () => {
        tween.resume();
    });

Таким образом, анимация начнется не автоматически, а только после первого клика игрока, что и демонстрирует пример.

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

Использование pause() и resume() для Tween-анимаций позволяет гибко управлять игровым процессом. Вы можете создать сцену, где анимация запускается по условию, например, после решения головоломки, набора очков или ввода игрока. Для экспериментов попробуйте привязать возобновление анимации к другим событиям, например, 'pointerup', или управлять несколькими Tween одновременно, создавая сложные интерактивные последовательности.