О чем этот пример
При разработке игр часто возникает необходимость в грубых проверках столкновений или определении области для отрисовки UI. Функция `Phaser.Geom.Circle.GetBounds` позволяет мгновенно получить выровненный по осям ограничивающий прямоугольник (AABB) для любой окружности. Это базовый, но мощный инструмент для работы с геометрией, который избавляет от необходимости вручную вычислять координаты углов прямоугольника, описанного вокруг круга.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
class Example extends Phaser.Scene
{
a = 0;
graphics;
bounds;
circle;
create ()
{
this.graphics = this.add.graphics({ lineStyle: { width: 2, color: 0x0000ff }, fillStyle: { color: 0x00ff00 }});
this.circle = new Phaser.Geom.Circle(400, 300, 50);
// if we omit the out parameter, we get a new Rectangle instance
this.bounds = Phaser.Geom.Circle.GetBounds(this.circle);
}
update ()
{
this.a += 0.01;
if (this.a > Math.PI * 2)
{
this.a -= Math.PI * 2;
}
this.circle.x = 400 - Math.cos(this.a) * 350;
this.circle.y = 300 - Math.sin(this.a * 2) * 250;
this.circle.radius = Math.sin(this.a) * Math.sin(this.a) * 50;
// or we can supply a Rectangle instance to modify
Phaser.Geom.Circle.GetBounds(this.circle, this.bounds);
this.graphics.clear();
this.graphics.fillCircleShape(this.circle);
this.graphics.strokeRectShape(this.bounds);
}
}
const config = {
width: 800,
height: 600,
type: Phaser.AUTO,
parent: 'phaser-example',
scene: Example
};
const game = new Phaser.Game(config);
Что делает метод GetBounds?
Phaser.Geom.Circle.GetBounds — это статический метод класса Phaser.Geom.Circle. Его задача — вычислить минимальный прямоугольник, стороны которого параллельны осям координат (Axis-Aligned Bounding Box), который полностью содержит заданную окружность.
Метод принимает два аргумента: исходный круг (circle) и опциональный объект прямоугольника (out). Если out не передан, метод создаст и вернёт новый экземпляр Phaser.Geom.Rectangle. Если же вы передадите существующий прямоугольник, метод обновит его координаты и размеры. Это полезно для оптимизации, чтобы избегать создания новых объектов в каждом кадре.
// Создаём новый прямоугольник с границами круга
let newBounds = Phaser.Geom.Circle.GetBounds(circle);
// Обновляем существующий прямоугольник
let existingRect = new Phaser.Geom.Rectangle(0, 0, 0, 0);
Phaser.Geom.Circle.GetBounds(circle, existingRect);Разбор примера: Анимация круга и его границ
В предоставленном примере создаётся круг, который движется по сложной траектории и пульсирует. В каждом кадре для этого круга вычисляется и отрисовывается его ограничивающий прямоугольник.
В методе create() инициализируются основные объекты: graphics для рисования, circle и bounds. Первоначальные границы вычисляются один раз для стартовой позиции круга.
create ()
{
this.graphics = this.add.graphics({ lineStyle: { width: 2, color: 0x0000ff }, fillStyle: { color: 0x00ff00 }});
this.circle = new Phaser.Geom.Circle(400, 300, 50);
this.bounds = Phaser.Geom.Circle.GetBounds(this.circle);
}В update() круг анимируется: меняется его позиция и радиус. Ключевой момент — перерасчёт границ с передачей существующего объекта this.bounds. Это предотвращает утечку памяти из-за создания новых объектов Rectangle 60 раз в секунду.
Phaser.Geom.Circle.GetBounds(this.circle, this.bounds);После вычислений графика очищается, и заново рисуются круг и прямоугольник его границ.
this.graphics.clear();
this.graphics.fillCircleShape(this.circle);
this.graphics.strokeRectShape(this.bounds);Практическое применение в играх
Основная сфера применения GetBounds — это грубая (broad-phase) проверка столкновений. Прежде чем запускать точные, ресурсоёмкие вычисления пересечения форм, можно быстро проверить, пересекаются ли их ограничивающие прямоугольники. Если прямоугольники не пересекаются, то и фигуры гарантированно не сталкиваются, что позволяет сэкономить вычислительную мощность.
// Пример грубой проверки столкновения двух кругов
let boundsA = Phaser.Geom.Circle.GetBounds(circleA);
let boundsB = Phaser.Geom.Circle.GetBounds(circleB);
if (Phaser.Geom.Rectangle.Overlaps(boundsA, boundsB))
{
// Прямоугольники пересеклись, нужна точная проверка кругов
if (Phaser.Geom.Circle.Overlaps(circleA, circleB))
{
// Столкновение подтверждено
}
}Также этот метод незаменим для позиционирования элементов интерфейса относительно игровых объектов или для кадрирования камеры на группе объектов, вычисляя общие границы.
Важные нюансы и производительность
1. **Axis-Aligned**: Полученный прямоугольник всегда выровнен по осям X и Y. Если ваш круг вращается (как спрайт), его визуальные границы могут выходить за рамки этого AABB. Этот метод работает с геометрической формой, а не с текстурой.
2. **Оптимизация через параметр out**: Всегда передавайте существующий объект Rectangle в качестве второго аргумента, если вам нужно обновлять границы в цикле (например, в update()). Это классический приём для избежания "сборки мусора".
3. **Только для чтения**: Метод только вычисляет границы. Изменение возвращённого объекта Rectangle не повлияет на исходный круг.
// ПЛОХО: Создаёт новый объект в каждом кадре (медленно)
update() {
let tempBounds = Phaser.Geom.Circle.GetBounds(this.circle);
// ... использование
}
// ХОРОШО: Переиспользует один объект (быстро)
create() {
this.reusableBounds = new Phaser.Geom.Rectangle();
}
update() {
Phaser.Geom.Circle.GetBounds(this.circle, this.reusableBounds);
// ... использование
}Что попробовать дальше
Phaser.Geom.Circle.GetBounds — это простой, но фундаментальный метод для работы с геометрией. Он предоставляет быстрый способ получить AABB для круга, что является первым шагом в оптимизации физики, отсечения невидимых объектов и управления камерой. Для экспериментов попробуйте: использовать вычисленные границы для автоматического ресайза игрового поля под динамические объекты; реализовать систему квадродерева (quadtree) для проверки столкновений множества объектов, используя их AABB на первом этапе; или привязать к этим границам элементы интерфейса, например, полоски здоровья над подвижными юнитами.