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

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

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

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

Живой запуск

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

Исходный код

new Phaser.Game({
    width: 800,
    height: 600,
    backgroundColor: '#2d2d2d',
    parent: 'phaser-example',
    scene: {
        preload: preload,
        create: create
    }
});

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

function create ()
{
    this.add.image(700, 300, 'arrow').setAlpha(0.5);

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

    const tween = this.tweens.add({
      targets: arrow,
      x: 600,
      duration: 1000,
      loop: -1
    });

    tween.play();
}

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

Каждая игра в Phaser начинается с создания экземпляра Phaser.Game. В этом примере мы настраиваем игровое поле размером 800x600 пикселей с тёмно-серым фоном и привязываем его к HTML-элементу с id phaser-example. Сцена определяется двумя ключевыми функциями: preload для загрузки ресурсов и create для их размещения и анимации.

new Phaser.Game({
    width: 800,
    height: 600,
    backgroundColor: '#2d2d2d',
    parent: 'phaser-example',
    scene: {
        preload: preload,
        create: create
    }
});

В функции preload мы устанавливаем базовый URL для загрузки и загружаем спрайт стрелки. Обратите внимание, что this.load.setBaseURL() позволяет задать общий путь, упрощая указание относительных путей к ресурсам.

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

Создание объектов: статичная и анимируемая стрелка

Функция create вызывается один раз после загрузки всех ресурсов. Здесь мы размещаем два изображения стрелки. Первая стрелка добавляется в правую часть экрана и делается полупрозрачной с помощью setAlpha(0.5). Она служит визуальным маркером — конечной точкой пути для нашей анимации.

function create ()
{
    this.add.image(700, 300, 'arrow').setAlpha(0.5);

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

Вторая стрелка (arrow) — это наш главный объект анимации. Мы сохраняем ссылку на неё в константе, чтобы передать системе твинов.

Конфигурация твина: сердце анимации

Анимация создаётся с помощью this.tweens.add(). Этот метод принимает объект конфигурации, который описывает, что и как анимировать. Давайте разберём ключевые свойства:

* targets: Массив объектов или один объект для анимации. В нашем случае — это спрайт arrow. * `x`: Свойство, которое мы хотим изменить. Здесь мы задаём конечную координату X (600 пикселей). * duration: Продолжительность анимации в миллисекундах (1000 мс = 1 секунда). * loop: Количество повторений. Значение -1 означает бесконечный цикл.

const tween = this.tweens.add({
  targets: arrow,
  x: 600,
  duration: 1000,
  loop: -1
});

Метод возвращает объект Tween, который мы сохраняем в константу tween. Это даёт нам контроль над анимацией: её можно приостановить, возобновить или остановить.

Запуск анимации: явный вызов play()

Хотя многие твины в Phaser запускаются автоматически, иногда полезно управлять моментом старта вручную. В данном примере твин явно запускается вызовом метода play() на сохранённом объекте Tween.

tween.play();

Это демонстрирует важный паттерн: создание конфигурации твина отдельно от его запуска. Такой подход полезен, когда анимация должна начаться по какому-то событию (клику, таймеру, коллизии), а не сразу при создании сцены. В результате стрелка начнёт своё бесконечное путешествие от X=100 до X=600 и обратно.

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

Система твинов Phaser — это мощный и гибкий инструмент для создания плавных анимаций. Мы рассмотрели базовый пример анимации перемещения по оси X, но потенциал гораздо шире. Вы можете экспериментировать: попробуйте анимировать одновременно несколько свойств (например, `y,angle,scaleилиalpha), изменитеease-функцию для нелинейного движения (например,'Power2'), или запустите твин не сразу, а по событиюthis.input.on('pointerdown', ...)`. Это фундамент, на котором строятся сложные и красивые игровые механики.