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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    graphics;

    create ()
    {
        this.graphics = this.add.graphics();

        const color = 0xffff00;
        const thickness = 4;
        const alpha = 1;

        this.graphics.lineStyle(thickness, color, alpha);

        const a = new Phaser.Math.Vector2(400, 100);
        const b = new Phaser.Math.Vector2(200, 400);
        const c = new Phaser.Math.Vector2(600, 400);

        this.graphics.strokeTriangle(a.x, a.y, b.x, b.y, c.x, c.y);
    }
}

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

const game = new Phaser.Game(config);

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

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

this.graphics = this.add.graphics();

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

Настройка стиля линии: метод lineStyle

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

const color = 0xffff00;
const thickness = 4;
const alpha = 1;

this.graphics.lineStyle(thickness, color, alpha);

* thickness (толщина): Задает ширину линии в пикселях. В нашем случае — 4 пикселя. * color (цвет): Задается в шестнадцатеричном формате (0xRRGGBB). Значение 0xffff00 соответствует желтому цвету. * alpha (прозрачность): Значение от 0 (полностью прозрачно) до 1 (полностью непрозрачно). Установив 1, мы делаем линию полностью видимой.

Этот метод задает стиль для всех последующих операций рисования линий и контуров у данного объекта Graphics.

Определение вершин треугольника: Vector2

Чтобы нарисовать треугольник, нужно задать координаты его трех вершин (точек) на плоскости. В Phaser для работы с двумерными координатами удобно использовать объект Phaser.Math.Vector2.

const a = new Phaser.Math.Vector2(400, 100);
const b = new Phaser.Math.Vector2(200, 400);
const c = new Phaser.Math.Vector2(600, 400);

Здесь мы создаем три вектора: * `a`: точка вверху по центру холста (x=400, y=100). * `b`: левая нижняя точка (x=200, y=400). * `c`: правая нижняя точка (x=600, y=400).

Использование Vector2 делает код более читаемым и позволяет в дальнейшем легко применять к точкам математические операции (сдвиг, вращение).

Рисование контура: метод strokeTriangle

Финальный шаг — отрисовка контура треугольника с заданными вершинами и стилем линии. Для этого используется метод strokeTriangle.

this.graphics.strokeTriangle(a.x, a.y, b.x, b.y, c.x, c.y);

Метод принимает шесть аргументов — попарно координаты X и Y каждой из трех точек (a, b, c). Он рисует три линии, соединяющие эти точки в порядке их передачи, используя текущий стиль, заданный ранее в lineStyle. В результате на экране появится желтый контур треугольника.

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

Вы освоили базовый принцип рисования контурных фигур в Phaser, используя связку Graphics.lineStyle() и Graphics.strokeTriangle(). Этот подход универсален: вместо strokeTriangle можно использовать strokeRect, strokeCircle или низкоуровневые методы beginPath, lineTo и closePath для произвольных многоугольников. **Идеи для экспериментов:** 1. Анимируйте вершины треугольника, изменяя координаты векторов `a,b,cв функцииupdate(), и каждый кадр очищайте холст (this.graphics.clear()`) и рисуйте фигуру заново. 2. Создайте несколько объектов Graphics с разными стилями линий и нарисуйте вложенные или пересекающиеся фигуры. 3. Используйте fillStyle и fillTriangle для рисования залитых треугольников, что полезно для создания простой полигональной графики или цветовых зон.