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

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

При работе с системами частиц в Phaser 3 иногда возникает необходимость контролировать, как частицы взаимодействуют с другими игровыми объектами. Свойство `particleBringToTop` эмиттера решает классическую проблему: будут ли частицы отрисовываться поверх других объектов сцены или под ними. Эта статья покажет, как переключать порядок отрисовки частиц в реальном времени и объяснит практическое применение этой настройки для создания более сложных визуальных эффектов.

Версия 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.atlas('blocks', 'assets/sprites/blocks.png', 'assets/sprites/blocks.json');
    }

    create ()
    {
        const emitter = this.add.particles(100, 300, 'blocks', {
            frame: 'redmonster',
            lifespan: 5000,
            angle: { min: -30, max: 30 },
            speed: 150,
            frequency: 200
        });

        const text = this.add.text(10, 10, 'Click to change. bringToTop: true');

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

            if (emitter.particleBringToTop)
            {
                emitter.particleBringToTop = false;
            }
            else
            {
                emitter.particleBringToTop = true;
            }

            text.setText(`Click to change. bringToTop: ${emitter.particleBringToTop}`);

        });

        window.emma = emitter;
    }
}

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

const game = new Phaser.Game(config);

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

В примере создается простой эмиттер частиц, который испускает спрайты из атласа.

const emitter = this.add.particles(100, 300, 'blocks', {
    frame: 'redmonster',
    lifespan: 5000,
    angle: { min: -30, max: 30 },
    speed: 150,
    frequency: 200
});

Ключевые параметры конфигурации: * 100, 300 – координаты X и Y источника частиц. * 'blocks' – ключ загруженного атласа текстур. * frame: 'redmonster' – конкретный кадр из атласа, который будет использоваться как частица. * lifespan: 5000 – время жизни каждой частицы в миллисекундах (5 секунд). * angle – диапазон начального угла движения частицы. * speed – начальная скорость. * frequency – интервал между испусканием частиц (в миллисекундах).

Свойство particleBringToTop и его роль

Свойство particleBringToTop объекта emitter определяет порядок отрисовки (рендеринга) частиц относительно других игровых объектов на сцене. Это булево значение.

* Если emitter.particleBringToTop = true, то **все частицы** этого эмиттера будут отрисованы поверх (сверху) большинства других объектов в своем контейнере или на сцене. * Если emitter.particleBringToTop = false, частицы будут отрисовываться в порядке их добавления в систему отображения, что может привести к их нахождению под другими объектами, созданными позже.

По умолчанию значение этого свойства зависит от контекста создания эмиттера. В примере мы можем переключать его по клику мыши.

Интерактивное переключение и визуализация состояния

В примере добавлен текстовый элемент для отображения текущего состояния и обработчик клика для его изменения.

const text = this.add.text(10, 10, 'Click to change. bringToTop: true');

this.input.on('pointerdown', () => {
    if (emitter.particleBringToTop)
    {
        emitter.particleBringToTop = false;
    }
    else
    {
        emitter.particleBringToTop = true;
    }
    text.setText(`Click to change. bringToTop: ${emitter.particleBringToTop}`);
});

Обработчик события pointerdown инвертирует текущее значение свойства particleBringToTop. После изменения свойства текст на экране обновляется, отображая новое значение. Это позволяет в реальном времени увидеть, как меняется визуальный порядок частиц и других объектов (если бы они были добавлены на сцену).

Практическое применение и сценарии использования

Контроль за particleBringToTop критически важен в нескольких сценариях:

1. **Эффекты на переднем плане:** Для частиц дождя, снега, магических вспышек или повреждений, которые должны быть всегда видны игроку, устанавливайте bringToTop = true. 2. **Эффекты на заднем плане:** Для далеких огней, пыли или атмосферных эффектов, которые должны находиться за персонажем или объектами окружения, используйте bringToTop = false. 3. **Динамическое изменение:** Как показано в примере, можно менять свойство во время выполнения. Например, когда заклинание активируется, частицы могут "вспыхивать" на переднем плане (bringToTop = true), а затем, для устойчивого эффекта, уходить на задний (bringToTop = false).

Важно помнить, что это свойство применяется ко **всем частицам эмиттера** одновременно. Для более тонкого контроля разными группами частиц потребуется создавать несколько эмиттеров.

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

Свойство particleBringToTop – это простой, но мощный инструмент для управления визуальной иерархией частиц в Phaser 3. Его понимание позволяет создавать более глубокие и профессиональные визуальные эффекты. **Идеи для экспериментов:** 1. Добавьте на сцену статичный спрайт (например, this.add.image(400, 300, 'blocks', 'bomb')) и понаблюдайте, как частицы появляются под ним или над ним при переключении свойства. 2. Создайте два эмиттера с разными текстурами и значениями particleBringToTop. Посмотрите, как они взаимодействуют друг с другом. 3. Привяжите изменение свойства не к клику, а к какому-либо игровому событию, например, к столкновению или получению урона.