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

Управление прозрачностью, или альфа-каналом, игровых объектов — это фундаментальный навык для создания визуальных эффектов, плавных переходов и атмосферы в играх. В этом примере мы рассмотрим, как просто и эффективно задавать разный уровень прозрачности для изображений с помощью свойства `.alpha`. Понимание этого механизма позволит вам реализовать затемнение сцены, появление и исчезновение элементов интерфейса, создание 'призрачных' эффектов и многое другое.

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

    create ()
    {
        const image1 = this.add.image(300, 300, 'pixel').setAlpha(1);
        const image2 = this.add.image(400, 300, 'pixel').setAlpha(0.75);
        const image3 = this.add.image(500, 300, 'pixel').setAlpha(0.5);

        console.log(image1.alpha);
        console.log(image2.alpha);
        console.log(image3.alpha);
    }
}

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

const game = new Phaser.Game(config);

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

Как и в большинстве примеров Phaser, работа начинается с методов жизненного цикла сцены. В методе preload() мы загружаем необходимый графический ресурс. Ключевой момент здесь — использование this.load.setBaseURL(), который позволяет задать базовый путь для всех последующих загрузок, что делает код чище и удобнее для управления.

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

После этого в create() происходит основная магия. Именно здесь создаются игровые объекты, с которыми мы будем работать. Конфигурация игры, переданная в конструктор Phaser.Game, подключает нашу сцену Example и задаёт основные параметры отображения, такие как размер холста.

Создание изображений и установка прозрачности

Внутри метода create() мы создаём три одинаковых спрайта с помощью this.add.image(). Каждому из них сразу же, через цепочку вызовов, задаётся свой уровень прозрачности с помощью метода .setAlpha().

const image1 = this.add.image(300, 300, 'pixel').setAlpha(1);
const image2 = this.add.image(400, 300, 'pixel').setAlpha(0.75);
const image3 = this.add.image(500, 300, 'pixel').setAlpha(0.5);

Аргументы метода this.add.image() — это координаты X, Y и ключ загруженного изображения. Метод .setAlpha() принимает значение от 0 (полностью прозрачный) до 1 (полностью непрозрачный). Таким образом, image1 отображается нормально, image2 — на 75%, а image3 — наполовину прозрачно. Это наглядно демонстрирует визуальный эффект от изменения одного параметра.

Доступ к значению alpha и отладка

Phaser хранит установленное значение прозрачности в свойстве объекта .alpha. Это обычное числовое свойство, которое можно не только задавать, но и читать. В примере это используется для вывода значений в консоль браузера.

console.log(image1.alpha); // Выведет: 1
console.log(image2.alpha); // Выведет: 0.75
console.log(image3.alpha); // Выведет: 0.5

Такой приём крайне полезен при отладке. Вы можете в любой момент проверить текущее состояние прозрачности объекта, убедиться, что анимация или логика игры изменяет его корректно. Помните, что свойство .alpha доступно для чтения и записи, поэтому вы можете динамически менять его позже, например, в методе update().

Динамическое изменение и анимация прозрачности

Хотя в примере прозрачность задаётся статически, её истинная мощь раскрывается в динамике. Поскольку свойство .alpha доступно для изменения, вы можете легко создавать эффекты.

// Плавное исчезновение объекта за 2 секунды
this.tweens.add({
    targets: image3,
    alpha: 0,
    duration: 2000
});

// Мигание объекта (циклическое изменение)
this.tweens.add({
    targets: image2,
    alpha: 0.2,
    duration: 500,
    yoyo: true,
    repeat: -1
});

Первый твин плавно меняет прозрачность image3 до нуля. Второй создаёт эффект мигания, используя параметры yoyo (возврат к начальному значению) и repeat: -1 (бесконечное повторение). Это лишь простейшие примеры того, что можно сделать, комбинируя управление alpha с системой твинов Phaser.

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

Как видим, работа с прозрачностью в Phaser 3 интуитивно понятна и требует минимум кода. Свойство .alpha и метод .setAlpha() — ваши основные инструменты. Для экспериментов попробуйте: изменить прозрачность в ответ на клик игрока, создать эффект 'тумана войны', который рассеивается при исследовании карты, или реализовать плавное появление текстовых подсказок. Комбинируйте изменение альфа-канала с цветными оттенками (setTint) для получения более сложных визуальных результатов.