О чем этот пример
Режимы смешивания (Blend Modes) — мощный инструмент для создания визуальных эффектов в играх без дополнительных текстур. Они позволяют управлять тем, как накладывается пиксель одного графического объекта на другой, что открывает возможности для свечения, теней, цветовых фильтров и сложных композиций. В этой статье мы разберем, как применять режимы смешивания к частицам и спрайтам в Phaser, используя пример из официальной документации, и объясним практическое применение каждого режима. Вы научитесь оживлять игровую графику минимальными усилиями.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
class Example extends Phaser.Scene
{
constructor ()
{
super();
this.sprites = [];
}
preload ()
{
this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.image('bg', 'assets/skies/space1.png');
this.load.image('particle', 'assets/particles/yellow.png');
this.load.image('logo', 'assets/sprites/phaser2.png');
}
create ()
{
this.add.image(400, 300, 'bg');
// Create the particles
for (let i = 0; i < 300; i++)
{
const x = Phaser.Math.Between(-64, 800);
const y = Phaser.Math.Between(-64, 600);
const image = this.add.image(x, y, 'particle');
// Canvas and WebGL:
// NORMAL
// ADD
// MULTIPLY
// SCREEN
// Canvas only:
// OVERLAY
// DARKEN
// LIGHTEN
// COLOR_DODGE
// COLOR_BURN
// HARD_LIGHT
// SOFT_LIGHT
// DIFFERENCE
// EXCLUSION
// HUE
// SATURATION
// COLOR
// LUMINOSITY
image.setBlendMode(Phaser.BlendModes.ADD);
this.sprites.push({ s: image, r: 2 + Math.random() * 6 });
}
this.add.image(400, 300, 'logo').setBlendMode(Phaser.BlendModes.SCREEN);
}
update ()
{
for (let i = 0; i < this.sprites.length; i++)
{
const sprite = this.sprites[i].s;
sprite.y -= this.sprites[i].r;
if (sprite.y < -256)
{
sprite.y = 700;
}
}
}
}
const config = {
type: Phaser.WEBGL,
width: 800,
height: 600,
parent: 'phaser-example',
scene: Example
};
const game = new Phaser.Game(config);
Что такое режимы смешивания и зачем они нужны
В компьютерной графике режим смешивания определяет, как цвет пикселя источника (например, частицы) комбинируется с цветом пикселя фона. В Phaser это реализовано через класс Phaser.BlendModes, который поддерживает различные режимы, включая ADD, MULTIPLY, SCREEN и другие. Они особенно полезны для частиц, чтобы создать эффекты свечения, огня, дыма или магических аур, не рисуя каждый кадр вручную. В примере мы видим два ключевых применения: частицы с режимом ADD для имитации звездного свечения и логотип с режимом SCREEN для мягкого наложения.
Основные режимы, такие как ADD, складывают значения цветов, что делает их ярче — идеально для света. SCREEN инвертирует и перемножает цвета, давая эффект осветления без "пересвета". Важно: некоторые режимы (например, OVERLAY) работают только в Canvas-рендерере, а не в WebGL, что учитывается в коде комментариями.
Настройка сцены и загрузка ресурсов
В начале кода определяется класс сцены Example, который наследуется от Phaser.Scene. В конструкторе инициализируется массив this.sprites для хранения частиц и их скоростей.
class Example extends Phaser.Scene
{
constructor ()
{
super();
this.sprites = [];
}В методе preload загружаются три изображения: фон (bg), текстура частицы (particle) и логотип (logo). Базовый URL задается через this.load.setBaseURL, что упрощает доступ к ресурсам из репозитория примеров.
preload ()
{
this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.image('bg', 'assets/skies/space1.png');
this.load.image('particle', 'assets/particles/yellow.png');
this.load.image('logo', 'assets/sprites/phaser2.png');
}Создание частиц с режимом смешивания ADD
В методе create сначала добавляется фон, затем в цикле генерируется 300 частиц. Каждая частица — это изображение (this.add.image) со случайными координатами в пределах и чуть за границами экрана, чтобы обеспечить плавный поток.
for (let i = 0; i < 300; i++)
{
const x = Phaser.Math.Between(-64, 800);
const y = Phaser.Math.Between(-64, 600);
const image = this.add.image(x, y, 'particle');Ключевой шаг — применение режима смешивания ADD через image.setBlendMode. Этот режим складывает цвета частицы и фона, создавая яркое свечение, так как значения RGB добавляются, что может превышать максимум (белый цвет). Частица и ее случайная скорость (от 2 до 8 пикселей за кадр) сохраняются в массив this.sprites.
image.setBlendMode(Phaser.BlendModes.ADD);
this.sprites.push({ s: image, r: 2 + Math.random() * 6 });Добавление логотипа с режимом SCREEN
После создания частиц в центре экрана размещается логотип Phaser. Для него используется режим SCREEN, который инвертирует цвета фона и логотипа, перемножает их, затем снова инвертирует. Это дает эффект осветления, но более мягкий, чем ADD, без "выжигания" светлых участков. Такой подход полезен для наложения интерфейсных элементов или спецэффектов.
this.add.image(400, 300, 'logo').setBlendMode(Phaser.BlendModes.SCREEN);Обратите внимание: в коде приведен список всех доступных режимов смешивания в Phaser, разделенный на универсальные (работают в Canvas и WebGL) и специфичные только для Canvas. Это помогает выбрать подходящий режим под вашу задачу и рендерер.
Анимация частиц в игровом цикле
В методе update, который вызывается каждый кадр, происходит движение частиц. Для каждого элемента массива this.sprites координата `yуменьшается на значение скоростиr`, создавая эффект плавного подъема. Если частица уходит за верхнюю границу экрана (менее -256), она возвращается вниз (y = 700), обеспечивая бесконечный цикл анимации.
for (let i = 0; i < this.sprites.length; i++)
{
const sprite = this.sprites[i].s;
sprite.y -= this.sprites[i].r;
if (sprite.y < -256)
{
sprite.y = 700;
}
}Это простой, но эффективный способ анимировать множество объектов без использования физического движка. Скорость хранится отдельно для каждой частицы, что позволяет создавать разнообразные визуальные потоки.
Что попробовать дальше
Режимы смешивания в Phaser — это быстрый путь к визуально богатой графике. В примере мы увидели, как ADD и SCREEN преображают частицы и спрайты, добавляя глубину и динамику. Для экспериментов попробуйте заменить ADD на MULTIPLY (для затемнения) или OVERLAY (в Canvas) — это изменит атмосферу сцены. Также поэкспериментируйте с цветами текстур или добавьте несколько слоев с разными режимами для сложных эффектов, например, симуляции огня или магического щита.