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

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

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

Версия 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(50, 100, 'block');
        var image2 = this.add.image(60, 200, 'block');
        var image3 = this.add.image(70, 300, 'block');

        var tween = this.tweens.add({
            targets: [image1, image2, image3],
            x: '+=600',
            y: '+=200',
            duration: 4000,
            ease: 'Power3'
        });

        console.log(tween);
    }
}

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

const game = new Phaser.Game(config);

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

Как и в любой сцене Phaser, мы начинаем с методов жизненного цикла. В preload загружается спрайт — в данном случае простая текстура 'block'. Важно использовать setBaseURL, чтобы указать базовый путь для загрузки ресурсов.

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

Создание объектов и настройка группового твина

В методе create мы создаем три спрайта с изображением 'block', размещая их на разных стартовых позициях. Ключевой момент — создание твина с помощью this.tweens.add. Параметр targets принимает массив объектов, которые будут анимированы. В данном случае это массив [image1, image2, image3].

create() {
    var image1 = this.add.image(50, 100, 'block');
    var image2 = this.add.image(60, 200, 'block');
    var image3 = this.add.image(70, 300, 'block');

    var tween = this.tweens.add({
        targets: [image1, image2, image3],
        x: '+=600',
        y: '+=200',
        duration: 4000,
        ease: 'Power3'
    });
}

Параметры твина: - x: '+=600' и y: '+=200' — относительное смещение от текущей позиции каждого спрайта. - duration: 4000 — длительность анимации в миллисекундах. - ease: 'Power3' — функция плавности, которая задает ускорение и замедление движения.

Как работает групповой твин

Когда твин запускается, он применяет указанные свойства (например, `xиy) ко всем объектам в массивеtargets. Каждый объект анимируется независимо, но с одинаковыми параметрами: смещением, длительностью и функцией плавности. Это эффективнее, чем создавать отдельный твин для каждого спрайта, так как менеджерtweens` оптимизирует обновление.

Твин возвращает объект (Tween), который можно использовать для контроля анимации — например, для паузы, возобновления или остановки. В примере он выводится в консоль для отладки.

console.log(tween);

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

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

Использование групповых твинов в Phaser упрощает управление анимациями множества объектов. Вы можете экспериментировать, добавляя разные свойства (например, alpha для прозрачности или scale для размера), комбинируя твины в цепочки с yoyo или repeat, или применяя различные функции плавности из библиотеки Phaser. Попробуйте анимировать динамический массив объектов, который меняется во время игры — это откроет новые возможности для визуальных эффектов.