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

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

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

Версия 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 ()
    {
        const face = this.add.image(400, 300, 'face');
        const sea = this.add.image(400, 300, 'turkey');

        //  top left, top right, bottom left, bottom right
        sea.setAlpha(1, 1, 0, 0);
    }
}

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

const game = new Phaser.Game(config);

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

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

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, мы размещаем два изображения друг на друге по центру сцены. Изображение face будет служить фоном, а поверх него разместится изображение turkey, с прозрачностью которого мы будем экспериментировать.

create ()
{
    const face = this.add.image(400, 300, 'face');
    const sea = this.add.image(400, 300, 'turkey');
    // ... Далее работа с прозрачностью
}

Волшебство метода `setAlpha`

Ключевой элемент примера — вызов метода setAlpha для спрайта sea. Этот метод может принимать не одно общее значение прозрачности, а четыре отдельных — для каждого угла изображения.

//  top left, top right, bottom left, bottom right
sea.setAlpha(1, 1, 0, 0);

Порядок аргументов строго задан: верхний левый угол, верхний правый, нижний левый, нижний правый. Значение `1означает полную непрозрачность,0— полную прозрачность. В данном коде верхняя половина изображения (1, 1) остается полностью видимой, а нижняя (0, 0`) — полностью невидимой. Это создает резкую горизонтальную границу между видимой и невидимой частями.

Как это работает внутри? Градиентная маска в реальном времени

Когда вы вызываете setAlpha с четырьмя аргументами, Phaser использует аппаратное ускорение (WebGL) для наложения на спрайт градиентной маски. Фактически, для каждого пикселя изображения движок интерполирует значения прозрачности четырех углов, создавая плавный переход. В нашем примере с параметрами (1, 1, 0, 0) интерполяция происходит по вертикали: от полностью непрозрачного верха к полностью прозрачному низу. Это намного эффективнее, чем создавать отдельную градиентную текстуру и применять её вручную.

Важно помнить, что этот метод работает только в режиме рендеринга WebGL (как указано в type: Phaser.WEBGL конфигурации игры). В canvas-режиме такой вызов будет проигнорирован или даст неверный результат.

Практическое применение и вариации

Давайте рассмотрим несколько полезных паттернов использования этой функции.

**Плавное появление/исчезание по вертикали или горизонтали:** Эффект "шторки" или затухания экрана.

// Появление сверху вниз (значения альфа меняются со временем в цикле)
sea.setAlpha(0, 0, currentAlpha, currentAlpha);
// Исчезание слева направо
sea.setAlpha(currentAlpha, 0, currentAlpha, 0);

**Радиальная (диагональная) маска:** Можно создать эффект, когда виден только один угол изображения.

// Виден только верхний левый угол, остальное плавно прозрачно
sea.setAlpha(1, 0, 0, 0);

**Создание сложных форм:** Комбинируя значения, можно имитировать простые геометрические формы видимой области (треугольник, трапеция).

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

Метод setAlpha с четырьмя параметрами — это мощный и производительный инструмент для управления прозрачностью спрайтов в Phaser. Он позволяет создавать динамические эффекты растворения, сложные маски и плавные переходы прямо в коде, без подготовки специальных ресурсов. Для экспериментов попробуйте анимировать значения альфа с помощью tweens или update-цикла, создавая волну, круговое раскрытие или взаимодействуя с положением курсора мыши, чтобы реализовать эффект "фонарика" в темноте.