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

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

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

Версия 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 image1 = this.add.image(130, 50, 'block');
        var image2 = this.add.image(190, 80, 'block');
        var image3 = this.add.image(50, 150, 'block');

        this.tweens.add({
            targets: [image1, image2, image3],
            props: {
                x: { value: '+=600', duration: 3000, ease: 'Power2' },
                y: { value: '500', duration: 1500, ease: 'Bounce.easeOut' }
            },
            delay: 1000
        });

    }
}

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

const game = new Phaser.Game(config);

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

В методе preload мы загружаем текстуру спрайта. Для этого используется метод this.load.image(), где первый аргумент — ключ ассета, а второй — путь к файлу.

this.load.image('block', 'assets/sprites/block.png');

В методе create создаются три игровых спрайта с помощью this.add.image(). Метод принимает координаты X, Y и ключ загруженного изображения. Эти спрайты станут целями для нашей анимации.

var image1 = this.add.image(130, 50, 'block');
var image2 = this.add.image(190, 80, 'block');
var image3 = this.add.image(50, 150, 'block');

Создание группового твина

Основная логика анимации сосредоточена в вызове this.tweens.add(). Конфигурационный объект твина содержит несколько важных полей.

Поле targets принимает массив объектов, которые будут анимированы. В нашем случае это три созданных спрайта.

targets: [image1, image2, image3],

Поле props определяет свойства, которые будут изменяться. Это объект, где ключами являются имена свойств (например, `xиy`), а значениями — конфигурации для их анимации.

props: {
    x: { value: '+=600', duration: 3000, ease: 'Power2' },
    y: { value: '500', duration: 1500, ease: 'Bounce.easeOut' }
},

Для свойства `xзадано относительное значение'+=600', что означает увеличение текущей координаты X на 600 пикселей. Анимация займет 3000 миллисекунд и будет использовать функцию плавности'Power2'`. Для свойства `yзадано абсолютное значение'500'— спрайты переместятся в Y-координату 500. Эта анимация короче (1500 мс) и использует эффект отскока'Bounce.easeOut'`.

Поле delay устанавливает задержку в 1000 миллисекунд перед стартом всей анимации.

delay: 1000

Полный код создания твина

Соберем весь код создания твина в один блок. Это наглядный пример конфигурации, которую передают в систему анимаций Phaser.

this.tweens.add({
    targets: [image1, image2, image3],
    props: {
        x: { value: '+=600', duration: 3000, ease: 'Power2' },
        y: { value: '500', duration: 1500, ease: 'Bounce.easeOut' }
    },
    delay: 1000
});

Конфигурация игры

Запуск игры происходит после определения ее конфигурации. В объекте config задаются базовые параметры: тип рендерера, размеры холста, цвет фона и класс основной сцены.

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

const game = new Phaser.Game(config);

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

Система твинов Phaser предоставляет мощный и лаконичный API для создания сложных анимаций. Показанный подход с массивом targets и объектом props позволяет централизованно управлять анимацией группы объектов. **Идеи для экспериментов:** 1. Попробуйте задать разные значения delay для каждого свойства в объекте props. 2. Добавьте анимацию других свойств, например alpha (прозрачность) или scaleX/scaleY (масштаб). 3. Используйте callback-функции onComplete внутри конфигурации свойства, чтобы запускать цепочки действий после завершения отдельных анимаций.