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

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

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

Версия 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(0, 0, 'match3', {
            frame: [ 'Match3_Icon_30', 'Match3_Icon_29' ],
            lifespan: 4000,
            speed: { min: 200, max: 350 },
            scale: { start: 0.4, end: 0 },
            rotate: { start: 0, end: 360 },
            gravityY: 200,
            emitting: false
        });

        this.input.on('pointerdown', pointer => {

            emitter.emitParticleAt(pointer.worldX, pointer.worldY, 4);

        });

        this.add.text(10, 10, 'Click to emit particles at pointer');
    }
}

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

const game = new Phaser.Game(config);

Создание и настройка эмиттера

В методе create сначала добавляется фоновое изображение. Затем создается основной объект эмиттера частиц с помощью this.add.particles(). Ключевые параметры конфигурации: - frame: Массив названий кадров из атласа, которые будут использоваться как текстуры для частиц. - lifespan: Время жизни частицы в миллисекундах. - speed: Объект с минимальной и максимальной скоростью разлёта. - scale: Объект, задающий начальный и конечный размер частицы (здесь она уменьшается до нуля). - rotate: Объект, определяющий вращение частицы за время её жизни. - gravityY: Сила гравитации, притягивающая частицы вниз. - emitting: false: Изначально эмиттер выключен, частицы будут создаваться только по команде.

const emitter = this.add.particles(0, 0, 'match3', {
    frame: [ 'Match3_Icon_30', 'Match3_Icon_29' ],
    lifespan: 4000,
    speed: { min: 200, max: 350 },
    scale: { start: 0.4, end: 0 },
    rotate: { start: 0, end: 360 },
    gravityY: 200,
    emitting: false
});

Привязка эмиттера к вводу пользователя

Следующий шаг — заставить эмиттер реагировать на действия игрока. Мы настраиваем слушатель события pointerdown (клик мыши или касание) с помощью this.input.on. Внутри функции-обработчика вызывается метод эмиттера emitParticleAt. Этот метод принимает координаты X и Y в игровом мире (которые мы получаем из pointer.worldX и pointer.worldY) и количество частиц для одновременного создания.

this.input.on('pointerdown', pointer => {
    emitter.emitParticleAt(pointer.worldX, pointer.worldY, 4);
});

В завершение сцены добавляется текстовое описание для пользователя.

this.add.text(10, 10, 'Click to emit particles at pointer');

Настройка игры и запуск сцены

Объект config определяет базовые настройки игры: тип рендерера, размеры холста, цвет фона, родительский HTML-элемент и главную сцену. После этого создаётся экземпляр игры new Phaser.Game(config), который запускает весь процесс.

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

const game = new Phaser.Game(config);

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

Вы создали интерактивную систему частиц, которая реагирует на клики игрока. Это основа для множества эффектов: магические заклинания, следы от выстрелов, взрывы или сбор предметов. Для экспериментов попробуйте изменить параметры в конфигурации эмиттера: увеличьте gravityY для более резкого падения, добавьте больше кадров в массив frame для разнообразия или поиграйте со значениями scale и rotate. Также можно привязать эмиттер не к клику, а к движению мыши (pointermove) для создания шлейфов.