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

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

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

Версия 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('pic', 'assets/pics/cougar-dragonsun.png');
    }

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

        const maskRect = this.add.rectangle(400, 300, 480, 256, 0x000000).setVisible(false);

        pic.enableFilters().filters.external.addMask(maskRect);

        this.tweens.add({
            targets: maskRect,
            angle: 360,
            duration: 5000,
            repeat: -1
        });
    }
}

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

const game = new Phaser.Game(config);

Подготовка сцены и загрузка ресурсов

Как и в любом проекте на Phaser, работа начинается с создания сцены и загрузки необходимых ресурсов. В методе preload мы устанавливаем базовый URL для загрузки и загружаем одно изображение.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('pic', 'assets/pics/cougar-dragonsun.png');
}

Создание изображения и невидимой маски

В методе create мы размещаем загруженное изображение в центре экрана. Затем создаем прямоугольник (maskRect) с помощью this.add.rectangle. Этот прямоугольник будет служить нашей геометрической маской. Ключевой момент — вызов метода .setVisible(false). Это делает сам прямоугольник невидимым для игрока, но его геометрическая форма остается активной и может использоваться для маскирования.

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

const maskRect = this.add.rectangle(400, 300, 480, 256, 0x000000).setVisible(false);

Применение фильтра и маски к изображению

Чтобы изображение могло использовать маску, его нужно подготовить. Метод pic.enableFilters() активирует систему фильтров для этого объекта. После этого мы получаем доступ к его фильтрам через свойство filters. Для добавления именно геометрической маски используется цепочка вызовов filters.external.addMask(maskRect). Это связывает невидимый прямоугольник maskRect с изображением pic, определяя область его видимости.

pic.enableFilters().filters.external.addMask(maskRect);

Анимация маски с помощью Tween

Статичная маска — это скучно. Phaser позволяет легко анимировать любые свойства игровых объектов. Мы создаем твин, который вращает наш прямоугольник-маску. Твин нацелен (targets) на объект maskRect, изменяет его свойство angle на 360 градусов за 5 секунд и повторяется бесконечно (repeat: -1). Поскольку маска привязана к прямоугольнику, вращение маски приводит к динамическому изменению видимой части изображения.

this.tweens.add({
    targets: maskRect,
    angle: 360,
    duration: 5000,
    repeat: -1
});

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

Геометрические маски — гибкий инструмент для создания динамических визуальных эффектов. В этом примере мы использовали прямоугольник, но в качестве маски можно использовать любую графическую примитивную форму Phaser, например, круг (this.add.circle) или эллипс. Поэкспериментируйте: попробуйте анимировать не angle, а scaleX и scaleY для эффекта пульсации, или используйте несколько масок одновременно для создания сложных составных эффектов.