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/skies/sky2.png');
        this.load.image('rain', 'assets/sprites/rain.png');
    }

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

        this.add.particles(0, 100, 'rain', {
            x: { min: 100, max: 640 },
            quantity: 2,
            lifespan: 2500,
            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.Scene. Метод preload отвечает за загрузку изображений. Здесь мы используем два ассета: фоновое небо (sky2.png) и спрайт одной капли дождя (rain.png).

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('bg', 'assets/skies/sky2.png');
    this.load.image('rain', 'assets/sprites/rain.png');
}

Задаем базовый URL для удобства, чтобы не писать полные пути к файлам. Ключи 'bg' и 'rain' — это внутренние имена текстур, по которым мы будем обращаться к ним в коде.

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

В методе create мы размещаем игровые объекты. Сначала статический фон, а затем — систему частиц.

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

    this.add.particles(0, 100, 'rain', {
        x: { min: 100, max: 640 },
        quantity: 2,
        lifespan: 2500,
        gravityY: 200
    });
}

Вызов this.add.particles создает менеджер частиц (Particle Emitter). Первые два аргумента (0, 100) — это начальные координаты `xиyдля эмиттера. Однако, как мы увидим, координатаx` каждой новой частицы будет случайной.

Настройка поведения частиц: ключевые параметры

Четвертый аргумент this.add.particles — это конфигурационный объект, определяющий поведение системы. Давайте разберем его свойства.

{
    x: { min: 100, max: 640 },
    quantity: 2,
    lifespan: 2500,
    gravityY: 200
}

1. x: { min: 100, max: 640 } — Это самый важный параметр в данном примере. Вместо фиксированной координаты, мы задаем диапазон. Каждая новая частица будет появляться в случайной точке по горизонтали между 100 и 640 пикселями. Это создает эффект дождя, идущего по всей ширине экрана, а не из одной точки. 2. quantity: 2 — Количество частиц, которые эмиттер испускает за один цикл. При старте сцены и далее с интервалом, основанном на частоте кадров, будут рождаться по 2 капли. 3. lifespan: 2500 — Время жизни частицы в миллисекундах. Через 2500 мс (2.5 секунды) капля автоматически уничтожится. 4. gravityY: 200 — Симуляция гравитации. Частица будет постоянно ускоряться вниз по оси Y со скоростью 200 пикселей в секунду за секунду, создавая реалистичное падение.

Конфигурация игры

Объект config определяет основные параметры всего игрового экземпляра Phaser.Game.

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

- type: Phaser.AUTO автоматически выбирает рендерер (WebGL или Canvas). - width/height: Устанавливают размер игрового поля. - backgroundColor: Цвет фона, который виден до загрузки или если фон не покрывает весь холст. - parent: ID HTML-элемента, в который будет встроен игровой canvas. - scene: Класс, который будет использован как начальная сцена. В данном случае это наш Example.

Инициализация игры происходит строкой:

const game = new Phaser.Game(config);

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

Мы создали базовую, но полноценную систему частиц, имитирующую дождь. Главный прием — использование диапазона { min, max } для свойства `x, что делает эмиттер широким и натуралистичным. Для экспериментов попробуйте: изменитьgravityYна отрицательное значение, чтобы создать восходящий поток (огонь, пузыри); добавить свойствоscaleдля изменения размера капель; или применитьvelocityY` для задания постоянной, а не ускоряющейся скорости.