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

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

Визуальные эффекты — ключевой элемент игровой атмосферы. Хотя Phaser предоставляет богатую библиотеку спрайтов, иногда для создания уникального стиля или динамических интерфейсов нужно рисовать графику напрямую. Встроенный объект `Graphics` позволяет генерировать примитивы, такие как треугольники, и заполнять их не только сплошным цветом, но и плавными градиентами. Этот подход полезен для создания фоновых элементов, спецэффектов, выделения областей на карте или нестандартных элементов UI без загрузки дополнительных изображений. Прямая работа с графикой ускоряет прототипирование и даёт полный контроль над каждым пикселем.

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    create ()
    {
        const graphics = this.add.graphics();

        graphics.fillGradientStyle(0xff0000, 0x00ff00, 0x0000ff, 0xffff00, 1);
        graphics.fillTriangle(200, 200, 400, 50, 500, 300);

        graphics.fillGradientStyle(0xff0000, 0xff0000, 0xffff00, 0xffff00, 1);
        graphics.fillTriangle(60, 500, 60, 400, 500, 500);
    }
}

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

const game = new Phaser.Game(config);

Основы: создание графического контекста

Вся работа с векторной графикой в Phaser начинается с создания объекта Graphics. Этот объект является контейнером для рисования линий, фигур и заливок.

const graphics = this.add.graphics();

Метод this.add.graphics() создаёт и добавляет на сцену новый холст для рисования. Все последующие операции, такие как fillTriangle, будут применены к этому объекту. Важно, что в конфигурации примера используется type: Phaser.WEBGL, что обеспечивает высокую производительность отрисовки.

Настройка градиентной заливки

Перед рисованием фигуры необходимо задать стиль заливки. Для градиентов используется метод fillGradientStyle. Он принимает пять аргументов.

graphics.fillGradientStyle(0xff0000, 0x00ff00, 0x0000ff, 0xffff00, 1);

Первые четыре аргумента — это цвета в формате HEX (0xRRGGBB): - Первый цвет (0xff0000 — красный) для верхнего левого угла. - Второй цвет (0x00ff00 — зелёный) для верхнего правого угла. - Третий цвет (0x0000ff — синий) для нижнего левого угла. - Четвёртый цвет (0xffff00 — жёлтый) для нижнего правого угла.

Пятый аргумент (`1`) — это альфа-канал (прозрачность), где 1 — полностью непрозрачный. Градиент строится на основе этих четырёх цветовых опор, интерполируя значения по всей области фигуры.

Рисование треугольника с градиентом

После установки стиля можно рисовать саму фигуру. Метод fillTriangle принимает координаты трёх вершин (x1, y1, x2, y2, x3, y3) и заполняет получившийся треугольник активным стилем заливки.

graphics.fillTriangle(200, 200, 400, 50, 500, 300);

В этом примере рисуется треугольник с вершинами в точках (200, 200), (400, 50) и (500, 300). Заливка будет применена с градиентом, который мы настроили на предыдущем шаге. Фигура рисуется сразу же после вызова метода.

Создание вертикального градиента

Интересный эффект достигается, когда два верхних цвета совпадают, а два нижних — тоже. Это создаёт вертикальный, а не четырёхточечный градиент.

graphics.fillGradientStyle(0xff0000, 0xff0000, 0xffff00, 0xffff00, 1);
graphics.fillTriangle(60, 500, 60, 400, 500, 500);

Здесь верхние опорные точки имеют красный цвет (0xff0000), а нижние — жёлтый (0xffff00). В результате треугольник плавно переходит от красного к жёлтому сверху вниз. Это доказывает, что градиент проецируется на ограничивающий прямоугольник фигуры, а не на её форму.

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

Весь код выполняется внутри сцены (Scene) Phaser. Класс сцены должен содержать метод create, который вызывается один раз при инициализации сцены. Именно здесь происходит вся отрисовка.

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

const game = new Phaser.Game(config);

Конфигурационный объект config задаёт основные параметры игры: ширину и высоту холста, использование WebGL рендерера (для лучшей производительности с графикой), ID родительского HTML-элемента и класс основной сцены. Инстанс new Phaser.Game(config) запускает игровой цикл.

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

Объект Graphics в Phaser 3 — это мощный инструмент для программной генерации графики. Как мы увидели, с помощью fillGradientStyle и fillTriangle можно быстро создавать сложные цветовые переходы, что открывает двери для визуальных экспериментов прямо в коде. Попробуйте изменить параметры: анимируйте цвета градиента в методе update, создайте мозаику из множества треугольников или комбинируйте градиентные фигуры со спрайтами для создания эффектов ауры или выделения. Используйте разные комбинации совпадающих цветов в fillGradientStyle, чтобы получать линейные градиенты под любым углом.