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

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

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

    create ()
    {
        const blitter = this.add.blitter(0, 0, 'atari');

        //  Change the alpha of each Bob as its created

        blitter.create(0, 0).setAlpha(1);

        blitter.create(200, 50).setAlpha(0.8);

        blitter.create(400, 100).setAlpha(0.5);

        blitter.create(600, 150).setAlpha(0.2);
    }
}

const config = {
    type: Phaser.CANVAS,
    parent: 'phaser-example',
    scene: Example
};

const game = new Phaser.Game(config);

Что такое Blitter и Bob?

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

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

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

Код начинается с создания класса сцены, расширяющего Phaser.Scene. В методе preload задается базовый URL для загрузки ресурсов и загружается одно спрайтовое изображение.

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

Метод setBaseURL устанавливает корневой путь, что упрощает указание относительных путей для остальных ресурсов. Ключ 'atari' — это внутренний идентификатор загруженной текстуры, который будет использоваться позже.

Создание Blitter и управление Alpha

В методе create происходит основное действие. Сначала создается объект Blitter в точке (0,0) с использованием текстуры 'atari'.

const blitter = this.add.blitter(0, 0, 'atari');

Затем, с помощью метода blitter.create(x, y), создаются четыре отдельных спрайта Bob в разных позициях. Цепочка вызовов позволяет сразу же после создания настроить свойства каждого Bob. В данном примере для каждого устанавливается разное значение альфа-канала (прозрачности) с помощью метода .setAlpha(value).

blitter.create(0, 0).setAlpha(1); // Полностью непрозрачный
blitter.create(200, 50).setAlpha(0.8); // Почти непрозрачный
blitter.create(400, 100).setAlpha(0.5); // Наполовину прозрачный
blitter.create(600, 150).setAlpha(0.2); // Почти прозрачный

Значение alpha варьируется от 0 (полная прозрачность) до 1 (полная непрозрачность). Установка значения сразу при создании — это эффективный паттерн для начальной инициализации объектов.

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

Вне класса сцены определяется конфигурационный объект config для игры. Он указывает рендерер (CANVAS), родительский HTML-элемент и используемую сцену.

const config = {
    type: Phaser.CANVAS,
    parent: 'phaser-example',
    scene: Example
};

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

const game = new Phaser.Game(config);

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

Этот простой пример раскрывает мощь Blitter для управления множеством однотипных объектов с индивидуальными свойствами прозрачности. Для экспериментов попробуйте анимировать значение alpha каждого Bob во времени в методе update, создавая эффекты мерцания или плавного исчезновения. Также можно комбинировать alpha с другими свойствами, например setTint для окрашивания, или генерировать сотни Bob в случайных позициях с разной прозрачностью для создания сложного фонового параллакса или звездного поля.