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

В Phaser 3.60+ появилась система FX, которая позволяет накладывать визуальные эффекты на игровые объекты прямо во время выполнения. Это мощный инструмент для создания динамической графики без подготовки текстур. В этой статье разберем пример добавления градиентного эффекта к спрайтам и покажем, как это работает на практике.

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene {

    preload() {
        
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.image('bg', 'assets/pics/debug-grid-1920x1920.png');
        this.load.image('square', 'assets/sprites/32x32-white.png');
    }

    create() {

        this.add.image(0, 0, 'bg').setOrigin(0);

        let fx = false;

        for (let x = 2; x < 8; x += 2) {
            for (let y = 2; y < 8; y += 2) {

                const s = this.add.image(32 * x, 32 * y, 'square').setOrigin(0);

                if (fx)
                {
                    const gradient = s.preFX.addGradient();
                    gradient.color1 = 0x00ff00;
                    gradient.color2 = 0x0000ff;
                }

                fx = !fx;
            }
        }

        // this.cameras.main.roundPixels = false;

        this.tweens.add({
            targets: this.cameras.main,
            scrollX: 50,
            scrollY: 50,
            duration: 5000,
            yoyo: true,
            repeat: -1,
        });
    }

}

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

const game = new Phaser.Game(config);

Что делает пример

Пример создает сетку из белых квадратов на текстурированном фоне. К каждому второму квадрату применяется градиентный эффект, который переливается от зеленого к синему. Камера плавно движется по сцене, демонстрируя эффект в динамике.

Ключевой момент: эффекты FX применяются в реальном времени и не требуют предварительной обработки изображений. Это особенно полезно для процедурно генерируемого контента или динамических UI-элементов.

Настройка сцены и загрузка ассетов

В методе preload устанавливается базовый URL для загрузки ресурсов и загружаются две текстуры: фон bg и спрайт square.

this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.image('bg', 'assets/pics/debug-grid-1920x1920.png');
this.load.image('square', 'assets/sprites/32x32-white.png');

Фон debug-grid-1920x1920.png — это большая текстура с сеткой, которая помогает визуально ориентироваться в координатах. Спрайт 32x32-white.png — простой белый квадрат размером 32x32 пикселя.

Важно: в конфигурации игры установлен флаг pixelArt: true. Это включает специальную обработку пиксельной графики, предотвращая размытие при масштабировании.

Создание сетки спрайтов

В методе create сначала добавляется фон, затем создается сетка из квадратов с помощью вложенных циклов.

for (let x = 2; x < 8; x += 2) {
    for (let y = 2; y < 8; y += 2) {
        const s = this.add.image(32 * x, 32 * y, 'square').setOrigin(0);
        // ...
    }
}

Циклы итерируются по значениям от 2 до 8 с шагом 2, создавая 9 спрайтов (3x3). Координаты умножаются на 32, чтобы расположить квадраты с интервалами. setOrigin(0) устанавливает точку привязки спрайта в его левый верхний угол, что упрощает позиционирование в сетке.

Добавление градиентного эффекта

К каждому второму спрайту добавляется градиентный FX-эффект. Переменная fx используется как флаг-переключатель.

if (fx)
{
    const gradient = s.preFX.addGradient();
    gradient.color1 = 0x00ff00;
    gradient.color2 = 0x0000ff;
}
fx = !fx;

Метод preFX.addGradient() создает и добавляет к спрайту объект градиентного эффекта. color1 и color2 задают цвета градиента в HEX-формате (0xRRGGBB). Здесь используется переход от зеленого (0x00ff00) к синему (0x0000ff).

Важно: эффекты из коллекции preFX применяются до рендеринга спрайта. Существует также postFX для эффектов, применяемых после рендеринга (например, свечение, размытие).

Анимация камеры

После создания сетки добавляется твин для плавного движения камеры.

this.tweens.add({
    targets: this.cameras.main,
    scrollX: 50,
    scrollY: 50,
    duration: 5000,
    yoyo: true,
    repeat: -1,
});

Твин анимирует свойства scrollX и scrollY основной камеры, смещая ее на 50 пикселей по обеим осям за 5 секунд. Параметры yoyo: true и repeat: -1 заставляют анимацию играть вперед-назад бесконечно. Это демонстрирует, как эффекты FX выглядят в движении.

Закомментированная строка // this.cameras.main.roundPixels = false; отключает округление координат пикселей. При pixelArt: true это округление включено по умолчанию для четкости.

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

Система FX в Phaser открывает широкие возможности для динамических визуальных эффектов без затрат на производительность. Экспериментируйте: меняйте цвета градиента, добавляйте другие эффекты (свечение, тени, маски), комбинируйте preFX и postFX, применяйте эффекты к группам объектов или всей камере.