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

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

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

Версия 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(400, 300, 'match3', {
            frame: 'Match3_Icon_32',
            speed: 20,
            lifespan: 2000,
            scale: 0.3
        });

        this.tweens.add({
            targets: emitter,
            speed: 200,
            duration: 2000,
            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 содержит кадры для частиц.

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. Ключевые параметры инициализации: - Позиция (400, 300) — точка испускания. - frame — конкретный кадр из атласа, который будет использовать каждая частица. - speed — начальная скорость разлёта (20 пикселей в секунду). - lifespan — время жизни частицы в миллисекундах (2000 мс = 2 секунды). - scale — масштаб спрайта частицы.

const emitter = this.add.particles(400, 300, 'match3', {
    frame: 'Match3_Icon_32',
    speed: 20,
    lifespan: 2000,
    scale: 0.3
});

На этом этапе эмиттер создаёт частицы, которые разлетаются с постоянной, довольно низкой скоростью.

Анимация скорости с помощью твина

Чтобы оживить эффект, мы применяем твин к самому объекту emitter. Твин — это инструмент для плавной интерполяции свойств объекта с течением времени.

Конфигурация твина: - targets — объект, свойства которого будут меняться (наш эмиттер). - speed: 200 — целевое значение скорости. Твин будет плавно менять текущее значение speed эмиттера от 20 до 200. - duration — длительность одного цикла анимации (2000 мс). - yoyo: true — после достижения цели значение будет возвращаться к исходному (от 200 обратно к 20). - repeat: -1 — анимация будет повторяться бесконечно.

this.tweens.add({
    targets: emitter,
    speed: 200,
    duration: 2000,
    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);

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

Сочетание системы частиц и твинов — мощный приём для создания сложных динамических эффектов с минимальными усилиями. Вы анимируете не каждую частицу по отдельности, а управляющие параметры всей системы. Для экспериментов попробуйте применить твин к другим свойствам эмиттера, например, к scale (для эффектов расширения/сжатия), angle (для вращения потока) или gravityY (чтобы заставить частицы циклически падать и взлетать).