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

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

Визуальный интерфейт, меню, диалоговые окна или просто декоративные элементы — часто требуют фонов с закруглёнными углами. Рисовать такие фигуры вручную сложно. Класс `Graphics` в Phaser 3 предоставляет для этого удобный метод `fillRoundedRect()`. Эта статья покажет, как им пользоваться для создания прямоугольников как с равномерными, так и с разными радиусами скругления для каждого угла. Это базовый, но мощный инструмент для UI и визуального оформления вашей игры.

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    graphics;

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

        this.graphics.fillStyle(0xffff00, 1);

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

        this.graphics.fillStyle(0xff00ff, 1);

        //  Using an object to define a different radius per corner
        this.graphics.fillRoundedRect(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);

Подготовка Graphics-объекта

Перед тем как рисовать, нужно создать объект Graphics. Он выступает в роли холста для векторных примитивов. Также необходимо задать цвет и прозрачность заливки с помощью fillStyle().

this.graphics = this.add.graphics();
this.graphics.fillStyle(0xffff00, 1);

В этом примере создаётся объект graphics и устанавливается стиль заливки — ярко-жёлтый цвет (0xffff00) с полной непрозрачностью (альфа-канал `1`).

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

Самый простой способ — указать один радиус скругления для всех четырёх углов. Метод fillRoundedRect() принимает координаты X и Y левого верхнего угла, ширину, высоту и радиус скругления.

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

Эта строка кода нарисует прямоугольник размером 300x200 пикселей, сдвинутый на 32 пикселя от левого и верхнего края. Все его углы будут скруглены с радиусом 32 пикселя.

Прямоугольник с разными радиусами для углов

Для более сложных и гибких дизайнов можно задать уникальный радиус для каждого угла. Вместо числа в последний параметр передаётся объект с ключами tl (top-left — верхний левый), tr (top-right — верхний правый), bl (bottom-left — нижний левый), br (bottom-right — нижний правый).

this.graphics.fillRoundedRect(360, 240, 400, 300, { tl: 64, tr: 22, bl: 12, br: 0 });

Здесь рисуется второй прямоугольник. У него: очень скруглённый левый верхний угол (64), умеренно скруглённый правый верхний (22), слабо скруглённый левый нижний (12) и абсолютно прямой правый нижний угол (`0`). Это позволяет создавать сложные несимметричные формы.

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

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

class Example extends Phaser.Scene {
    graphics;
    create () {
        this.graphics = this.add.graphics();
        this.graphics.fillStyle(0xffff00, 1);
        this.graphics.fillRoundedRect(32, 32, 300, 200, 32);

        this.graphics.fillStyle(0xff00ff, 1);
        this.graphics.fillRoundedRect(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.Game с этой конфигурацией автоматически запустится сцена Example, и на экране появятся два скруглённых прямоугольника.

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

Метод fillRoundedRect() — это простой и эффективный способ добавить в игру элементы с современным скруглённым дизайном. Для экспериментов попробуйте анимировать радиус скругления, изменяя его значения в игровом цикле update(), или комбинируйте несколько прямоугольников для создания сложных UI-компонентов, таких как панели здоровья с закруглёнными концами.