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

При создании игр важно не только управлять логикой, но и контролировать визуальное представление. Режимы наложения (Blend Modes) в Phaser 3 — это мощный инструмент для работы с графикой, который позволяет объектам взаимодействовать на уровне пикселей, создавая сложные цветовые эффекты без использования дополнительных текстур. В этой статье мы разберем, как использовать `setBlendMode()` для реализации популярного режима MULTIPLY, который затемняет области пересечения объектов, что идеально подходит для создания теней, цветных фильтров или стилизованного освещения.

Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.

Живой запуск

Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.

Исходный код


class Example extends Phaser.Scene
{
    create ()
    {
        this.add.circle(300, 250, 128, 0xff00ff).setBlendMode(Phaser.BlendModes.MULTIPLY);
        this.add.circle(500, 250, 128, 0x00ffff).setBlendMode(Phaser.BlendModes.MULTIPLY);
        this.add.circle(400, 400, 128, 0xffff00).setBlendMode(Phaser.BlendModes.MULTIPLY);
    }
}

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

const game = new Phaser.Game(config);

Что такое Blend Modes?

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

Это не просто визуальный трюк — это математическая операция над цветами, выполняемая графическим процессором. Использование правильного режима позволяет достичь эффектов, которые иначе потребовали бы ручного расчета в шейдерах или подготовки множества отдельных ассетов.

Разбор примера: MULTIPLY в действии

Рассмотрим предоставленный исходный код. В нем создается сцена с тремя кругами, наложенными друг на друга. Ключевой метод здесь — setBlendMode().

this.add.circle(300, 250, 128, 0xff00ff).setBlendMode(Phaser.BlendModes.MULTIPLY);

Первая строка создает круг с помощью фабрики this.add.circle. Аргументы: X=300, Y=250, радиус=128, цвет заполнения=0xff00ff (пурпурный). Сразу после создания к объекту применяется метод setBlendMode() с константой Phaser.BlendModes.MULTIPLY.

Аналогично создаются еще два круга: голубой (0x00ffff) и желтый (0xffff00). Все они используют один и тот же режим наложения. Исходный цвет фона сцены задан в конфигурации как #efefef (светло-серый).

Как работает режим MULTIPLY?

Режим MULTIPLY (Умножение) — один из самых полезных и часто используемых. Его формула проста: итоговый цвет = (Цвет источника) * (Цвет цели) / 255. Поскольку значения цветовых каналов (R, G, B) находятся в диапазоне от 0 до 255, результат умножения всегда темнее или равен исходным цветам.

В нашем примере: 1. Первый пурпурный круг рисуется на сером фоне. Цвет круга умножается на цвет фона, поэтому круг выглядит как более темный оттенок пурпурного. 2. Когда второй, голубой круг, перекрывает область первого, их цвета перемножаются в зоне пересечения. Пурпурный (красный+синий) * Голубой (зеленый+синий) даст в результате темно-синий цвет. 3. В точке пересечения всех трех кругов происходит многократное умножение цветов, что приводит к появлению глубокого темно-коричневого или черного оттенка.

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

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

Где это может пригодиться в реальной игре?

* **Динамические тени и затемнения:** Наложение темного круга или полигона с режимом MULTIPLY в область под персонажем или объектом создаст мягкую, реалистичную тень, которая естественно взаимодействует с цветами фона. * **Цветовые фильтры:** Чтобы создать эффект подводного мира, можно наложить на всю сцену полупрозрачный синий прямоугольник с MULTIPLY. Для эффекта теплого заката — оранжевый прямоугольник. * **Освещение:** Комбинируя объекты с разными режимами (например, ADD для света и MULTIPLY для тени), можно создавать простые, но эффективные системы освещения. * **Создание сложных цветов из простых ассетов:** Храните базовые спрайты в нейтральных тонах, а нужный цветовой оттенок придавайте им во время выполнения игры, накладывая цветную графику с подходящим BlendMode.

// Пример: создание цветного светофильтра на всю камеру
let filterShape = this.add.rectangle(400, 300, 800, 600, 0x2233aa);
filterShape.setAlpha(0.3); // Делаем форму полупрозрачной
filterShape.setBlendMode(Phaser.BlendModes.MULTIPLY);
filterShape.setScrollFactor(0); // Фиксируем относительно камеры

Другие полезные режимы наложения

Phaser.BlendModes содержит не только MULTIPLY. Вот еще несколько полезных констант:

* ADD (Добавление): Цвета складываются, создавая эффект свечения или яркого света. Идеален для огня, лазеров, магических эффектов. * SCREEN (Экран): Противоположен MULTIPLY. Осветляет базовый цвет, полезен для эффектов бликов, молний или ослепления. * OVERLAY (Наложение): Комбинирует MULTIPLY и SCREEN в зависимости от базового цвета, увеличивая контраст. Может использоваться для цветокоррекции.

Применить их можно абсолютно аналогично:

// Создание светящегося эффекта
this.add.particles(100, 100, 'spark', { /* конфиг */ }).setBlendMode(Phaser.BlendModes.ADD);

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

Blend Modes в Phaser 3 открывают дверь в мир продвинутой и производительной 2D-графики прямо из коробки. Начиная с простого затемнения областями пересечения с MULTIPLY, вы можете создавать сложные визуальные композиции, динамическое освещение и атмосферные эффекты, которые значительно повышают качество вашей игры. **Идеи для экспериментов:** 1. Создайте сцену с несколькими разноцветными огнями (круги с ADD), которые движутся и накладываются друг на друга. 2. Реализуйте простую систему дня и ночи, плавно меняя прозрачность и режим наложения (MULTIPLY или OVERLAY) темного прямоугольника, наложенного поверх игрового мира. 3. Скомбинируйте частицы с режимом ADD для эффекта взрыва и статичную графику с MULTIPLY для затемненного дыма.