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

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

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

Версия 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.sprite(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 для этого используется метод preload() сцены. В нем мы указываем базовый URL для загрузки и конкретный ключ и путь к изображению.

Затем, в методе create(), который вызывается один раз после успешной загрузки всех ресурсов, мы создаем экземпляр спрайта, размещая его на сцене.

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.sprite(400, 300, 'bunny');
}

Свойство .alpha: от 0 до 1

Каждый игровой объект в Phaser, включая спрайты, наследует свойство alpha. Это значение определяет его прозрачность и представляет собой число в диапазоне от 0 до 1. - **0** — объект полностью невидим (полностью прозрачный). - **1** — объект полностью непрозрачный (значение по умолчанию). - **0.5** — объект полупрозрачный, как в нашем примере.

Установка значения — это одна строка кода. Phaser сам обработает смешивание пикселей спрайта с фоном.

bunny.alpha = 0.5;

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

Чтобы пример заработал, необходимо создать и сконфигурировать экземпляр игры Phaser.Game. Конфигурационный объект config определяет основные параметры: тип рендерера (например, Phaser.WEBGL), элемент на странице, куда будет встраиваться игра (parent), ее размеры и, что самое важное, класс сцены, который будет использоваться по умолчанию (scene).

После создания экземпляра game Phaser автоматически запускает жизненный цикл, начиная с preload.

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

const game = new Phaser.Game(config);

Практическое применение: больше чем статика

Установка статического значения alpha — лишь первый шаг. Настоящая мощь свойства раскрывается при его изменении во времени, внутри метода update() или в ответ на события.

Например, можно реализовать плавное мигание спрайта при получении урона или его постепенное появление на экране.

create ()
{
    const bunny = this.add.sprite(400, 300, 'bunny');
    this.bunny = bunny; // Сохраняем ссылку в контексте сцены
    bunny.alpha = 0; // Начинаем с невидимого состояния
}

update (time, delta)
{
    // Плавно увеличиваем прозрачность до полной
    this.bunny.alpha = Phaser.Math.Clamp(this.bunny.alpha + 0.01, 0, 1);
}

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

Свойство .alpha — это фундаментальный кирпичик для создания визуальной обратной связи в игре. Начните экспериментировать: попробуйте изменять прозрачность в зависимости от здоровья игрока, создайте анимацию «призрачного удара», сделайте полупрозрачными элементы интерфейса, которые не должны полностью перекрывать игровой мир. Комбинируя изменение alpha с другими свойствами, такими как scale или tint, вы сможете создавать сложные и выразительные эффекты буквально несколькими строчками кода.