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

Управление визуальными эффектами — ключевой навык в геймдеве. Часто требуется плавно скрывать или проявлять части изображения, создавая переходы или маскируя объекты. Стандартное свойство `alpha` в Phaser применяется ко всему игровому объекту равномерно, но что если нужно изменить прозрачность только в одном углу? Пример демонстрирует работу со свойствами `alphaTopLeft` и его аналогами для других углов, предоставляя точечный контроль над прозрачностью спрайтов и изображений. Это особенно полезно для создания нестандартных эффектов растворения, градиентных масок или динамического скрытия частей интерфейса без использования дополнительных текстур или шейдеров.

Версия 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('turkey', 'assets/pics/turkey-1985086.jpg');
        this.load.image('face', 'assets/pics/bw-face.png');
    }

    create ()
    {
        var face = this.add.image(400, 300, 'face');

        var sea = this.add.image(400, 300, 'turkey');

        sea.alphaTopLeft = 0;
    }

}

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

const game = new Phaser.Game(config);

Загрузка ресурсов

В методе preload() сцена загружает два изображения. Базовый URL устанавливается на репозиторий с примерами Phaser, чтобы можно было использовать стандартные ресурсы. Обратите внимание, что оба изображения имеют одинаковые размеры (800x600), что важно для их корректного совмещения на сцене.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('turkey', 'assets/pics/turkey-1985086.jpg');
    this.load.image('face', 'assets/pics/bw-face.png');
}

Создание и наложение изображений

В методе create() оба изображения добавляются на сцену с одинаковыми координатами (400, 300), то есть они будут расположены точно по центру и совмещены. Изображение с ключом 'face' добавляется первым, поэтому оно окажется внизу (под вторым). Изображение 'turkey' добавляется вторым и перекрывает первое. Это стандартный порядок отрисовки в Phaser: объекты, созданные позже, отображаются поверх ранее созданных.

create ()
{
    var face = this.add.image(400, 300, 'face');
    var sea = this.add.image(400, 300, 'turkey');
}

Управление прозрачностью верхнего левого угла

Ключевая строка примера — установка свойства alphaTopLeft для второго изображения (sea) в значение 0. Это свойство управляет уровнем прозрачности (альфа-каналом) именно в верхнем левом углу игрового объекта. Значение 0 означает полную прозрачность, 1 — полную непрозрачность. В данном случае верхний левый угол изображения 'turkey' становится полностью прозрачным, обнажая часть нижнего изображения 'face'. Это создает эффект постепенного "растворения" одного изображения в другом, начиная с конкретного угла.

sea.alphaTopLeft = 0;
}

Phaser также предоставляет свойства для других углов: alphaTopRight, alphaBottomLeft и alphaBottomRight. Их можно комбинировать для создания сложных эффектов.

Конфигурация игры и запуск

Конфигурационный объект config определяет основные параметры игры: используется WEBGL рендерер для поддержки аппаратного ускорения и более широкого набора эффектов, указывается родительский HTML-элемент, устанавливается разрешение 800x600 пикселей и задается класс сцены Example. Инициализация игры происходит через создание экземпляра Phaser.Game с этой конфигурацией.

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

const game = new Phaser.Game(config);

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

Свойства alphaTopLeft и его аналоги для других углов — это мощный инструмент для тонкого контроля визуального представления объектов в Phaser. Они позволяют реализовывать эффекты, которые сложно или неэффективно делать через глобальный alpha или маски. Для экспериментов попробуйте

  1. Анимировать значения этих свойств с помощью твинов (tweens), чтобы создать плавное "проявление" изображения из угла
  2. Связать прозрачность углов с позицией курсора мыши для интерактивного эффекта
  3. Использовать разные значения для всех четырех углов одновременно, чтобы создать градиентную маску без использования дополнительных текстур