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

Управление видимостью объектов — один из базовых и мощных инструментов в арсенале геймдева. Этот пример показывает, как легко задать прозрачность спрайту или изображению в 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('face', 'assets/pics/bw-face.png');
    }

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

        image.setAlpha(0.2);
    }
}

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

const game = new Phaser.Game(config);

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

В Phaser 3 основная логика содержится внутри класса, унаследованного от Phaser.Scene. Методы жизненного цикла сцены, такие как preload и create, вызываются автоматически.

В методе preload мы указываем базовый URL для загрузки и загружаем одно изображение. Ключ 'face' — это внутренний идентификатор, по которому мы будем обращаться к загруженной текстуре.

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

Создание и позиционирование изображения

Метод create выполняется после успешной загрузки всех ресурсов, объявленных в preload. Здесь мы создаем игровой объект — изображение.

Метод this.add.image(x, y, key) создает новый экземпляр Image и добавляет его на дисплейный список сцены. Параметры 400 и 300 — это координаты центра изображения в пикселях. Ключ 'face' соответствует текстуре, загруженной ранее.

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

Управление прозрачностью через метод `setAlpha`

Самый важный шаг — изменение свойства alpha (прозрачности) созданного объекта. Значение alpha может быть от `0(полностью прозрачный) до1` (полностью непрозрачный).

Метод image.setAlpha(0.2) устанавливает прозрачность объекта image на 20%. Это означает, что объект будет едва виден на фоне. Изменение этого свойства происходит мгновенно и не требует дополнительной обработки.

image.setAlpha(0.2);

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

Для запуска игры необходимо создать конфигурационный объект и передать его конструктору Phaser.Game. Конфигурация определяет базовые параметры отрисовки и привязку к сцене.

- type: Phaser.WEBGL указывает на использование WebGL-рендерера (можно использовать Phaser.CANVAS). - parent: ID HTML-элемента, в который будет встроен canvas. - width и height: размеры области отрисовки. - backgroundColor: цвет фона в HEX-формате. - scene: класс нашей сцены, которая будет запущена сразу.

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

const game = new Phaser.Game(config);

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

Метод setAlpha — это простой и эффективный способ контролировать видимость любого объекта, унаследованного от Phaser.GameObjects.Image. Вы можете анимировать это значение для плавного появления или мигания. Для экспериментов попробуйте: изменить значение альфа на `0или1, изменять прозрачность в ответ на клик мыши или использоватьsetAlpha` для нескольких объектов, создавая слоистые визуальные эффекты. Это основа для более сложных механик, связанных с состоянием объектов.