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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    graphics;

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

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

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

        this.graphics.strokeRect(32, 32, 256, 256);
    }
}

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

const game = new Phaser.Game(config);

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

Все рисование примитивов начинается с создания экземпляра Graphics. Этот объект является контейнером для команд рисования.

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

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

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

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

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

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

Здесь мы задаем три параметра: 1. thickness (толщина): Ширина линии в пикселях. В нашем примере она равна 4. 2. color (цвет): Числовое значение цвета в шестнадцатеричном формате (0x00ff00 — ярко-зеленый). 3. alpha (прозрачность): Значение от 0 (полностью прозрачно) до 1 (полностью непрозрачно). Установив alpha = 1, мы делаем линию полностью видимой.

Вызов this.graphics.lineStyle() применяет эти настройки ко всем последующим операциям рисования контуров для этого объекта Graphics.

Рисование прямоугольника (контур)

После настройки стиля можно приступать к рисованию. Для создания контура прямоугольника используется метод .strokeRect().

this.graphics.strokeRect(32, 32, 256, 256);

Этот метод принимает четыре аргумента: * **Первые два числа (32, 32)** — это координаты X и Y верхнего левого угла прямоугольника на сцене. * **Вторые два числа (256, 256)** — это ширина и высота прямоугольника.

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

Общая структура проекта

Весь код примера упакован в сцену Phaser и конфигурацию игры. Это стандартная структура для любого проекта на Phaser.

class Example extends Phaser.Scene
{
    graphics;

    create ()
    {
        // ... весь код рисования из примеров выше
    }
}

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

const game = new Phaser.Game(config);

1. Создается класс сцены Example, наследующий от Phaser.Scene. 2. В методе create() этой сцены выполняется наш код для создания графики. 3. Объект config определяет базовые настройки игры: размеры, тип рендерера (Phaser.CANVAS), контейнер на странице и главную сцену. 4. Инстанс new Phaser.Game(config) запускает игру с указанной конфигурацией.

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

Работа с Graphics и lineStyle — это фундамент для отрисовки кастомной векторной графики в Phaser. Вы можете использовать эти методы не только для отладки, но и для создания динамических интерфейсов, эффектов выделения или простой геометрии. **Идеи для экспериментов:** 1. Измените параметры в lineStyle: сделайте линию тоньше или толще, задайте другой цвет (например, красный 0xff0000), поиграйте с прозрачностью. 2. Попробуйте нарисовать не прямоугольник, а другие фигуры, например, круг с помощью .strokeCircle(x, y, radius). 3. Создайте несколько объектов Graphics с разными стилями линий и нарисуйте их в разных местах сцены.