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

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

Отображение простых фигур — фундаментальный навык в разработке игр, будь то отладка зоны поражения, создание интерфейса или визуализация спецэффектов. В Phaser для этого есть мощный и легковесный объект `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, 300);
        const radius = 128;

        this.graphics.strokeCircle(a.x, a.y, radius);
    }
}

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

const game = new Phaser.Game(config);

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

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

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

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

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

Чтобы нарисованная фигура была видима, необходимо задать стиль линии: её толщину, цвет и прозрачность. Для этого используется метод lineStyle().

- **Толщина (thickness)**: задаётся в пикселях. - **Цвет (color)**: указывается в шестнадцатеричном формате (hex). - **Альфа (alpha)**: значение от 0 (полная прозрачность) до 1 (полная непрозрачность).

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

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

Определение позиции и рисование круга

Теперь, когда стиль задан, можно приступить к рисованию. Сначала определяем центр будущего круга. Удобно использовать Phaser.Math.Vector2 для представления точки, но можно обойтись и простыми числами.

Ключевой метод — strokeCircle(). Он рисует только контур (обводку) круга, не заполняя его. Метод принимает три аргумента: координаты X и Y центра и радиус.

const a = new Phaser.Math.Vector2(400, 300);
const radius = 128;

this.graphics.strokeCircle(a.x, a.y, radius);

Если бы мы хотели залить круг цветом, нам понадобился бы метод fillCircle(), которому предшествовал бы вызов fillStyle().

Полный код сцены и конфигурация игры

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

Обратите внимание, что в конфиге указан type: Phaser.CANVAS. Объект Graphics также отлично работает и в режиме Phaser.WEBGL.

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, 300);
        const radius = 128;
        this.graphics.strokeCircle(a.x, a.y, radius);
    }
}

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

const game = new Phaser.Game(config);

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

Вы освоили базовый принцип рисования геометрических фигур в Phaser с помощью объекта Graphics. Для экспериментов попробуйте: нарисовать несколько кругов разного цвета в одном Graphics объекте, анимировать радиус или положение круга в методе update(), или использовать метод fillCircle() для создания залитых кругов. Это открывает путь к созданию динамических индикаторов, областей-триггеров и простых частиц прямо в коде, без использования текстур.