О чем этот пример
Визуальные эффекты — ключ к атмосферности игры. Phaser предлагает мощный инструмент — режимы смешивания (Blend Modes), которые позволяют накладывать изображения друг на друга с различными алгоритмами, создавая свечение, затемнение, инверсию и другие композиционные эффекты. Эта статья на практическом примере покажет, как использовать `setBlendMode()` для частиц и спрайтов, чтобы добавить глубины и динамики вашей сцене без сложных шейдеров. Вы научитесь управлять визуальным слоем и понимать разницу между режимами для Canvas и WebGL рендерера.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
let sprites = [];
// Overlay is Canvas Blend Modes
class Example extends Phaser.Scene
{
constructor ()
{
super();
}
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 (var i = 0; i < 300; i++)
{
var x = Phaser.Math.Between(-64, 800);
var y = Phaser.Math.Between(-64, 600);
var 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.OVERLAY);
image.setBlendMode(Phaser.BlendModes.ADD);
sprites.push({ s: image, r: 2 + Math.random() * 6 });
}
this.add.image(400, 300, 'logo').setBlendMode(Phaser.BlendModes.DIFFERENCE);
}
update ()
{
for (var i = 0; i < sprites.length; i++)
{
var sprite = sprites[i].s;
sprite.y -= sprites[i].r;
if (sprite.y < -256)
{
sprite.y = 700;
}
}
}
}
const config = {
type: Phaser.CANVAS,
width: 800,
height: 600,
parent: 'phaser-example',
scene: Example
};
const game = new Phaser.Game(config);
Что такое Blend Modes и зачем они нужны
Режимы смешивания (Blend Modes) определяют, как пиксели одного графического элемента (источника) комбинируются с пикселями под ним (фоновыми). Это не просто прозрачность, а математическая операция над цветами (RGB) и, иногда, альфа-каналом.
В игровой разработке это незаменимо для:
* Создания эффекта свечения частиц (ADD).
* Реализации затемнения или осветления областей (OVERLAY, LIGHTEN).
* Добавления контраста и стилистических искажений (DIFFERENCE).
* Наложения текстур или цветовых фильтров (MULTIPLY, SCREEN).
Phaser предоставляет набор констант в объекте Phaser.BlendModes. Важное ограничение: часть режимов (например, OVERLAY, DIFFERENCE) работает только при использовании рендерера Phaser.CANVAS, в то время как основные (ADD, MULTIPLY, SCREEN, NORMAL) поддерживаются и в Canvas, и в WebGL.
Разбор примера: структура и настройка
В предоставленном коде создаётся сцена с фоном, множеством частиц и логотипом. Ключевой момент — конфигурация рендерера. От неё зависит, какие режимы смешивания будут работать.
const config = {
type: Phaser.CANVAS,
width: 800,
height: 600,
parent: 'phaser-example',
scene: Example
};Указание type: Phaser.CANVAS позволяет использовать все режимы смешивания, включая эксклюзивные для Canvas, такие как DIFFERENCE и OVERLAY. Если бы использовался Phaser.WEBGL, эти специфичные режимы не сработали бы.
Создание и настройка частиц с blend mode
В методе create() создаются 300 частиц-изображений в случайных позициях. Для каждой частицы вручную задаётся режим наложения.
for (var i = 0; i < 300; i++) {
var x = Phaser.Math.Between(-64, 800);
var y = Phaser.Math.Between(-64, 600);
var image = this.add.image(x, y, 'particle');
image.setBlendMode(Phaser.BlendModes.ADD);
sprites.push({ s: image, r: 2 + Math.random() * 6 });
}Метод setBlendMode() вызывается у экземпляра Image. В данном примере для частиц выбран режим Phaser.BlendModes.ADD. Этот режим складывает цвета источника и фона, создавая эффект яркого свечения, идеальный для звёзд, огня или магических частиц. Частицы также сохраняются в массив sprites вместе со своей случайной скоростью (`r`) для последующей анимации.
Применение DIFFERENCE к основному спрайту
Отдельный режим применяется к логотипу, чтобы продемонстрировать другой визуальный эффект.
this.add.image(400, 300, 'logo').setBlendMode(Phaser.BlendModes.DIFFERENCE);Режим Phaser.BlendModes.DIFFERENCE инвертирует цвета в области наложения, вычитая один цвет из другого. На тёмном фоне это может дать эффект «негатива», а на цветном — создаёт психоделические, контрастные области. Это наглядно показывает, как один режим может кардинально изменить восприятие объекта. Помните, что DIFFERENCE работает только при type: Phaser.CANVAS в конфиге.
Анимация частиц в update()
Динамика — важная часть эффекта. В методе update() обеспечивается движение частиц.
update () {
for (var i = 0; i < sprites.length; i++) {
var sprite = sprites[i].s;
sprite.y -= sprites[i].r;
if (sprite.y < -256) {
sprite.y = 700;
}
}
}Этот код в каждом кадре перемещает каждую частицу вверх со своей сохранённой скоростью (sprites[i].r). Когда частица уходит за верхнюю границу экрана (sprite.y < -256), она телепортируется вниз (sprite.y = 700), создавая бесконечный поток. Движение в сочетании с режимом ADD усиливает иллюзию летящих звёзд или пепла.
Что попробовать дальше
Режимы смешивания — это простой, но чрезвычайно мощный инструмент для визуального оформления игры в Phaser. Они позволяют достичь сложных эффектов на уровне композиции, не прибегая к редактированию текстур или написанию шейдеров. Для экспериментов попробуйте:
1. Сменить Phaser.BlendModes.ADD на Phaser.BlendModes.OVERLAY у частиц (убедитесь, что используете Phaser.CANVAS).
2. Применить MULTIPLY или SCREEN к интерфейсным элементам для их интеграции в фон.
3. Создать несколько слоёв спрайтов с разными blend modes и анимировать их прозрачность.
4. Проверить, как одни и те же режимы выглядят при рендеринге в WebGL (заменив type в конфиге).