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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    a = 0;
    graphics;
    point;
    rect;

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

        this.rect = new Phaser.Geom.Rectangle(250, 200, 300, 200);
        this.point = new Phaser.Geom.Circle(0, 0, 10);
    }

    update ()
    {
        this.a += 0.015;

        if (this.a > Math.PI * 2)
        {
            this.a -= Math.PI * 2;
        }

        this.point.x = 400 - Math.cos(this.a) * 400;
        this.point.y = 300 - Math.sin(this.a * 2) * 300;

        this.graphics.clear();
        this.graphics.strokeRectShape(this.rect);

        if (Phaser.Geom.Rectangle.ContainsPoint(this.rect, this.point))
        {
            this.graphics.fillStyle(0xaa0000);
        }
        else
        {
            this.graphics.fillStyle(0x0000aa);
        }

        this.graphics.fillCircleShape(this.point);
    }
}

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

const game = new Phaser.Game(config);

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

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

Графический объект (this.graphics) настраивается с двумя стилями: один для контура (lineStyle), другой для заливки (fillStyle). Изначально заданный стиль заливки будет переопределяться в зависимости от условий.

Создаются две геометрические фигуры: прямоугольник (this.rect) и круг (this.point). Круг здесь используется для визуального представления проверяемой точки, а его радиус просто задает размер отрисовываемой точки на экране. Для самой проверки важны только координаты центра круга (свойства `xиy`).

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

this.rect = new Phaser.Geom.Rectangle(250, 200, 300, 200);
this.point = new Phaser.Geom.Circle(0, 0, 10);

Анимация движения точки

Метод update() отвечает за анимацию и логику каждого кадра. Сначала обновляется угол this.a, который управляет движением точки по сложной траектории (Лиссажу).

Координаты центра круга (this.point) вычисляются на основе тригонометрических функций от этого угла, заставляя точку двигаться по экрану.

Перед каждой перерисовкой необходимо очистить холст графического объекта с помощью метода this.graphics.clear(). После этого отрисовывается контур прямоугольника с помощью strokeRectShape().

this.a += 0.015;
if (this.a > Math.PI * 2) {
    this.a -= Math.PI * 2;
}

this.point.x = 400 - Math.cos(this.a) * 400;
this.point.y = 300 - Math.sin(this.a * 2) * 300;

this.graphics.clear();
this.graphics.strokeRectShape(this.rect);

Проверка на вхождение и визуализация

Ключевой момент — использование статического метода Phaser.Geom.Rectangle.ContainsPoint(). Он принимает два аргумента: прямоугольник (this.rect) и точку (this.point). Метод возвращает true, если координаты точки находятся внутри границ прямоугольника (включая его границы).

В зависимости от результата проверки динамически меняется стиль заливки графического объекта. Если точка внутри прямоугольника, цвет заливки устанавливается красным (0xaa0000), если снаружи — синим (0x0000aa).

Наконец, точка (круг) отрисовывается на экран с текущим цветом заливки с помощью метода fillCircleShape().

if (Phaser.Geom.Rectangle.ContainsPoint(this.rect, this.point)) {
    this.graphics.fillStyle(0xaa0000);
} else {
    this.graphics.fillStyle(0x0000aa);
}

this.graphics.fillCircleShape(this.point);

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

Это стандартная конфигурация игры Phaser. В ней задаются размеры холста, указывается тип рендерера (Phaser.AUTO выбирает между WebGL и Canvas автоматически) и определяется стартовая сцена (scene: Example).

Создание экземпляра Phaser.Game с этой конфигурацией запускает игровой цикл.

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

const game = new Phaser.Game(config);

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

Метод Phaser.Geom.Rectangle.ContainsPoint() — это надежный и производительный способ проверки коллизии точки с прямоугольной областью. Он идеально подходит для создания кнопок, зон взаимодействия, проверки попадания снаряда в цель или активации триггеров на карте. Для экспериментов попробуйте изменить форму движущейся точки на Phaser.Geom.Rectangle и использовать метод Phaser.Geom.Rectangle.Overlaps() для проверки пересечения двух прямоугольников. Или замените статический прямоугольник на спрайт с физическим телом и проверяйте попадание точки в его границы (sprite.getBounds()).