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

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

Градиенты — мощный инструмент визуального дизайна в играх. Phaser 3 предоставляет гибкий API для их создания, включая различные режимы повторения. В этой статье мы детально разберем режим `SAWTOOTH` (зубчатый), который позволяет создавать сложные, нелинейные переходы цвета, идеальные для фонов, эффектов или стилизованных интерфейсов. Вы научитесь контролировать форму и направление градиента, понимая, как параметры `shape`, `start` и `repeatMode` влияют на конечный результат.

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    create ()
    {
        this.add.gradient({
            repeatMode: 2, // SAWTOOTH
            start: { x: 0.25, y: 0.5 },
            shape: { x: 0.25, y: 0 }
        }, 400, 300, 800, 400);

        // Highlight central gradient unit.
        this.add.rectangle(300, 300, 200, 400).setStrokeStyle(1, 0xff0000, 0.5);
    }
}

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

const game = new Phaser.Game(config);

Что такое режим повторения SAWTOOTH?

Параметр repeatMode в методе this.add.gradient() определяет, как градиентная заливка будет вести себя за пределами своей базовой области. Значение `2соответствует константеPhaser.GameObjects.Gradient.SAWTOOTH`.

В отличие от простого повторения (REPEAT, режим 1), режим SAWTOOTH создает эффект "пилы": цвета градиента плавно нарастают, а затем резко сбрасываются к начальному значению. Это создает визуальный ритм и может имитировать волны, полосы или энергетические поля.

Визуализировать базовую единицу такого градиента помогает красная рамка, которую мы добавим в коде.

Создание градиента: разбор параметров

Основная магия происходит в вызове this.add.gradient(). Давайте разберем его аргументы по порядку.

this.add.gradient({
    repeatMode: 2, // SAWTOOTH
    start: { x: 0.25, y: 0.5 },
    shape: { x: 0.25, y: 0 }
}, 400, 300, 800, 400);

Первый аргумент — объект конфигурации:
*   `repeatMode: 2` — активирует зубчатый режим повторения.
*   `start: { x: 0.25, y: 0.5 }` — задает начальную точку градиента в нормализованных координатах (от 0 до 1) относительно его собственного размера. Здесь `x=0.25` означает, что градиент начинается на 25% ширины от левого края.
*   `shape: { x: 0.25, y: 0 }` — определяет вектор направления и «длину волны» градиента. Значение `x: 0.25` означает, что один полный цикл градиента (от стартового цвета до конечного и сброса) занимает 25% ширины объекта. `y: 0` указывает, что градиент строго горизонтальный.

Следующие четыре аргумента — это `x,y,width,height` для позиционирования и размера игрового объекта с градиентом на сцене.

Визуализация базового паттерна

Чтобы понять, где заканчивается один цикл SAWTOOTH и начинается следующий, в примере поверх градиента накладывается полупрозрачный прямоугольник.

this.add.rectangle(300, 300, 200, 400).setStrokeStyle(1, 0xff0000, 0.5);

Этот код создает контур прямоугольника (setStrokeStyle) без заливки. Ключевые совпадения: * Ширина прямоугольника — 200 пикселей. * Ширина градиента — 800 пикселей. * Параметр shape.x в градиенте — 0.25.

Расчет: 800 * 0.25 = 200. Красная рамка точно охватывает одну базовую единицу («зубец») градиентного паттерна. Все, что справа за ее пределами, — это повторение этого паттерна в режиме SAWTOOTH.

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

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

const config = {
    type: Phaser.WEBGL, // Используется WebGL для лучшей производительности
    width: 800,
    height: 600,
    backgroundColor: '#2d2d2d', // Темно-серый фон для контраста
    parent: 'phaser-example',
    scene: Example // Наша сцена с градиентом
};

const game = new Phaser.Game(config);

Использование Phaser.WEBGL обеспечивает аппаратное ускорение отрисовки градиентов. Темный фон (#2d2d2d) делает яркий градиент более выразительным.

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

Режим repeatMode: SAWTOOTH открывает возможность создавать динамичные, ритмичные текстуры с помощью всего одного вызова API. Поэкспериментируйте: измените вектор shape на { x: 0, y: 0.1 } для вертикального градиента, задайте start в другой точке или комбинируйте несколько градиентов с разными режимами для получения сложных фоновых паттернов. Этот прием отлично подойдет для создания анимированных энергетических барьеров, фонов подводного уровня или стилизованных полос загрузки.