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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('bg', 'assets/tweens/sky.png');
        this.load.atlas('match3', 'assets/atlas/match3.png', 'assets/atlas/match3.json');
    }

    create ()
    {
        this.add.image(400, 300, 'bg');

        const emitter = this.add.particles(100, 300, 'match3', {
            frame: 'Match3_Icon_01',
            speedY: 200,
            lifespan: 2000,
            alpha: { start: 1, end: 0 },
            gravityX: 400,
            scale: 0.5
        });

        this.tweens.add({
            targets: emitter,
            speedY: -100,
            duration: 500,
            ease: 'sine.inout',
            yoyo: true,
            repeat: -1
        });
    }
}

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

const game = new Phaser.Game(config);

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

В методе preload мы загружаем два ресурса: фоновое изображение и атлас спрайтов. Атлас match3 будет использоваться как текстура для наших частиц.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('bg', 'assets/tweens/sky.png');
    this.load.atlas('match3', 'assets/atlas/match3.png', 'assets/atlas/match3.json');
}

Создание эмиттера частиц

В методе `create` сначала добавляется фоновое изображение. Затем создаётся эмиттер частиц с помощью `this.add.particles()`. Ключевые параметры настройки:
- `speedY: 200` — начальная вертикальная скорость частиц (вниз).
- `lifespan: 2000` — время жизни частицы в миллисекундах.
- `alpha: { start: 1, end: 0 }` — частицы плавно исчезают.
- `gravityX: 400` — сильное горизонтальное притяжение, увлекающее частицы вправо.
- `scale: 0.5` — масштаб частиц.

const emitter = this.add.particles(100, 300, 'match3', {
    frame: 'Match3_Icon_01',
    speedY: 200,
    lifespan: 2000,
    alpha: { start: 1, end: 0 },
    gravityX: 400,
    scale: 0.5
});

Анимация свойства эмиттера через Tween

Здесь происходит самое интересное. Мы создаём твин, который будет анимировать не графический объект, а сам эмиттер, а точнее — его свойство speedY. Твин настроен на бесконечное повторение с эффектом йо-йо. - targets: emitter — указываем, что анимируем объект emitter. - speedY: -100 — целевое значение скорости. Частицы начнут лететь вверх. - yoyo: true — после достижения цели твин проиграется в обратном порядке. - repeat: -1 — бесконечное повторение.

Таким образом, вертикальная скорость частиц будет плавно колебаться между 200 (вниз) и -100 (вверх), создавая эффект пульсации или дыхания всего потока.

this.tweens.add({
    targets: emitter,
    speedY: -100,
    duration: 500,
    ease: 'sine.inout',
    yoyo: true,
    repeat: -1
});

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

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

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

const game = new Phaser.Game(config);

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

Твины в Phaser — мощный инструмент для анимации не только позиций или альфа-каналов, но и любых числовых свойств ваших игровых объектов, включая параметры эмиттеров частиц. Для экспериментов попробуйте анимировать другие свойства, такие как frequency, gravityX/gravityY, или angle. Комбинируя несколько твинов на одном эмиттере, можно создавать невероятно сложные и живые визуальные эффекты для магии, техники или природных явлений в вашей игре.