Как управлять прозрачностью спрайтов в Phaser 3: свойство `alpha`

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

Управление прозрачностью объектов — одна из базовых, но мощных техник в игровой разработке. Она позволяет создавать эффекты появления, исчезновения, призрачных персонажей, полупрозрачные интерфейсы или элементы окружения. В Phaser 3 это делается очень просто, через встроенное свойство `alpha`, доступное любому игровому объекту (Game Object). В этой статье мы разберем, как работать с прозрачностью на примере простого спрайта.

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

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

        bunny.alpha = 0.5;
    }
}

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

const game = new Phaser.Game(config);

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

Любая сцена в Phaser 3 начинается с методов жизненного цикла. В методе preload() мы загружаем необходимые для сцены ресурсы, такие как изображения, звуки или данные. Это обязательный шаг перед созданием объектов.

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

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

Создание игрового объекта и управление `alpha`

После загрузки ресурсов управление переходит к методу create(). Здесь происходит создание и начальная настройка игровых объектов.

Сначала мы создаем объект изображения (Image) с помощью фабрики this.add.image(). Метод принимает координаты X, Y и ключ загруженного изображения. Созданный объект возвращается в переменную bunny.

Затем мы напрямую обращаемся к его свойству alpha и устанавливаем значение 0.5. Это свойство принимает значения от 0 (полностью прозрачный) до 1 (полностью непрозрачный). Установка 0.5 делает спрайт полупрозрачным.

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

    bunny.alpha = 0.5;
}

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

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

Ключевые параметры конфигурации: * type: Задает рендерер. Phaser.WEBGL использует аппаратное ускорение, если оно доступно. * parent: ID HTML-элемента, в который будет встроен canvas игры. * width и height: Размеры области отрисовки в пикселях. * scene: Класс основной сцены, которая будет запущена сразу после инициализации игры.

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

const game = new Phaser.Game(config);

Свойство `alpha` в деталях

Свойство alpha наследуется от базового класса Phaser.GameObjects.GameObject. Это означает, что им обладают не только изображения (Image), но и спрайты (Sprite), текст (Text), графические примитивы (Graphics) и многие другие объекты.

Изменение alpha влияет на прозрачность всего объекта, включая все его пиксели. Это отличается от работы с каналами цвета (RGBA). Значение alpha можно анимировать с помощью твинов (Tweens) для создания плавных эффектов появления или растворения.

Важно помнить, что значение обрезается (clamped) рамками от 0 до 1. Попытка установить значение меньше 0 или больше 1 приведет к корректировке.

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

Работа с прозрачностью через свойство alpha — это фундаментальный и интуитивно понятный способ визуального контроля над объектами в Phaser 3. Для экспериментов попробуйте

Анимировать alpha от 0 до 1 в методе update(), чтобы кролик плавно появлялся
Создать несколько объектов с разной прозрачностью и перемещать их
Изменять прозрачность по клику или другому игровому событию, создавая интерактивные элементы интерфейса