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

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

Визуальные эффекты, такие как огонь, магия, дым или звёздная пыль, оживляют игровой мир. В Phaser за них отвечает система частиц (Particle System). Эта статья покажет, как быстро создать базовый эмиттер частиц, управлять его поведением и настраивать рендеринг для достижения ярких эффектов, которые работают эффективно благодаря единому менеджеру текстур.

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('spark', 'assets/particles/blue.png');
    }

    create ()
    {
        //  First create a particle manager
        //  A single manager can be responsible for multiple emitters
        //  The manager also controls which particle texture is used by _all_ emitter
        const particles = this.add.particles('spark');

        const emitter = particles.createEmitter();

        emitter.setPosition(400, 300);
        emitter.setSpeed(200);
        emitter.setBlendMode(Phaser.BlendModes.ADD);
    }
}

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

const game = new Phaser.Game(config);

Структура примера: от загрузки до конфигурации

Код начинается с определения сцены, загрузки ресурса и настройки основного объекта игры Phaser.Game.

class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('spark', 'assets/particles/blue.png');
    }

В методе preload задаётся базовый URL для загрузки и загружается одно изображение spark — будущая текстура для каждой частицы. Это стандартный подход Phaser для подготовки ресурсов.

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

const game = new Phaser.Game(config);

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

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

Вся работа с частицами начинается с создания менеджера.

const particles = this.add.particles('spark');

Метод this.add.particles('spark') создаёт и возвращает объект ParticleEmitterManager. Ключевая его роль — управление текстурой: все эмиттеры, созданные этим менеджером, будут использовать переданное изображение spark. Это эффективно, так как множество частиц рисуются одним батчем.

const emitter = particles.createEmitter();

Метод createEmitter() фабрики менеджера создаёт и возвращает объект ParticleEmitter. Именно этот объект контролирует поведение частиц: их рождение, движение, исчезновение и внешний вид. Один менеджер может содержать множество таких эмиттеров с разными настройками.

Базовая настройка эмиттера: позиция, скорость и блендинг

Созданный эмиттер нужно настроить. В примере задаются три фундаментальных свойства.

emitter.setPosition(400, 300);

Метод setPosition(x, y) определяет поведение частиц. Вызов setPosition(400, 300) устанавливает точку их появления в центре экрана. Метод setSpeed(200) задаёт начальную скорость движения частиц в пикселях в секунду. Наконец, setBlendMode(Phaser.BlendModes.ADD) включает аддитивный блендинг: цвета частиц складываются, создавая яркие, светящиеся эффекты, которые идеально подходят для огня, энергии или бликов.

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

Всего несколькими строками кода вы можете добавить в игру динамичные визуальные эффекты. Экспериментируйте: меняйте параметры setSpeed, пробуйте другие бленд-режимы вроде SCREEN, создайте несколько эмиттеров с разными текстурами или заставьте эмиттер следовать за курсором мыши, чтобы понять систему частиц глубже.