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

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

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

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

Живой запуск

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

Исходный код

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

        graphics.lineStyle(1, 0xffffff, 1);
        graphics.strokeTriangle(200, 200, 400, 50, 500, 300);

        graphics.lineStyle(4, 0x00ffff, 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. Его можно добавить в сцену через метод this.add.graphics(). Этот объект служит контейнером для команд рисования.

const graphics = this.add.graphics();

После создания объект graphics готов к работе. Все последующие вызовы методов будут отрисовываться на этом объекте в порядке их выполнения.

Настройка стиля линии

Перед тем как рисовать контур фигуры, необходимо задать стиль линии. За это отвечает метод lineStyle. Он принимает три ключевых параметра.

graphics.lineStyle(1, 0xffffff, 1);

Первый аргумент — толщина линии в пикселях. Второй — цвет в шестнадцатеричном формате (0xffffff — белый). Третий — альфа-канал (прозрачность) в диапазоне от 0 (полностью прозрачный) до 1 (полностью непрозрачный). Установленный стиль применяется ко всем последующим операциям рисования, пока не будет изменен новым вызовом lineStyle.

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

Непосредственно для отрисовки контура треугольника используется метод strokeTriangle. Он принимает шесть чисел — координаты X и Y для каждой из трех вершин.

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

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

Смена стиля и рисование новых фигур

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

graphics.lineStyle(4, 0x00ffff, 1);
graphics.strokeTriangle(60, 500, 60, 400, 500, 500);

Здесь мы сначала устанавливаем новый стиль: толстая (4px) бирюзовая (0x00ffff) непрозрачная линия. Затем рисуем новый треугольник с вершинами в (60, 500), (60, 400) и (500, 500). Оба треугольника, каждый со своим стилем, будут отображены на одном объекте graphics.

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

Объект Graphics и метод strokeTriangle предоставляют простой и быстрый способ программной отрисовки контуров. Это полезно для визуализации хитбоксов, зон поражения, путей перемещения или создания простых UI-элементов прямо в рантайме. Поэкспериментируйте: попробуйте анимировать вершины треугольника, изменяя их координаты в методе update, или рисуйте разные фигуры, комбинируя strokeTriangle с strokeRect и strokeCircle.