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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    graphics;

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

        this.graphics.lineStyle(2, 0xffff00, 1);

        //  32px radius on the corners
        this.graphics.strokeRoundedRect(32, 32, 300, 200, 32);

        this.graphics.lineStyle(4, 0xff00ff, 1);

        //  Using an object to define a different radius per corner
        this.graphics.strokeRoundedRect(360, 240, 400, 300, { tl: 64, tr: 22, bl: 12, br: 0 });
    }
}

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

const game = new Phaser.Game(config);

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

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

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

Созданный объект сохраняется в свойстве класса, чтобы к нему можно было обращаться позже. На этом этапе объект готов, но у него еще нет стиля линии для рисования.

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

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

this.graphics.lineStyle(2, 0xffff00, 1);

* Первый аргумент (`2`) — толщина линии в пикселях. * Второй аргумент (0xffff00) — цвет линии в шестнадцатеричном формате (в данном случае желтый). * Третий аргумент (`1`) — альфа-канал (прозрачность), где 1 — полностью непрозрачный.

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

Базовый способ нарисовать скругленный прямоугольник — использовать метод strokeRoundedRect с числовым значением радиуса. Этот радиус будет единым для всех четырех углов.

this.graphics.strokeRoundedRect(32, 32, 300, 200, 32);

* Первые два аргумента (32, 32) — координаты X и Y верхнего левого угла прямоугольника. * Следующие два аргумента (300, 200) — ширина и высота прямоугольника. * Пятый аргумент (32) — радиус скругления для всех углов. Чем больше значение, тем более плавным и округлым будет угол.

Изменение стиля и индивидуальная настройка углов

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

this.graphics.lineStyle(4, 0xff00ff, 1);
this.graphics.strokeRoundedRect(360, 240, 400, 300, { tl: 64, tr: 22, bl: 12, br: 0 });

Здесь мы сначала меняем стиль на более толстую (4px) линию пурпурного цвета (0xff00ff). Затем рисуем прямоугольник, где каждый угол задан отдельно: * tl (top-left) — верхний левый угол, радиус 64. * tr (top-right) — верхний правый угол, радиус 22. * bl (bottom-left) — нижний левый угол, радиус 12. * br (bottom-right) — нижний правый угол, радиус 0 (прямой угол).

Использование объекта для настройки позволяет создавать асимметричные и динамичные формы.

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

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