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('star', 'assets/demoscene/star3.png');
    }

    create ()
    {
        this.add.particles(400, 200, 'star', {
            speed: 100,
            lifespan: 3000,
            gravityY: 200
        });
    }
}

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

const game = new Phaser.Game(config);

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

Как и в любой сцене Phaser, нам нужно загрузить изображение, которое будет служить нашей частицей. В данном примере это изображение звезды (star3.png).

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('star', 'assets/demoscene/star3.png');
}

Здесь setBaseURL задаёт базовый URL для загрузки, что удобно, если ваши ассеты лежат в одной папке. Затем метод load.image регистрирует текстуру с ключом 'star'. Этот ключ мы будем использовать позже для создания эмиттера.

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

Основная магия происходит в методе create. Именно здесь создаётся и запускается эмиттер частиц с помощью this.add.particles.

create ()
{
    this.add.particles(400, 200, 'star', {
        speed: 100,
        lifespan: 3000,
        gravityY: 200
    });
}

Первые два аргумента (400, 200) — это координаты X и Y, где будет находиться источник эмиттера на сцене. Третий аргумент ('star') — это ключ текстуры, загруженной на этапе preload. Четвёртый аргумент — объект конфигурации, который определяет поведение частиц.

Настройка поведения частиц

Конфигурационный объект — это сердце нашего эффекта. Давайте разберём каждое из использованных свойств.

{
    speed: 100,
    lifespan: 3000,
    gravityY: 200
}

* speed: 100 — задаёт начальную скорость движения частицы в пикселях в секунду. Частицы будут вылетать из источника с этой скоростью в случайном направлении. * lifespan: 3000 — определяет время жизни каждой частицы в миллисекундах (3000 мс = 3 секунды). После этого частица автоматически уничтожается. * gravityY: 200 — имитирует силу гравитации по оси Y. Положительное значение означает, что гравитация тянет частицы вниз, заставляя их падать после вылета. Это создаёт классический эффект "фейерверка" или падающих искр.

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

Финальный шаг — создание экземпляра игры с конфигурационным объектом. Этот объект определяет базовые параметры всего приложения.

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

const game = new Phaser.Game(config);

Здесь мы задаём размеры холста (800x600), чёрный фон (backgroundColor), указываем контейнер в HTML (parent), который должен иметь id='phaser-example', и передаём нашу сцену Example. Создание экземпляра Phaser.Game с этой конфигурацией автоматически запускает игровой цикл.

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

Вы только что создали работающую систему частиц в Phaser 3. Эмиттер будет непрерывно испускать звёзды из точки (400, 200), которые разлетаются в стороны и падают под действием гравитации. Для экспериментов попробуйте изменить параметры конфигурации: увеличьте lifespan до 10000, чтобы частицы жили дольше; установите gravityY: -100, чтобы они улетали вверх; или измените speed на 0, чтобы создать эффект статичного облака. Также попробуйте использовать другие текстуры для частиц — от простых кругов до сложных спрайтов.