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

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

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

Живой запуск

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

Исходный код


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

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

        graphics.lineBetween(100, 100, 600, 500);
    }
}

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

const game = new Phaser.Game(config);

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

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

const graphics = this.add.graphics();

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

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

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

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

Метод lineStyle принимает три основных аргумента: 1. **Толщина линии (width)**: В нашем примере это 128 пикселей. Это значение определяет, насколько толстым будет штрих. 2. **Цвет (color)**: Задается в шестнадцатеричном формате. 0x00ff00 — это чистый зеленый цвет. 3. **Прозрачность (alpha)**: Значение от 0 (полностью прозрачно) до 1 (полностью непрозрачно). У нас установлена максимальная непрозрачность.

Рисование линии между точками

Сам процесс рисования отрезка между двумя точками выполняется одной командой.

graphics.lineBetween(100, 100, 600, 500);

Метод lineBetween рисует линию с текущим стилем от начальной точки (x1, y1) к конечной (x2, y2). В примере линия пойдет от координат (100, 100) до (600, 500). Координаты отсчитываются от верхнего левого угла сцены.

После вызова этого метода линия немедленно отрисовывается на холсте graphics с учетом всех заданных ранее параметров стиля.

Конфигурация игры и запуск

Чтобы пример заработал, нам нужна базовая конфигурация игры Phaser и объявление сцены.

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

const game = new Phaser.Game(config);

В объекте config мы задаем размеры игрового поля (800x600), указываем Phaser автоматически выбирать рендерер (WebGL или Canvas), определяем родительский HTML-элемент и передаем класс нашей сцены Example. Создание экземпляра new Phaser.Game(config) запускает игровой цикл.

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

Всего три строчки кода — и вы можете рисовать векторные линии любого стиля прямо в игре. Это мощный инструмент для отладки (например, визуализации hitbox), создания простых эффектов или динамических элементов интерфейса. Для экспериментов попробуйте: 1. Анимировать конечные точки линии, привязав их к положению мыши или спрайта. 2. Изменять цвет (color) или толщину (width) линии в реальном времени в ответ на игровые события. 3. Нарисовать несколько линий разными стилями на одном объекте graphics.