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

Маскирование — мощный инструмент для создания визуальных эффектов в играх. В этом примере мы покажем, как использовать общую битмаску (`SharedBitmapMask`) для эффективного применения одного и того же маскирующего изображения к десяткам спрайтов. Этот подход экономит ресурсы и позволяет создавать интересные композиции, например, эффект «проступания» сквозь текстуру.

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('bg', 'assets/skies/deepblue.png');
        this.load.image('splat', 'assets/pics/splat1.png');
        this.load.image('atari', 'assets/sprites/atari130xe.png');
    }

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

        for (let i = 0; i < 64; i++)
        {
            const x = Phaser.Math.Between(0, 800);
            const y = Phaser.Math.Between(0, 600);

            this.add.image(x, y, 'atari').enableFilters().filters.external.addMask('splat');
        }
    }
}

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

const game = new Phaser.Game(config);

Суть примера: Общая маска для множества объектов

В стандартном подходе для маскирования каждого спрайта нужно создавать отдельный объект маски. В примере используется оптимизированная техника: одно изображение-маска (splat) применяется сразу к 64 спрайтам atari. Это становится возможным благодаря использованию фильтров и метода filters.external.addMask.

Такой способ называется **Shared Bitmap Mask** (общая битмаска). Он особенно полезен, когда множество объектов должны быть обрезаны по одинаковому шаблону, что часто встречается в партиклах, UI-элементах или декоративных слоях игры.

Разбор кода: Загрузка и настройка сцены

Сначала в методе preload загружаются необходимые ресурсы: фон, изображение для маски (splat) и спрайт, который будет маскироваться (atari).

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('bg', 'assets/skies/deepblue.png');
    this.load.image('splat', 'assets/pics/splat1.png');
    this.load.image('atari', 'assets/sprites/atari130xe.png');
}

Обратите внимание, что используется WEBGL-рендерер в конфигурации, так как фильтры и внешние маски требуют поддержки WebGL.

Создание эффекта: Цикл и применение маски

В методе create сначала добавляется фоновое изображение. Затем в цикле создаётся 64 спрайта atari в случайных позициях.

for (let i = 0; i < 64; i++)
{
    const x = Phaser.Math.Between(0, 800);
    const y = Phaser.Math.Between(0, 600);

    this.add.image(x, y, 'atari').enableFilters().filters.external.addMask('splat');
}

Ключевая цепочка методов для каждого спрайта: 1. .enableFilters() — активирует систему фильтров для этого игрового объекта. 2. .filters.external.addMask('splat') — добавляет к фильтрам объекта внешнюю маску, используя загруженное изображение splat как шаблон. Маска является **общей**, то есть не создаёт новый экземпляр для каждого спрайта.

Как работает общая маска?

При вызове addMask('splat') Phaser создаёт объект типа SharedBitmapMask, который использует текстуру изображения splat. Эта текстура загружается в видеопамять (VRAM) один раз, а затем шейдеры используют её для маскирования всех 64 спрайтов.

**Принцип маскирования:** Белые области изображения-маски (splat) делают соответствующие области спрайта видимыми. Чёрные или прозрачные области — скрывают их. В результате спрайт atari виден только в пределах белой "кляксы" на маске.

Использование общего ресурса вместо 64 отдельных масок значительно снижает нагрузку на память и GPU.

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

Техника общей битмаски — отличный способ добавить визуальную сложность, не жертвуя производительностью. Она идеально подходит для создания эффектов стаи частиц со сложной формой, окон с узорчатыми краями или нестандартных областей взаимодействия. **Идеи для экспериментов:** 1. Анимируйте параметры маски (позицию, масштаб, угол) для каждого спрайта отдельно через filters.external.mask. 2. Используйте в качестве маски не статичное изображение, а спрайт-лист (spritesheet) для создания анимированного эффекта «проявления». 3. Комбинируйте общую маску с другими фильтрами, например, размытием (BlurFX) или свечением (GlowFX), на тех же объектах.