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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    create ()
    {
        const line = new Phaser.Geom.Line(100, 500, 700, 100);

        const graphics = this.add.graphics({ lineStyle: { width: 4, color: 0xaa00aa } });

        graphics.strokeLineShape(line);
    }
}

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

const game = new Phaser.Game(config);

Создание объекта линии

Вся работа с линиями в Phaser начинается с создания объекта Phaser.Geom.Line. Этот объект является контейнером для данных о линии — её начальной и конечной точках.

Конструктор принимает четыре аргумента: координаты X и Y начальной точки, а затем координаты X и Y конечной точки. В нашем примере линия начинается в точке (100, 500) и заканчивается в точке (700, 100).

const line = new Phaser.Geom.Line(100, 500, 700, 100);

Важно помнить, что на этом этапе линия является лишь набором чисел в памяти. Чтобы увидеть её на экране, необходима отрисовка с помощью графического контекста.

Настройка графического контекста

Для рисования примитивов в Phaser используется объект Graphics. Он выступает в роли холста, на котором можно рисовать линии, фигуры и заливки, используя заданные стили.

Мы создаём этот объект через this.add.graphics(), передавая в него объект конфигурации. Ключевой параметр lineStyle определяет, как будут выглядеть все последующие нарисованные линии: их толщину (width) и цвет (color). Цвет задаётся в шестнадцатеричном формате (0xRRGGBB).

const graphics = this.add.graphics({ lineStyle: { width: 4, color: 0xaa00aa } });

После этой настройки объект graphics готов к рисованию линий с фиолетовым цветом и толщиной в 4 пикселя.

Отрисовка линии на сцене

Финальный шаг — передать созданный ранее геометрический объект line в метод отрисовки графического контекста. Метод graphics.strokeLineShape() принимает объект линии (или любой другой объект, совместимый с интерфейсом Line, например, результат вычислений) и рисует его на сцене, используя установленный ранее стиль.

graphics.strokeLineShape(line);

Именно этот вызов приводит к визуализации данных. Объект Graphics берёт координаты из Phaser.Geom.Line и рисует отрезок между двумя точками. Изменяя координаты линии после её отрисовки, вы не увидите изменений на экране — для этого нужно вызвать метод отрисовки снова, предварительно возможно очистив старые рисунки с помощью graphics.clear().

Конфигурация игры и сцены

Весь описанный код выполняется внутри метода create() сцены (Scene). Это стандартный для Phaser жизненный цикл: метод create() вызывается один раз при инициализации сцены и идеально подходит для начальной настройки графики.

Сама игра инициализируется с помощью объекта конфигурации, который передаётся в конструктор Phaser.Game. В конфиге задаются базовые параметры, такие как размер холста и ссылка на используемый класс сцены.

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

const game = new Phaser.Game(config);

Ключ parent указывает ID HTML-элемента, в который будет встроен canvas игры. Если элемента с таким ID нет, он будет создан автоматически в теле документа.

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

Вы освоили базовый принцип создания и отрисовки статических линий в Phaser. Этот механизм — основа для более сложной геометрии. Для экспериментов попробуйте

  1. Анимировать линию, меняя координаты её конечной точки в методе update() и перерисовывая её каждый кадр
  2. Нарисовать не одну, а сетку из множества линий, используя циклы
  3. Создать линию между позицией курсора мыши и центром экрана, чтобы получить динамический луч или прицел