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

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

Когда частицы накладываются друг на друга, порядок их отрисовки определяет итоговый визуальный эффект. По умолчанию Phaser отрисовывает частицы в порядке их создания, что не всегда подходит для сложных систем. Управляя свойством `sortProperty`, вы можете изменить этот порядок на основе координат частицы, создавая более предсказуемые и визуально приятные композиции. В этой статье мы разберем пример, где частицы сортируются по оси X, и посмотрим, как инвертировать порядок сортировки в реальном времени. Этот прием полезен для создания эффектов глубины, дыма, волн или любых систем, где важен визуальный приоритет объектов.

Версия 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: -20, max: 20 },
            speed: 150,
            frequency: 200
        });

        emitter.sortProperty = 'x';
        emitter.sortOrderAsc = true;

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

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

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

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

        });
    }
}

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

const game = new Phaser.Game(config);

Настройка эмиттера частиц

В методе create создается эмиттер частиц с базовой конфигурацией. Частицы используют спрайт из атласа blocks с конкретным кадром redmonster. Важные параметры: lifespan (время жизни), angle (разброс направления), speed и frequency (частота появления).

Эмиттер размещается в точке (100, 300), и частицы будут лететь вверх с небольшим случайным отклонением.

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

Сортировка частиц по свойству

Ключевой момент — это настройка сортировки. Свойство emitter.sortProperty определяет, по какому параметру частицы будут упорядочиваться перед отрисовкой. В примере установлено значение 'x', что означает сортировку по горизонтальной координате.

Свойство emitter.sortOrderAsc задает направление сортировки. Значение true — по возрастанию (от меньшего X к большему), false — по убыванию. Это влияет на то, какие частицы будут отрисованы поверх других.

emitter.sortProperty = 'x';
emitter.sortOrderAsc = true;

Динамическое переключение порядка

В примере добавлена интерактивность: по клику мыши порядок сортировки инвертируется. Обработчик события pointerdown проверяет текущее значение sortOrderAsc и меняет его на противоположное.

Текстовый объект text обновляется, чтобы отображать текущее состояние. Это позволяет наглядно увидеть разницу в визуальном слое частиц.

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

Визуальный результат и практическое применение

При sortOrderAsc: true частицы с меньшей координатой X (левее) рисуются первыми, а с большей X (правее) — поверх них. При false — наоборот. Это создает эффект «слоев».

Сортировка работает в реальном времени для всех живых частиц. Это полезно для: * **Эффектов глубины:** Частицы «ближе» к камере (условно справа) могут перекрывать «дальние». * **Упорядоченных систем:** Например, дым, который должен подниматься упорядоченными столбами. * **Оптимизации восприятия:** Контроль за тем, какие элементы визуально выделяются.

Важно: сортировка влияет только на отрисовку, но не на физику или взаимодействие частиц.

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

Управление sortProperty и sortOrderAsc у эмиттера частиц — это простой, но мощный инструмент для контроля визуальной иерархии в ваших эффектах. Вы можете экспериментировать, сортируя частицы по другим свойствам, например `y(для вертикальных слоев) илиalpha(для прозрачности). Попробуйте комбинировать это с изменениемdepth` у самих частиц или создать несколько эмиттеров с разной сортировкой для сложных композиций.