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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    graphics;
    rectangle;
    circle;
    moveShape;

    create ()
    {
        this.graphics = this.add.graphics();

        this.rectangle = new Phaser.Geom.Rectangle(200, 150, 300, 200);
        this.circle = new Phaser.Geom.Circle(300, 400, 60);

        this.moveShape = this.circle;

        this.input.on('pointerup', event =>
        {

            if (this.moveShape === this.circle)
            {
                this.moveShape = this.rectangle;
            }
            else
            {
                this.moveShape = this.circle;
            }

        });

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

            this.moveShape.x = pointer.x;
            this.moveShape.y = pointer.y;

        });
    }

    update ()
    {
        this.graphics.clear();

        if (Phaser.Geom.Intersects.CircleToRectangle(this.circle, this.rectangle))
        {
            this.graphics.lineStyle(2, 0xff0000);
        }
        else
        {
            this.graphics.lineStyle(2, 0xffff00);
        }

        this.graphics.strokeRectShape(this.rectangle);
        this.graphics.strokeCircleShape(this.circle);
    }
}

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

const game = new Phaser.Game(config);

Подготовка сцены и геометрических объектов

В методе create() мы создаем все необходимые объекты. Сначала нам понадобится объект Graphics для рисования фигур на экране. Затем мы создаем два геометрических объекта: прямоугольник (Phaser.Geom.Rectangle) и круг (Phaser.Geom.Circle). Их координаты и размеры задаются в конструкторе. Также мы объявляем переменную moveShape, которая будет указывать, какую из двух фигур мы будем перемещать курсором мыши.

create ()
{
    this.graphics = this.add.graphics();

    this.rectangle = new Phaser.Geom.Rectangle(200, 150, 300, 200);
    this.circle = new Phaser.Geom.Circle(300, 400, 60);

    this.moveShape = this.circle;
}

Обработка ввода для перемещения фигур

Чтобы сделать демонстрацию интерактивной, мы настраиваем обработку событий мыши. При движении указателя мы обновляем координаты `xиyактивной фигуры, хранящейся вmoveShape`. По клику мыши мы переключаем, какая фигура является активной — круг или прямоугольник. Это позволяет тестировать пересечения с разных сторон.

this.input.on('pointerup', event =>
{
    if (this.moveShape === this.circle)
    {
        this.moveShape = this.rectangle;
    }
    else
    {
        this.moveShape = this.circle;
    }
});

this.input.on('pointermove', pointer =>
{
    this.moveShape.x = pointer.x;
    this.moveShape.y = pointer.y;
});

Проверка пересечения и визуализация

В методе update() происходит вся логика проверки и отрисовки. Сначала мы очищаем холст Graphics от предыдущего кадра. Затем с помощью статического метода Phaser.Geom.Intersects.CircleToRectangle() проверяем, пересекаются ли круг и прямоугольник. Этот метод принимает два объекта в качестве аргументов и возвращает true или false. В зависимости от результата мы меняем цвет обводки: красный для пересечения, желтый — для его отсутствия. В конце мы рисуем обе фигуры с текущим стилем линии.

update ()
{
    this.graphics.clear();

    if (Phaser.Geom.Intersects.CircleToRectangle(this.circle, this.rectangle))
    {
        this.graphics.lineStyle(2, 0xff0000);
    }
    else
    {
        this.graphics.lineStyle(2, 0xffff00);
    }

    this.graphics.strokeRectShape(this.rectangle);
    this.graphics.strokeCircleShape(this.circle);
}

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

Это стандартная конфигурация для приложения Phaser. Мы задаем размеры холста, указываем тип рендерера (в данном случае Phaser.AUTO позволяет движку выбрать WebGL или Canvas автоматически) и передаем класс нашей сцены. После этого создается экземпляр игры, который запускает весь цикл.

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

const game = new Phaser.Game(config);

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

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