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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('metal', 'assets/textures/alien-metal.jpg');
    }

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

        graphics.lineStyle(16, 0x00ff00, 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.strokePath();
    }
}

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

const game = new Phaser.Game(config);

Создаем холст для рисования

Любое рисование в Phaser начинается с создания объекта Graphics. Этот объект является игровым объектом (Game Object) и может быть добавлен в сцену, как спрайт или текст. Он служит холстом, на который мы наносим векторные примитивы.

const graphics = this.add.graphics();

После создания объект graphics автоматически добавляется в список отображения сцены. Теперь мы можем настраивать стили рисования и определять фигуры.

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

Перед тем как рисовать, нужно определить, как будет выглядеть наш контур. Для этого используется метод lineStyle. Он задает толщину, цвет и прозрачность линии.

graphics.lineStyle(16, 0x00ff00, 1);

В этом примере: * 16 — толщина линии в пикселях. * 0x00ff00 — цвет в шестнадцатеричном формате (в данном случае ярко-зеленый). * `1` — альфа-канал (непрозрачность), где 1 — полностью непрозрачная линия, а 0 — полностью прозрачная. Все последующие операции рисования контуров будут использовать этот стиль, пока он не будет изменен новым вызовом lineStyle.

Построение векторного пути

Векторный путь — это последовательность точек и команд. Чтобы начать его определение, вызываем beginPath. Это сбрасывает текущий путь и позволяет начать построение нового.

graphics.beginPath();

Далее мы перемещаем "виртуальное перо" в начальную точку с помощью moveTo. Эта команда не рисует линию, а только устанавливает начало.

graphics.moveTo(400, 100);

Затем командами lineTo мы рисуем отрезки от текущей позиции пера к указанным координатам. Каждый вызов lineTo становится новой точкой пути и рисует линию от предыдущей точки.

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

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

graphics.closePath();

Важно понимать: на этом этапе фигура еще не отрисована на экране. Мы только определили её математическое описание.

Визуализация контура

Чтобы увидеть результат, необходимо отрисовать ("прочертить") заданный путь с помощью метода strokePath.

graphics.strokePath();

Этот метод берет текущий построенный путь и применяет к нему активный стиль линии (lineStyle), выводя итоговое изображение на холст Graphics. После вызова strokePath путь сбрасывается, и для рисования новой фигуры нужно снова начать с beginPath.

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

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