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

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

Отрисовка геометрических фигур — частый этап в разработке игр, будь то создание интерфейсов, эффектов или прототипирования. Стандартные заливки и обводки могут выглядеть скучно. В этой статье мы разберем, как с помощью объекта `Graphics` и метода `lineGradientStyle()` создавать треугольники с динамичными градиентными обводками, что мгновенно добавляет визуальную глубину и стиль вашим игровым элементам. Этот простой прием позволяет оживить даже базовые формы без использования тяжеловесных текстур.

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

Живой запуск

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

Исходный код

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

        graphics.lineGradientStyle(8, 0xff0000, 0x0000ff, 0xff0000, 0x0000ff, 1);
        graphics.strokeTriangle(200, 200, 400, 50, 500, 300);

        graphics.lineGradientStyle(6, 0xffff00, 0xff00ff, 0xff0000, 0x0000ff, 1);
        graphics.strokeTriangle(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);

Создаем холст для рисования: объект Graphics

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

const graphics = this.add.graphics();

Строка выше создает новый объект Graphics и добавляет его на сцену. Переменная graphics становится нашим инструментом для всех последующих операций рисования. Важно, что объект создается через this.add, что автоматически делает его частью сцены и системы отображения.

Настраиваем стиль линии: метод lineGradientStyle

Перед тем как рисовать фигуру, необходимо задать стиль ее обводки. Метод lineGradientStyle() определяет градиент для линий.

graphics.lineGradientStyle(8, 0xff0000, 0x0000ff, 0xff0000, 0x0000ff, 1);

Разберем его аргументы по порядку: 1. **Толщина линии (8):** Задает ширину обводки в пикселях. 2. **Цвет верхнего левого угла (0xff0000):** Начальный цвет градиента (в данном случае красный). 3. **Цвет верхнего правого угла (0x0000ff):** Конечный цвет градиента для верхней границы (синий). 4. **Цвет нижнего левого угла (0xff0000):** Начальный цвет градиента для нижней границы (красный). 5. **Цвет нижнего правого угла (0x0000ff):** Конечный цвет градиента (синий). 6. **Альфа-канал (1):** Прозрачность линии, где 1 — полностью непрозрачная.

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

Рисуем фигуру: метод strokeTriangle

После настройки стиля можно приступать к рисованию. Метод strokeTriangle() создает контур треугольника (без заливки) по трем точкам.

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

Каждая пара чисел — это координаты `xиyвершины треугольника на холсте сцены. Порядок вершин может быть любым. Phaser соединит точки линиями, используя заданный ранее стиль изlineGradientStyle`. Обводка будет следовать форме треугольника, а градиент будет рассчитан относительно его воображаемого ограничивающего прямоугольника.

Комбинируем стили: рисуем несколько фигур

Один объект Graphics может последовательно рисовать множество фигур с разными стилями. Для этого нужно просто вызвать lineGradientStyle() с новыми параметрами перед рисованием следующей фигуры.

graphics.lineGradientStyle(6, 0xffff00, 0xff00ff, 0xff0000, 0x0000ff, 1);
graphics.strokeTriangle(60, 500, 60, 400, 500, 500);

В этом примере мы меняем толщину линии на 6 пикселей и цвет градиента, используя желтый (0xffff00) и пурпурный (0xff00ff) для верхних углов, сохраняя красный и синий для нижних. Это демонстрирует, как легко менять внешний вид примитивов на лету, используя один и тот же объект для рисования.

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

Использование lineGradientStyle со strokeTriangle — это мощный и легкий способ добавить визуальный интерес к вашей игре. Вы можете экспериментировать: анимировать цвета градиента, изменяя их в игровом цикле update; рисовать более сложные многоугольники, комбинируя треугольники; или использовать эту технику для создания ярких контуров интерфейсных элементов и спецэффектов. Это отличная альтернатива текстурам для динамически генерируемой графики.