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

Управление прозрачностью — один из ключевых инструментов для создания атмосферы и визуальных эффектов в играх. В Phaser стандартный метод `setAlpha()` позволяет легко сделать объект полупрозрачным. Но что, если нужно скрыть только часть изображения, создав эффект маски или плавного перехода? В этой статье мы разберем продвинутый вариант `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(0, 0, 1, 1);
    }
}

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

const game = new Phaser.Game(config);

Загружаем ресурсы и создаём сцену

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

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 будет лежать сверху.

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

Метод setAlpha() с четырьмя параметрами

Обычный вызов setAlpha(0.5) делает весь спрайт полупрозрачным. Однако, если передать методу четыре числа, можно задать уникальное значение альфа-канала для каждого угла изображения. Порядок параметров следующий: верхний левый угол, верхний правый, нижний левый, нижний правый.

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

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

Визуальный результат и принцип работы

После выполнения этого кода на экране будет видно только нижнюю половину изображения sea (индейки). Верхняя же его часть станет полностью прозрачной, обнажив лежащее под ним изображение face (портрет). Создается эффект, будто изображение индейки «проявляется» снизу вверх.

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

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

Такой подход можно использовать для множества эффектов:

* **Плавное появление/исчезание объектов:** Например, чтобы объект появлялся не целиком, а «вытекал» из-за края экрана. * **Создание нестандартных форм видимости:** Эффект «замочной скважины», круговой обзор или волнообразное исчезновение. * **Наложение атмосферных эффектов:** Туман, который сгущается к низу экрана, или водная рябь.

Поэкспериментируйте с параметрами, чтобы понять, как меняется градиент:

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

// Горизонтальный градиент: слева прозрачно, справа непрозрачно
sprite.setAlpha(0, 1, 0, 1);

// Диагональный градиент из левого верхнего угла
sprite.setAlpha(0, 0.5, 0.5, 1);

// Эффект «виньетки»: прозрачные углы, непрозрачный центр (требует более сложной логики)

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

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