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

Работа с множеством спрайтов через Blitter — мощный инструмент оптимизации в Phaser. Однако управление их визуальными свойствами, такими как прозрачность (alpha), имеет свои нюансы. В этом примере мы разберем, как применить глобальную настройку прозрачности ко всем созданным объектам 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');

        blitter.setAlpha(0.5);

        blitter.create(0, 0);

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

        blitter.create(400, 100);

        blitter.create(600, 150);
    }

    update ()
    {

    }
}

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

const game = new Phaser.Game(config);

Создание Blitter и глобальная установка Alpha

Blitter — это объект для эффективного отображения множества спрайтов из одного источника (текстуры). В методе create() сцены мы создаём Blitter и сразу задаём ему глобальный уровень прозрачности.

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

Первая строка создаёт Blitter в точке (0,0), используя загруженное изображение 'atari'. Вторая строка — ключевая: метод setAlpha(0.5) применяется к самому объекту blitter. Это устанавливает значение альфа-канала в 0.5 (50% непрозрачности) для всех спрайтов, которые будут созданы этим Blitter'ом в дальнейшем. Это глобальная настройка для всего контейнера.

Создание спрайтов (Bob'ов) с глобальным Alpha

После установки глобальной прозрачности мы создаём несколько спрайтов (внутри Blitter они называются Bob).

blitter.create(0, 0);
blitter.create(400, 100);
blitter.create(600, 150);

Метод create(x, y) создаёт новый Bob (спрайт) на указанных координатах. Для первых, третьего и четвёртого спрайтов не задаются индивидуальные настройки прозрачности. Поэтому они автоматически наследуют глобальное значение alpha, установленное для их родительского Blitter — то есть 0.5. Все эти спрайты будут отображаться полупрозрачными.

Индивидуальное переопределение Alpha для спрайта

Phaser позволяет переопределить глобальные настройки для любого отдельного Bob. Это демонстрируется при создании второго спрайта.

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

Метод create() возвращает ссылку на только что созданный объект Bob. Мы сразу вызываем для него метод setAlpha(0.5). Хотя значение совпадает с глобальным, этот вызов устанавливает прозрачность именно для этого конкретного спрайта. Важно понимать: если позже мы изменим глобальный alpha через blitter.setAlpha(), этот конкретный Bob сохранит своё индивидуальное значение 0.5 и не изменится. Индивидуальные настройки имеют приоритет над унаследованными.

Порядок применения настроек и итоговый вид

В итоге все четыре спрайта на сцене будут иметь одинаковую визуальную прозрачность в 50%. Однако достигается это разными путями: - Спрайт 1 (0,0), 3 (400,100) и 4 (600,150) используют глобальное значение от blitter. - Спрайт 2 (200,50) использует своё собственное, явно заданное значение.

Если бы мы изменили глобальный alpha, например, blitter.setAlpha(0.8), то первый, третий и четвёртый спрайты стали бы менее прозрачными (alpha=0.8), а второй остался бы с alpha=0.5.

// Если добавить эту строку позже в update() или по событию:
blitter.setAlpha(0.8);

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

Пример наглядно показывает двухуровневую систему управления прозрачностью в Blitter: глобальную для всей группы и индивидуальную для каждого спрайта. Для экспериментов попробуйте

  1. динамически менять глобальный blitter.setAlpha() в update() для эффекта пульсации группы
  2. назначать случайные индивидуальные значения alpha каждому создаваемому Bob'у для эффекта мерцающей толпы
  3. комбинировать с другими свойствами, например, setTint