Phaser.js: всё об играх и разработке

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

Создание визуально привлекательных эффектов — ключевая часть разработки игр. В этом примере мы разберем, как использовать режим смешивания (Blend Mode) `ADD` в Phaser для имитации яркого свечения и энергетических полей. Этот прием особенно полезен для визуализации лазерных выстрелов, магических заклинаний, взрывов или фоновых атмосферных эффектов, добавляя игре глубины и динамики без увеличения объема графических ресурсов.

Версия 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('background', 'assets/bugs/background.png');
        this.load.multiatlas('spin_wave', 'assets/bugs/e_spinwave.json', 'assets/bugs');
    }

    create ()
    {
        this.add.sprite(320, 180, 'background');

        this.anims.create({
            key: "spin",
            frames: this.anims.generateFrameNames('spin_wave', {
                start: 0,
                end: 31,
                zeroPad: 3,
                prefix: 'e_spinwave_',
                suffix: '.png'
            }),
            frameRate: 15,
            yoyo: false,
            repeat: -1
        });

        let spinWave = this.add.sprite(320, 180).play('spin');

        spinWave.setBlendMode(Phaser.BlendModes.ADD);
    }
}

const config = {
	type: Phaser.WEBGL,
	width: 640,
	height: 360,
	pixelArt: true,
    parent: 'phaser-example',
	scene: Example
}

const game = new Phaser.Game(config);

Загрузка ресурсов: Фон и мультиатлас

В методе preload мы загружаем два графических ресурса, необходимых для сцены. Первый — статическое фоновое изображение.

this.load.image('background', 'assets/bugs/background.png');

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

this.load.multiatlas('spin_wave', 'assets/bugs/e_spinwave.json', 'assets/bugs');

Здесь 'spin_wave' — это ключ, по которому мы будем обращаться к атласу в коде, а JSON-файл описывает, какие кадры анимации в нем содержатся.

Создание анимации из кадров мультиатласа

В методе create мы сначала добавляем фон на сцену, а затем создаем анимацию. Для этого используется менеджер анимаций this.anims.

this.anims.create({
    key: "spin",
    frames: this.anims.generateFrameNames('spin_wave', {
        start: 0,
        end: 31,
        zeroPad: 3,
        prefix: 'e_spinwave_',
        suffix: '.png'
    }),
    frameRate: 15,
    yoyo: false,
    repeat: -1
});

Функция generateFrameNames генерирует массив кадров, обращаясь к мультиатласу 'spin_wave'. Параметры start и end задают диапазон кадров (от 0 до 31). zeroPad: 3 означает, что номера кадров будут дополнены нулями до трех знаков (например, e_spinwave_000.png). prefix и suffix — это части имени файла, обрамляющие номер кадра. Анимация будет проигрываться с частотой 15 кадров в секунду (frameRate), без движения в обратную сторону (yoyo: false) и бесконечно (repeat: -1).

Добавление спрайта и применение режима смешивания

После создания анимации мы добавляем на сцену спрайт и запускаем на нем анимацию 'spin'.

let spinWave = this.add.sprite(320, 180).play('spin');

Самая важная строка в этом примере — применение режима наложения пикселей (Blend Mode).

spinWave.setBlendMode(Phaser.BlendModes.ADD);

Метод setBlendMode применяет к спрайту выбранный режим смешивания. Phaser.BlendModes.ADD — это один из встроенных режимов. Его принцип работы: цвета пикселей спрайта и фона (или других объектов под ним) не перекрываются, а складываются. Это приводит к осветлению и создает эффект "свечения" или "энергии", так как яркие области становятся еще ярче. Без этого режима полупрозрачные темные области спрайта просто затемнили бы фон.

Конфигурация игры: Важность WEBGL-рендерера

Для работы большинства режимов смешивания, включая ADD, необходим WebGL-рендерер.

const config = {
    type: Phaser.WEBGL,
    width: 640,
    height: 360,
    pixelArt: true,
    parent: 'phaser-example',
    scene: Example
};

Ключевой параметр здесь — type: Phaser.WEBGL. Если установить Phaser.CANVAS, режимы смешивания могут не поддерживаться или работать некорректно. Параметр pixelArt: true включает сглаживание текстур, характерное для пиксель-арта, что важно для сохранения стилистики загруженных изображений.

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

Режим смешивания ADD — мощный инструмент для создания сложных визуальных эффектов из простых ассетов. Он позволяет реалистично имитировать светящиеся объекты, не прибегая к предварительно отрендеренным спецэффектам. Для экспериментов попробуйте применить этот режим к системам частиц (this.add.particles), чтобы создать дым или искры, или комбинируйте несколько спрайтов с разными режимами наложения (MULTIPLY, SCREEN) для получения уникальных визуальных композиций.