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

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

Использование масок в Phaser позволяет ограничивать область видимости графики, создавая эффекты обрезки, порталов, бликов или сложных переходов. В этом примере мы разберем, как создать битмап-маску из спрайта и применить её к другому изображению. Это базовый, но мощный приём для визуального дизайна игр, не требующий дополнительных текстур или шейдеров. Понимание работы с масками особенно полезно при создании UI-элементов с нестандартной формой, анимации раскрытия областей или визуальных эффектов, связанных с камерой и светом. Мы рассмотрим ключевой метод `createBitmapMask()` и его интеграцию в сцену.

Версия 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('mask', 'assets/tests/masks/chrome-mask.png');
        this.load.image('pic', 'assets/pics/brilliance-jim-sachs.png');
    }

    create ()
    {
        const rt = this.make.sprite({
            x: 400,
            y: 300,
            key: 'mask',
            add: false
        });

        const mask = rt.createBitmapMask();

        const pic = this.add.image(400, 300, 'pic');

        pic.setMask(mask);

        console.log(mask);

        window['renderer'] = this.renderer;
    }
}

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: '100%',
    height: '100%',
    scale: {
        mode: Phaser.Scale.RESIZE,
        autoCenter: Phaser.Scale.CENTER_BOTH
    },
    scene: Example
};

const game = new Phaser.Game(config);

Настройка сцены и загрузка ресурсов

В методе preload() мы загружаем две текстуры: изображение-маску и основную картинку, которая будет маскироваться. Обратите внимание на использование setBaseURL() — это удобный способ указать базовый путь для всех последующих загрузок, что упрощает работу с ресурсами, хранящимися на удаленном сервере.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('mask', 'assets/tests/masks/chrome-mask.png');
    this.load.image('pic', 'assets/pics/brilliance-jim-sachs.png');
}

Создание спрайта для маски

Маска в Phaser может быть создана из любого графического объекта, например, спрайта. В данном примере мы создаем спрайт с ключом 'mask', но не добавляем его сразу на сцену (параметр add: false). Это важно, потому что сам спрайт-маска не должен отображаться как самостоятельный объект — он служит лишь источником данных для маскирования.

const rt = this.make.sprite({
    x: 400,
    y: 300,
    key: 'mask',
    add: false
});

Генерация битмап-маски и её применение

Из созданного спрайта rt мы генерируем маску с помощью метода createBitmapMask(). Эта маска использует альфа-канал (прозрачность) спрайта для определения областей видимости. Далее мы создаем основное изображение pic и применяем к нему маску через метод setMask(). В результате изображение pic будет видно только там, где маска имеет непрозрачные пиксели.

const mask = rt.createBitmapMask();
const pic = this.add.image(400, 300, 'pic');
pic.setMask(mask);

Конфигурация игры и масштабирование

Конфигурация игры использует режим масштабирования Phaser.Scale.RESIZE, который подстраивает размер игрового холста под размер окна браузера. Это особенно полезно для адаптивных веб-интерфейсов или игр, которые должны заполнять доступное пространство. Параметр autoCenter обеспечивает центрирование игровой области.

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: '100%',
    height: '100%',
    scale: {
        mode: Phaser.Scale.RESIZE,
        autoCenter: Phaser.Scale.CENTER_BOTH
    },
    scene: Example
};

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

Создание битмап-маски из спрайта — это простой, но эффективный способ управления визуальным контентом в Phaser. Вы можете экспериментировать, анимируя положение или размер спрайта-маски для создания эффектов плавного появления, использовать текстуры с градиентной прозрачностью для мягких переходов или комбинировать несколько масок на одном объекте. Попробуйте применить маску к группе спрайтов или частицам для создания сложных визуальных композиций.