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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    graphics;

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

        const color = 0xffff00;
        const thickness = 2;
        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);

Создание графического объекта

Работа с примитивами в Phaser начинается с создания специального объекта Graphics. Этот объект является контейнером для рисования линий, фигур и заливок напрямую на канвасе или WebGL-слое. Он предоставляет набор методов для векторного рисования.

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

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

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

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

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

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

Разберем параметры: - thickness: Толщина линии в пикселях. В нашем случае — 2 пикселя. - color: Цвет линии в шестнадцатеричном формате. Значение 0xffff00 соответствует желтому цвету. - alpha: Прозрачность линии от 0 (полностью прозрачная) до 1 (полностью непрозрачная). Установка в 1 делает линию полностью видимой.

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

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

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

Метод принимает четыре аргумента: 1. `x`: Координата X верхнего левого угла прямоугольника (32 пикселя от левого края сцены). 2. `y`: Координата Y верхнего левого угла прямоугольника (32 пикселя от верхнего края сцены). 3. width: Ширина прямоугольника (256 пикселей). 4. height: Высота прямоугольника (256 пикселей).

В результате на сцене появится желтый квадрат с рамкой толщиной в 2 пикселя.

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

Весь код рисования размещается внутри метода create класса сцены. Этот метод автоматически вызывается фреймворком Phaser после инициализации сцены. Чтобы игра заработала, необходимо создать конфигурационный объект и инстанс игры.

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

const game = new Phaser.Game(config);

Ключевые параметры конфигурации: - width и height: Устанавливают размер игрового холста. - type: Задает рендерер. Phaser.CANVAS использует Canvas API, Phaser.WEBGL — WebGL. Можно указать Phaser.AUTO для автоматического выбора. - parent: ID HTML-элемента, в который будет встроен канвас игры. - scene: Класс основной сцены, которая будет запущена сразу после создания игры.

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

Метод strokeRect — это простой и мощный инструмент для быстрого добавления прямоугольных контуров в вашу игру. Он идеально подходит для визуализации границ зон, отладки столкновений или создания минималистичного интерфейса. Для экспериментов попробуйте: 1. Изменить параметры в lineStyle (например, толщину на 10 или альфу на 0.5). 2. Нарисовать несколько прямоугольников с разными стилями линий, вызывая lineStyle перед каждым strokeRect. 3. Использовать этот метод внутри игрового цикла update, чтобы рамка следовала за спрайтом игрока, наглядно демонстрируя его хитбокс.