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

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

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

Живой запуск

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

Исходный код


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

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

        graphics.beginPath();

        graphics.moveTo(400, 100);
        graphics.lineTo(200, 278);
        graphics.lineTo(340, 430);
        graphics.lineTo(650, 300);
        graphics.lineTo(700, 180);
        graphics.lineTo(600, 80);

        graphics.closePath();
        graphics.fillPath();
    }
}

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

const game = new Phaser.Game(config);

Инициализация и настройка стиля заливки

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

Перед началом рисования необходимо задать стиль заливки. Метод fillGradientStyle() определяет градиент, который будет использоваться для заливки фигуры. Он принимает четыре цветовых значения (в формате HEX) и альфа-канал.

Первые два аргумента (topLeft и topRight) задают цвета для верхних углов прямоугольной области градиента, а третий и четвертый (bottomLeft и bottomRight) — для нижних углов. Phaser автоматически интерполирует цвета между этими точками, создавая плавный переход. Пятый аргумент — значение прозрачности (alpha) от 0 до 1.

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

В данном примере мы задаем градиент от красного (0xff0000) в левом верхнем углу к зеленому (0x00ff00) в правом верхнем углу, и от красного (0xff0000) в левом нижнем углу к желтому (0xffff00) в правом нижнем углу. Это создаст сложный цветовой переход по всей фигуре.

Рисование контура фигуры с помощью Path API

Для рисования произвольного многоугольника используется концепция пути (Path). Вы начинаете путь, последовательно задавая его точки, а затем закрываете его.

Метод beginPath() сигнализирует о начале построения нового контура.

Метод moveTo(x, y) устанавливает начальную точку пера, не рисуя линию. С него начинается любая фигура.

Метод lineTo(x, y) рисует прямую линию от текущей позиции пера до указанных координат, после чего текущая позиция обновляется.

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

graphics.beginPath();

graphics.moveTo(400, 100);
graphics.lineTo(200, 278);
graphics.lineTo(340, 430);
graphics.lineTo(650, 300);
graphics.lineTo(700, 180);
graphics.lineTo(600, 80);

В данном коде мы рисуем шестиугольник, начиная с точки (400, 100) и последовательно соединяя линии до шести различных точек на сцене.

Завершение пути и применение заливки

После того как все вершины фигуры заданы, путь нужно корректно завершить.

Метод closePath() автоматически рисует линию от последней заданной точки обратно к начальной, гарантируя, что фигура будет замкнутой. Это важный шаг для корректной заливки.

Наконец, метод fillPath() применяет ранее заданный стиль градиентной заливки (fillGradientStyle) ко всей области внутри замкнутого контура. Именно в этот момент фигура отрисовывается на экране.

graphics.closePath();
graphics.fillPath();

Без вызова fillPath() заданный контур останется невидимым, так как мы лишь описали его, но не выполнили отрисовку заливки.

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

Весь код отрисовки выполняется внутри метода create() сцены. Этот метод вызывается один раз при инициализации сцены и является идеальным местом для создания статичной графики.

Конфигурационный объект config передается в конструктор Phaser.Game. Ключевые параметры: - type: Phaser.WEBGL — использует WebGL рендерер, который необходим для отрисовки градиентов в Graphics. - width и height — устанавливают размер игрового холста. - parent — ID HTML-элемента, в который будет встроена игра. - scene — ссылка на класс нашей сцены, содержащей логику отрисовки.

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

const game = new Phaser.Game(config);

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

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

Инструмент Graphics и Path API в Phaser 3 — это мощный дуэт для динамического создания векторной графики. Вы научились рисовать произвольные многоугольники и заливать их сложными градиентами. Для экспериментов попробуйте: анимировать координаты вершин фигуры во время update() для создания "живых" форм; генерировать фигуры со случайным количеством сторон и градиентами для процедурного контента; комбинировать несколько фигур с разными стилями заливки и обводки для построения сложных векторных изображений прямо в игре.