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

Создание визуально насыщенных игр требует не только качественных ассетов, но и умения их комбинировать. Phaser предоставляет мощный инструмент для работы с графикой — класс `Graphics` и его метод `setBlendMode`. Эта статья покажет, как с помощью режимов наложения (blend modes) и нескольких строк кода превратить статичное изображение в динамичную, сложную композицию. Вы научитесь накладывать геометрические фигуры на фон, используя такие популярные режимы, как `SCREEN`, `MULTIPLY` и `DIFFERENCE`, чтобы создавать эффекты свечения, теней или инверсии цвета.

Версия 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('turkey', 'assets/pics/turkey-1985086.jpg');
    }

    create ()
    {
        this.add.image(400, 300, 'turkey');

        const graphics = this.add.graphics();

        // var color = 0xffffff; // diff
        const color = 0x0000ff; // mult
        const thickness = 4;
        const alpha = 1;

        // graphics.lineStyle(16, 0x000000, 1);
        graphics.fillStyle(color, alpha);

        // var a = new Phaser.Math.Vector2(400, 300);
        // var radius = 128;

        graphics.fillCircle(400, 300, 128);
        // graphics.strokeCircle(400, 300, 128);

        // graphics.setBlendMode(Phaser.BlendModes.MULTIPLY);
        graphics.setBlendMode(Phaser.BlendModes.SCREEN);
        // graphics.setBlendMode(Phaser.BlendModes.DIFFERENCE);
    }
}

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

const game = new Phaser.Game(config);

Подготовка сцены и загрузка изображения

Вся работа начинается с базовой настройки сцены. В методе preload мы загружаем фоновое изображение, устанавливая базовый URL для удобства. Ключевой момент — использование type: Phaser.WEBGL в конфигурации игры. Это обязательное условие для работы режимов наложения, так как они реализованы через возможности WebGL.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('turkey', 'assets/pics/turkey-1985086.jpg');
}

const config = {
    width: 800,
    height: 600,
    type: Phaser.WEBGL, // Важно: используем WebGL-рендерер
    parent: 'phaser-example',
    scene: Example
};

Создание фона и графического объекта

В методе create мы сначала размещаем фоновое изображение по центру холста с помощью this.add.image. Затем создаем основной инструмент для работы с векторной графикой — объект graphics. Этот объект будет содержать все наши геометрические примитивы (круги, линии и т.д.), которые мы наложим на фон.

create ()
{
    // Добавляем фоновое изображение
    this.add.image(400, 300, 'turkey');

    // Создаем объект для векторной графики
    const graphics = this.add.graphics();
}

Настройка стиля и рисование фигуры

Прежде чем рисовать, нужно задать стиль для фигуры. В примере используется fillStyle, который определяет цвет заливки и её прозрачность (alpha). После установки стиля мы рисуем залитый круг методом fillCircle, указывая координаты центра (X, Y) и радиус. Это создаст сплошную синюю окружность поверх изображения.

// Задаем синий цвет (0x0000ff) и непрозрачность 1
const color = 0x0000ff;
const alpha = 1;
graphics.fillStyle(color, alpha);

// Рисуем залитый круг с центром в (400, 300) и радиусом 128 пикселей
graphics.fillCircle(400, 300, 128);

Применение режима наложения

Самая важная часть — применение режима наложения с помощью метода setBlendMode. Без него синий круг просто перекроет часть изображения. Режим SCREEN, использованный в примере, осветляет фон в области наложения, создавая эффект «свечения» или наложения света. Синий цвет при этом взаимодействует с цветами фона по специальной формуле.

// Применяем режим наложения 'SCREEN' к объекту graphics
graphics.setBlendMode(Phaser.BlendModes.SCREEN);

Именно этот вызов заставляет круг не просто перекрывать фон, а взаимодействовать с его пикселями, создавая сложный визуальный эффект. Объект Phaser.BlendModes содержит константы для всех поддерживаемых режимов.

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

Режимы наложения в Phaser — это ключ к созданию профессиональных визуальных эффектов без использования тяжеловесных редакторов. Всего одна строка кода с setBlendMode кардинально меняет результат. Для экспериментов попробуйте заменить SCREEN на MULTIPLY (затемнение, эффект тени) или DIFFERENCE (инверсия цвета, психоделический эффект). Также поэкспериментируйте с рисованием линий lineStyle и strokeCircle, меняйте цвета, прозрачность и форму графических примитивов. Комбинируя эти инструменты, вы сможете создавать динамичные задние планы, магические ауры, вспышки света и другие элементы, оживляющие вашу игру.