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

Визуальные эффекты — мощный инструмент для создания атмосферы и акцентов в игре. Эффект свечения, или Bloom, позволяет подсветить яркие объекты, создавая ощущение света, магии или технологичности. В Phaser 3.60+ реализовать этот эффект стало проще простого благодаря встроенной системе постобработки PostFX. В этой статье мы разберем, как добавить свечение к любому игровому объекту, и покажем, как динамически управлять параметрами эффекта. Вы научитесь превращать обычные спрайты в сияющие источники света, что особенно полезно для создания UI-элементов, магических заклинаний, неоновых вывесок или технологичных интерфейсов.

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

Живой запуск

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

Исходный код


class GameScene extends Phaser.Scene {

	preload() {
  	
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.image('bomb', 'assets/sprites/bombcolor.png');
  }

  create() {
    const bomb = this.add.image(200, 200, 'bomb')
    bomb.postFX.addBloom(0xffffff, 2, 2, 2, 2);


    this.input.on('wheel', (pointer, gameobjects, dx, dy, dz) => {
      this.scale.resize(this.scale.gameSize.width + dy, this.scale.gameSize.height + dy);
    });
  }
}

new Phaser.Game({
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: [GameScene],
  parent: 'phaser-example'
});

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

Первым делом создадим базовую сцену GameScene. В методе preload() мы загружаем спрайт, к которому позже применим эффект. Важно установить корректный базовый URL для загрузки ассетов из репозитория примеров Phaser.

class GameScene extends Phaser.Scene {
    preload() {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('bomb', 'assets/sprites/bombcolor.png');
    }
}

Создание объекта и добавление эффекта Bloom

В методе create() мы добавляем спрайт на сцену с помощью this.add.image. После этого к объекту можно обратиться и добавить эффект постобработки через свойство postFX. Именно здесь и происходит магия.

Метод .addBloom() применяет эффект свечения к конкретному объекту. Это локальный эффект, который не затрагивает другие элементы на сцене, что очень эффективно для производительности.

create() {
    const bomb = this.add.image(200, 200, 'bomb');
    bomb.postFX.addBloom(0xffffff, 2, 2, 2, 2);
}

Разберем параметры метода addBloom(color, blurStrength, strength, steps, quality): * color (0xffffff): Цвет свечения. Белый цвет (0xffffff) дает нейтральное свечение, но можно использовать любой цвет в HEX-формате для создания цветных ореолов. * blurStrength (2): Сила размытия. Чем выше значение, тем больше и мягче область свечения. * strength (2): Интенсивность эффекта. Управляет яркостью свечения. * steps (2): Количество шагов рендеринга. Влияет на качество и плавность градиента свечения. * quality (2): Качество эффекта. Более высокие значения дают лучшее качество за счет производительности.

Динамическое изменение масштаба сцены

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

Обработчик события 'wheel' ловит прокрутку колесика мыши. Параметр dy содержит значение вертикальной прокрутки. Это значение прибавляется к текущей ширине и высоте игрового поля, после чего вызывается метод this.scale.resize().

this.input.on('wheel', (pointer, gameobjects, dx, dy, dz) => {
    this.scale.resize(this.scale.gameSize.width + dy, this.scale.gameSize.height + dy);
});

Попробуйте покрутить колесико мыши в примере — вы увидите, как игра плавно масштабируется, а эффект bloom на спрайте адаптируется под новый размер окна.

Инициализация игры

Финальный шаг — создание экземпляра игры Phaser.Game с конфигурацией. Мы указываем автоматический выбор рендерера (Phaser.AUTO), начальный размер окна и массив со сценами. В данном случае у нас всего одна сцена — GameScene.

new Phaser.Game({
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: [GameScene],
    parent: 'phaser-example'
});

Конфигурация parent: 'phaser-example' означает, что canvas игры будет вставлен в HTML-элемент с id phaser-example.

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

Как видите, добавить профессиональный эффект свечения в Phaser можно буквально одной строчкой кода. Система PostFX открывает широкие возможности для визуальной полировки без глубокого погружения в шейдеры. Для экспериментов попробуйте: 1. Применить addBloom к тексту (this.add.text) или тайлсету. 2. Создать несколько объектов с разными цветами свечения (например, 0xff0000 для красного и 0x00ff00 для зеленого). 3. Изменять параметры blurStrength и strength в реальном времени в ответ на действия игрока, создавая пульсирующий эффект. 4. Комбинировать bloom с другими эффектами PostFX, такими как размытие (addBlur) или искажение (addBarrel).