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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    create ()
    {
        const rect = new Phaser.Geom.Rectangle(0, 0, 160, 120);

        rect.setPosition(240, 180);

        const graphics = this.add.graphics({ lineStyle: { color: 0xff0000 } });
        graphics.strokeRectShape(rect);

        // move right by width
        rect.x += rect.width;

        graphics.lineStyle(1, 0x00ff00);
        graphics.strokeRectShape(rect);

        // move down by height
        rect.y += rect.height;

        graphics.lineStyle(1, 0x0000ff);
        graphics.strokeRectShape(rect);
    }
}

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

const game = new Phaser.Game(config);

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

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

const rect = new Phaser.Geom.Rectangle(0, 0, 160, 120);

Эта строка создаёт экземпляр Phaser.Geom.Rectangle. Первые два аргумента (0, 0) — это координаты X и Y левого верхнего угла прямоугольника. Следующие два аргумента (160, 120) — его ширина и высота. На этом этапе прямоугольник существует только как математический объект в памяти, он ещё не отрисован на экране.

Задание позиции и первая отрисовка

Далее координаты прямоугольника изменяются с помощью метода setPosition.

rect.setPosition(240, 180);

Метод setPosition(x, y) перемещает левый верхний угол прямоугольника в указанные координаты. Теперь его центр будет находиться в точке (240 + 80, 180 + 60).

Чтобы увидеть прямоугольник, необходимо его нарисовать. Для этого используется объект Graphics.

const graphics = this.add.graphics({ lineStyle: { color: 0xff0000 } });
graphics.strokeRectShape(rect);

this.add.graphics() создаёт новый графический объект. Параметр lineStyle задаёт стиль линии: здесь это красный цвет (0xff0000). Метод strokeRectShape(rect) принимает наш геометрический объект и рисует его контур (заливки нет) согласно заданному стилю линии. На экране появится красный прямоугольник.

Изменение позиции через свойства и повторная отрисовка

Пример демонстрирует, как можно менять положение прямоугольника, напрямую изменяя его свойства `xиy`. Эти свойства доступны для чтения и записи.

rect.x += rect.width;

Эта операция увеличивает свойство `x` прямоугольника на значение его ширины. Таким образом, прямоугольник сместится вправо ровно на свою ширину.

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

graphics.lineStyle(1, 0x00ff00);
graphics.strokeRectShape(rect);

graphics.lineStyle(1, 0x00ff00) меняет стиль текущего графического объекта на зелёную линию. Последующий вызов strokeRectShape(rect) нарисует контур прямоугольника в его новой позиции зелёным цветом. На экране появится второй прямоугольник, смещённый вправо относительно первого.

Аналогичная операция выполняется для смещения по вертикали:

rect.y += rect.height;
graphics.lineStyle(1, 0x0000ff);
graphics.strokeRectShape(rect);

Теперь свойство `y` увеличивается на высоту прямоугольника, что приводит к смещению вниз. Перед отрисовкой стиль линии меняется на синий цвет. В итоге на экране будут видны три прямоугольника разного цвета, демонстрирующие исходную позицию, смещение вправо и смещение вниз.

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

Код завершается стандартной для Phaser 3 конфигурацией игры.

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

const game = new Phaser.Game(config);

В объекте config задаётся размер холста (800x600), графический рендерер (Phaser.AUTO выбирает WebGL или Canvas автоматически), ID HTML-элемента для встраивания и класс основной сцены. Создание экземпляра new Phaser.Game(config) инициализирует и запускает игровой цикл.

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

Этот пример наглядно показывает работу с геометрическими объектами как с данными: сначала задаются их параметры, а затем они передаются в системы отрисовки. Для экспериментов попробуйте: анимировать движение прямоугольника в цикле update(), изменять не только позицию, но и размер с помощью setSize(), или создать несколько прямоугольников для формирования простой сетки или паттерна. Понимание этих основ открывает путь к созданию собственных систем碰撞 (коллайдеров) и визуальных эффектов.