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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    create ()
    {
        const rect = new Phaser.Geom.Rectangle(250, 200, 300, 200);

        const graphics = this.add.graphics({ fillStyle: { color: 0x0000ff } });

        graphics.fillRectShape(rect);
    }
}

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

const game = new Phaser.Game(config);

Инициализация сцены и создание прямоугольника

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

Первым делом мы создаем объект прямоугольника. Класс Phaser.Geom.Rectangle принимает четыре аргумента: координаты X и Y его левого верхнего угла, ширину и высоту.

const rect = new Phaser.Geom.Rectangle(250, 200, 300, 200);

В данном примере мы создаем прямоугольник, расположенный в точке (250, 200) с размером 300x200 пикселей. Важно понимать, что на этом этапе прямоугольник — это просто математический объект, набор свойств. Он еще не отображается на экране и не имеет физического тела.

Создание графического контекста для отрисовки

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

Мы создаем его через this.add.graphics(). В конструктор можно передать объект настроек, чтобы сразу задать стиль рисования.

const graphics = this.add.graphics({ fillStyle: { color: 0x0000ff } });

Здесь мы указываем стиль заливки (fillStyle) синим цветом (шестнадцатеричный код 0x0000ff). Можно также задать стиль линий (lineStyle), если нужно рисовать контур.

Отрисовка фигуры на холсте Graphics

Теперь, имея и геометрический объект, и холст для рисования, мы можем их связать. Для этого у объекта graphics есть множество методов, начинающихся с fillRect. Нас интересует метод fillRectShape(), который принимает в качестве аргумента объект геометрии прямоугольника.

graphics.fillRectShape(rect);

Этот метод берет координаты и размеры из объекта rect и рисует на холсте graphics залитый прямоугольник, используя ранее заданный синий цвет. После выполнения этой строки прямоугольник появится на экране игры.

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

Код сцены — это лишь часть приложения. Чтобы игра запустилась, необходимо создать конфигурационный объект и инстанс класса Phaser.Game.

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

const game = new Phaser.Game(config);

Конфиг задает базовые параметры: - width и height — размеры игрового холста. - type — рендерер (WebGL или Canvas). Phaser.AUTO позволяет движку выбрать лучший из доступных. - parent — ID HTML-элемента, в который будет встроен холст. - scene — класс главной сцены, которая будет запущена сразу. Передача класса Example инициирует создание экземпляра этой сцены.

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

Вы успешно создали и отрисовали свою первую геометрическую фигуру в Phaser. Главный вывод: движок четко разделяет логику (объект Phaser.Geom.Rectangle) и представление (объект Graphics). Это позволяет, например, использовать один и тот же прямоугольник для расчета столкновений и для его отрисовки в разных стилях. Для экспериментов попробуйте: 1. Изменить параметры прямоугольника (положение, размер) и цвет заливки. 2. Использовать метод strokeRectShape() у объекта graphics, предварительно задав lineStyle, чтобы нарисовать только контур. 3. Создать несколько объектов Graphics с разными стилями и отрисовать один и тот же объект rect на каждом, получив эффект многослойности.