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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    create ()
    {
        const graphics = this.add.graphics({ lineStyle: { width: 2, color: 0xaa0000 }, fillStyle: { color: 0x0000aa } });

        const rect = new Phaser.Geom.Rectangle();

        const square = new Phaser.Geom.Rectangle();

        this.input.on('pointermove', pointer =>
        {

            graphics.clear();

            rect.width = pointer.x;
            rect.height = pointer.y;

            const area = Phaser.Geom.Rectangle.Area(rect);

            square.width = square.height = Math.sqrt(area);

            graphics.fillRectShape(square);

            graphics.strokeRectShape(rect);

        });
    }
}

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

const game = new Phaser.Game(config);

Понимание сцены и настройки

Вся логика примера содержится в методе create() класса сцены, который выполняется один раз при её создании. Это стандартный подход в Phaser для начальной настройки объектов.

Конфигурация игры задаёт окно 800x600 пикселей и указывает, какую сцену использовать. Это базовый шаблон для любого проекта на Phaser.

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

const game = new Phaser.Game(config);

Создание объектов: Graphics и Rectangle

Для рисования в Phaser используется объект Graphics. В примере он создаётся с двумя стилями: красным для контура (lineStyle) и синим для заливки (fillStyle).

Затем создаются два пустых прямоугольника (Phaser.Geom.Rectangle). Исходно они имеют нулевые координаты и размеры. Важно, что это геометрические объекты, содержащие только данные (x, y, width, height), а не отображаемые спрайты.

const graphics = this.add.graphics({ lineStyle: { width: 2, color: 0xaa0000 }, fillStyle: { color: 0x0000aa } });

const rect = new Phaser.Geom.Rectangle();
const square = new Phaser.Geom.Rectangle();

Обработка движения мыши и логика отрисовки

Ключевая часть — обработчик события pointermove. Он срабатывает каждый раз, когда игрок двигает мышью по холсту.

Первым делом холст очищается вызовом graphics.clear(). Без этого все предыдущие кадры отрисовки оставались бы на экране, создавая "шлейф".

Затем размеры первого прямоугольника (rect) устанавливаются равными текущим координатам курсора. Это динамически меняющаяся фигура.

this.input.on('pointermove', pointer => {
    graphics.clear();
    rect.width = pointer.x;
    rect.height = pointer.y;
});

Вычисление площади и её визуализация

Здесь происходит магия. Статический метод Phaser.Geom.Rectangle.Area() принимает объект прямоугольника и возвращает его площадь (width * height).

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

Квадрат отрисовывается залитым синим цветом (fillRectShape), а исходный прямоугольник — красным контуром (strokeRectShape). Таким образом, мы визуально сравниваем две разные фигуры с одинаковой площадью.

const area = Phaser.Geom.Rectangle.Area(rect);
square.width = square.height = Math.sqrt(area);
graphics.fillRectShape(square);
graphics.strokeRectShape(rect);

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

Этот пример наглядно демонстрирует, как использовать геометрический модуль Phaser для вычислений и визуализации. Метод Area() — лишь одна из многих полезных функций в Phaser.Geom.Rectangle. Для экспериментов попробуйте изменить пример: выводить числовое значение площади на экран с помощью текстового объекта, вычислять периметр или проверять пересечение (Overlaps) динамического прямоугольника с другими статическими фигурами на сцене. Это отличная база для создания систем выделения объектов или расчёта игровых зон.