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

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

Градиенты в Phaser — это мощный инструмент для создания визуально богатых игровых сцен без использования тяжёлых текстур. В примере показано, как с помощью объекта `Gradient` можно оживить фон и интерфейсные элементы, применяя анимацию к их положению, вращению и свойствам заливки. Это полезно для разработчиков, которые хотят добавить атмосферности игру, оптимизировать производительность (градиенты рендерятся GPU) или создать плавные переходы цветов в UI.

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    bg;
    gradient;

    create ()
    {
        // Sneaky background gradient
        this.bg = this.add.gradient({
            shapeMode: 2,
            start: { x: 0.5, y: 0.5 },
            shape: { x: 0, y: 0.55 },
            bands: [
                {
                    colorStart: 0x442211,
                    colorEnd: 0x6699bb,
                    colorSpace: 1,
                    interpolation: 4,
                }
            ]
        }, 400, 300, 1400, 800)
        .setRotation(-0.25);

        this.gradient = this.add.gradient({
            shapeMode: 0, // LINEAR
        }, 400, 300, 400, 400);

        // Or, because this is default:
        // this.gradient = this.add.gradient({}, 400, 300, 400, 400);
    }

    update (time, delta)
    {
        const t = this.game.loop.time;
        this.bg.rotation = 0.25 * Math.sin(t / 3000);
        this.gradient.rotation = 0.03 * Math.sin(t / 1234);
        this.gradient.setPosition(
            400 + 16 * Math.sin(t / 876),
            300 + 16 * Math.sin(t / 765)
        );
    }
}

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

const game = new Phaser.Game(config);

Инициализация градиента: базовый синтаксис

Создание градиента в Phaser происходит через метод this.add.gradient(). Он принимает объект конфигурации и параметры позиционирования. В примере используется два градиента: один для фона, другой — для анимируемого объекта.

this.gradient = this.add.gradient({
    shapeMode: 0, // LINEAR
}, 400, 300, 400, 400);

Параметры: - Конфигурационный объект (первый аргумент) задаёт тип градиента (shapeMode). - Следующие четыре числа — это `x,y,widthиheight` градиента. - При shapeMode: 0 (LINEAR) градиент заполняет прямоугольную область линейным переходом цветов. Это значение по умолчанию, поэтому конфиг может быть пустым объектом {}.

Расширенная конфигурация: радиальный градиент

Второй градиент в примере (this.bg) демонстрирует более сложную настройку — радиальный градиент с кастомизацией цветовых полос.

this.bg = this.add.gradient({
    shapeMode: 2,
    start: { x: 0.5, y: 0.5 },
    shape: { x: 0, y: 0.55 },
    bands: [
        {
            colorStart: 0x442211,
            colorEnd: 0x6699bb,
            colorSpace: 1,
            interpolation: 4,
        }
    ]
}, 400, 300, 1400, 800)
.setRotation(-0.25);

Ключевые параметры: - shapeMode: 2 — устанавливает радиальный (круговой) тип градиента. - start — точка начала градиента в нормализованных координатах (от 0 до 1). - shape — определяет форму/размер радиального градиента. - bands — массив цветовых полос, где каждая полоса задаёт начальный и конечный цвет, цветовое пространство (colorSpace) и метод интерполяции (interpolation). - .setRotation() — применяет начальный поворот к объекту.

Анимация градиентов в реальном времени

Основная динамика достигается в методе update(), который вызывается каждый кадр. Здесь изменяются свойства градиентов на основе времени игры.

update (time, delta)
{
    const t = this.game.loop.time;
    this.bg.rotation = 0.25 * Math.sin(t / 3000);
    this.gradient.rotation = 0.03 * Math.sin(t / 1234);
    this.gradient.setPosition(
        400 + 16 * Math.sin(t / 876),
        300 + 16 * Math.sin(t / 765)
    );
}

Что происходит: - this.game.loop.time — текущее время игры в миллисекундах. - Свойство .rotation меняется по синусоиде, создавая плавное вращение. - setPosition() двигает градиент по эллиптической траектории, используя разные делители для `t`, чтобы оси X и Y двигались несинхронно. - Такая анимация выполняется эффективно, так как затрагивает только трансформации объекта, а не перерисовку градиента с нуля.

Конфигурация сцены и запуск игры

Код завершается стандартной для Phaser конфигурацией игры и созданием экземпляра Phaser.Game.

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

const game = new Phaser.Game(config);

Важные моменты: - type: Phaser.WEBGL — градиенты требуют WebGL-рендерера. - backgroundColor задаёт цвет фона HTML-канваса (не путать с градиентом внутри сцены). - parent — ID DOM-элемента, в который будет встроен канвас игры. - Класс Example передаётся как сцена, которая будет запущена автоматически.

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

Градиенты в Phaser — это гибкий и производительный способ создания динамического визуала. Вы можете экспериментировать: менять shapeMode на другие значения (например, конический градиент), анимировать цвета внутри bands, комбинировать несколько градиентов для сложных эффектов или привязывать их движение к игровой логике (например, к здоровью персонажа). Это отличная замена статичным текстурам для фонов, аур, энергетических полей и UI-подсветки.