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

Работа с геометрией — неотъемлемая часть игровой разработки. В Phaser объекты геометрии, такие как `Phaser.Geom.Circle`, предоставляют набор готовых свойств, которые значительно упрощают расчёты для отрисовки, физики или проверки столкновений. В этой статье мы разберёмся, как использовать свойства `x`, `y`, `radius`, `diameter`, `left`, `top` и другие, чтобы не вычислять их вручную каждый раз, а сосредоточиться на игровой логике.

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    create ()
    {
        const circle = new Phaser.Geom.Circle(400, 300, 100);

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

        graphics.lineStyle(1, 0x00ff00);
        graphics.lineBetween(circle.x, circle.y, circle.x + circle.radius, circle.y);

        graphics.strokeRect(circle.left, circle.top, circle.diameter, circle.diameter);
    }
}

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

const game = new Phaser.Game(config);

Создание круга и его базовые свойства

Класс Phaser.Geom.Circle принимает три аргумента при создании: координаты центра по осям X и Y, а также радиус. Эти значения сразу становятся доступны как свойства объекта.

const circle = new Phaser.Geom.Circle(400, 300, 100);

После создания круг уже содержит свойства circle.x, circle.y и circle.radius. Их можно как читать, так и изменять, что делает объект очень гибким.

Визуализация с помощью Graphics

Чтобы увидеть наш круг на сцене, используем объект Graphics. Сначала задаём стиль линии и рисуем контур круга, передав сам объект circle в метод strokeCircleShape.

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

Теперь на сцене отобразится красный круг. Обратите внимание: Graphics работает с координатами сцены, а круг — это просто математический объект, содержащий данные.

Использование диаметра и производных свойств

Одно из ключевых удобств — автоматически вычисляемые свойства. circle.diameter всегда равен radius * 2. Это избавляет от ручных расчётов.

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

graphics.lineStyle(1, 0x00ff00);
graphics.lineBetween(circle.x, circle.y, circle.x + circle.radius, circle.y);

Свойства для ограничивающего прямоугольника

Часто нужно получить прямоугольник, в который вписан круг (bounding box). Для этого у круга есть свойства left, top, right и bottom. circle.left вычисляется как x - radius, а circle.top как y - radius.

Используем их, чтобы нарисовать зелёный ограничивающий квадрат. Обратите внимание, что для ширины и высоты мы используем circle.diameter.

graphics.strokeRect(circle.left, circle.top, circle.diameter, circle.diameter);

Таким образом, мы получили описанный квадрат, не производя ни одного вычисления вручную. Эти свойства незаменимы при проверке грубых столкновений или выравнивании объектов.

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

Свойства геометрических объектов в Phaser — это мощный инструмент для написания чистого и эффективного кода. Они избавляют разработчика от рутины и потенциальных ошибок в расчётах. Попробуйте поэкспериментировать: анимируйте круг, меняя его radius и наблюдая, как автоматически обновляются diameter и left. Или создайте простую систему столкновений, используя circle.right и circle.bottom для проверки выхода за границы экрана.