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

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

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

Живой запуск

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

Исходный код


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

        graphics.fillStyle(0x00ff00, 1);

        graphics.beginPath();

        graphics.moveTo(200, 200);
        graphics.lineTo(300, 300);
        graphics.lineTo(200, 400);
        graphics.lineTo(200, 200);

        graphics.moveTo(500, 200);
        graphics.lineTo(600, 300);
        graphics.lineTo(500, 400);
        graphics.lineTo(500, 200);

        graphics.fillPath();
    }
}

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

const game = new Phaser.Game(config);

Создаем объект Graphics

Всё начинается с создания объекта Graphics. Это ваш холст для рисования векторных примитивов (линий, фигур) прямо в игре.

const graphics = this.add.graphics();

После создания можно задать стиль заливки. В примере используется зелёный цвет (0x00ff00) с полной непрозрачностью (альфа = 1).

graphics.fillStyle(0x00ff00, 1);

Начинаем путь и рисуем первый треугольник

Метод beginPath() сообщает системе, что мы начинаем определять новую фигуру (или набор фигур). Все последующие команды будут относиться к этому пути, пока мы не вызовем fillPath() или strokePath().

graphics.beginPath();

Команда moveTo(x, y) перемещает «перо» в указанную точку, не рисуя линию. Это отправная точка для первого треугольника.

graphics.moveTo(200, 200);

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

graphics.lineTo(300, 300);
graphics.lineTo(200, 400);
graphics.lineTo(200, 200); // Возвращаемся в начальную точку, чтобы замкнуть контур

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

Разделяем контур и рисуем вторую фигуру

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

graphics.moveTo(500, 200);

После этого мы снова рисуем линии, создавая второй треугольник в другом месте экрана.

graphics.lineTo(600, 300);
graphics.lineTo(500, 400);
graphics.lineTo(500, 200);

Таким образом, в одном объекте Graphics и одном вызове beginPath() можно описать несколько изолированных фигур, просто разделяя их moveTo().

Завершаем и отображаем путь

После того как все точки фигур описаны, нужно применить заливку. Метод fillPath() заливает цветом все замкнутые контуры, которые были определены внутри текущего пути (с момента последнего beginPath()).

graphics.fillPath();

После этого вызова нарисованные треугольники появятся на экране с заданным зелёным цветом. Важно: fillPath() также неявно завершает текущий путь. Для рисования новых фигур после этого нужно будет снова вызвать beginPath().

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

Используя moveTo() для разделения контуров, вы можете эффективно рисовать множество простых фигур одним объектом Graphics. Это полезно для создания сеток, фоновых узоров, составных интерфейсных элементов или геометрии уровня. Попробуйте поэкспериментировать: измените координаты, чтобы создать более сложные многоугольники; используйте strokePath() для обводки вместо заливки; или анимируйте точки, меняя их координаты в методе update(), чтобы фигуры двигались.