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

Визуальные эффекты — важная часть игровой атмосферы. Плавное изменение прозрачности системы частиц позволяет создавать динамичные, «живые» эффекты, такие как пульсирующий туман, мерцающее сияние или затухающий дым. В этой статье разберем, как с помощью встроенного Tween Manager анимировать свойство `alpha` эмиттера частиц, добавив сложности и выразительности вашим визуальным эффектам без написания сложного кода вручную.

Версия 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/pics/checker.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_12',
            angle: { min: 240, max: 300 },
            speed: { min: 200, max: 300 },
            lifespan: 3000,
            scale: { start: 1, end: 0.25 },
            gravityY: 200
        });

        this.tweens.add({
            targets: emitter,
            alpha: 0,
            yoyo: true,
            repeat: -1,
            duration: 1000
        });
    }
}

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

const game = new Phaser.Game(config);

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

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

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

В методе create размещаем фон и создаем основной объект статьи — эмиттер частиц. Ключевые параметры: - frame: определяет, какой именно спрайт из атласа использовать для каждой частицы. - angle, speed: задают направление и разброс скорости разлета частиц. - lifespan: время жизни частицы в миллисекундах. - scale: анимация масштаба от начала к концу жизни частицы. - gravityY: имитация силы тяжести, притягивающей частицы вниз.

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

    const emitter = this.add.particles(400, 300, 'match3', {
        frame: 'Match3_Icon_12',
        angle: { min: 240, max: 300 },
        speed: { min: 200, max: 300 },
        lifespan: 3000,
        scale: { start: 1, end: 0.25 },
        gravityY: 200
    });
}

Анимация прозрачности через Tween Manager

Phaser предоставляет мощную систему анимации свойств объектов — Tween Manager, доступную через this.tweens. Мы можем анимировать практически любое числовое свойство игрового объекта, включая alpha эмиттера.

Создаем твин, который будет управлять прозрачностью нашего эмиттера: - targets: объект или массив объектов, к которым применяется анимация. В нашем случае — это созданный эмиттер emitter. - alpha: 0: целевое значение прозрачности. 1 — полностью непрозрачный, 0 — полностью прозрачный. - yoyo: true: включает режим «йо-йо». После достижения целевого значения alpha: 0 анимация автоматически проигрывается в обратном порядке до исходного состояния. - repeat: -1: указывает на бесконечное повторение анимации. Значение -1 соответствует бесконечному циклу. - duration: 1000: длительность одного прямого (или обратного) проигрывания анимации в миллисекундах.

this.tweens.add({
    targets: emitter,
    alpha: 0,
    yoyo: true,
    repeat: -1,
    duration: 1000
});

В результате эмиттер будет плавно исчезать и появляться с периодичностью в 2 секунды (1 секунда на исчезание + 1 секунда на появление).

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

Код завершается стандартной для Phaser конфигурацией игры. Важно отметить, что свойство backgroundColor установлено в черный цвет ('#000'), но фоном сцены служит загруженное изображение 'bg'. Конфигурация передается в конструктор Phaser.Game для запуска.

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

const game = new Phaser.Game(config);

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

Использование this.tweens для анимации свойств эмиттера частиц — простой и эффективный способ добавить динамики вашим эффектам. Экспериментируйте: анимируйте не только alpha, но и другие свойства, например scale для эффекта «пульсации» или angle для вращения всего облака частиц. Попробуйте создать цепь твинов с разной задержкой (delay) для нескольких эмиттеров, чтобы получить сложную, каскадную анимацию.