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

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

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

Живой запуск

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

Исходный код


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

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

        this.ellipse = new Phaser.Geom.Ellipse(400, 300, 600, 250);
        this.point = new Phaser.Geom.Rectangle(0, 0, 16, 16);
    }

    update ()
    {
        this.a += 0.015;

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

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

        this.graphics.clear();

        this.graphics.strokeEllipseShape(this.ellipse);

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

        this.graphics.fillRect(this.point.x - 8, this.point.y - 8, this.point.width, this.point.height);
    }
}

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

const game = new Phaser.Game(config);

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

Вся логика примера реализована в классе сцены. Нам понадобятся переменные для хранения угла анимации, ссылки на графический объект, самого эллипса и проверяемой точки.

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

В методе create() мы инициализируем основные объекты. Сначала создаем контейнер graphics для отрисовки линий и заливки. Затем определяем эллипс и точку. Важный нюанс: для удобства отрисовки точка представлена объектом Phaser.Geom.Rectangle, но метод ContainsPoint проверяет именно координаты его верхнего левого угла (`x,y`).

create ()
    {
        this.graphics = this.add.graphics({ lineStyle: { width: 2, color: 0x00aaaa } });
        this.ellipse = new Phaser.Geom.Ellipse(400, 300, 600, 250);
        this.point = new Phaser.Geom.Rectangle(0, 0, 16, 16);
    }

Анимация точки и ключевая проверка в update()

В методе update() происходит движение точки по сложной траектории с помощью тригонометрических функций. Переменная this.a выступает в роли общего угла для анимации.

update ()
    {
        this.a += 0.015;
        if (this.a > Math.PI * 4)
        {
            this.a -= Math.PI * 4;
        }
        this.point.x = 400 - Math.cos(this.a / 2) * 400;
        this.point.y = 300 - Math.sin(this.a * 2) * 300;

После расчета новых координат мы очищаем предыдущий кадр и заново рисуем контур эллипса.

this.graphics.clear();
        this.graphics.strokeEllipseShape(this.ellipse);

Далее следует самая важная часть — проверка, находится ли текущая точка внутри эллипса. Для этого используется статический метод Phaser.Geom.Ellipse.ContainsPoint(). Он принимает два аргумента: объект эллипса и объект точки (или любой объект со свойствами `xиy). Метод возвращаетtrueилиfalse`.

if (Phaser.Geom.Ellipse.ContainsPoint(this.ellipse, this.point))
        {
            this.graphics.fillStyle(0xaa0000); // Красный цвет, если точка ВНУТРИ
        }
        else
        {
            this.graphics.fillStyle(0x0000aa); // Синий цвет, если точка СНАРУЖИ
        }

В зависимости от результата мы меняем цвет заливки и рисуем квадрат в текущих координатах точки.

this.graphics.fillRect(this.point.x - 8, this.point.y - 8, this.point.width, this.point.height);
    }
}

Как применить это в реальной игре

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

1. **Невидимые триггерные зоны:** Создайте Phaser.Geom.Ellipse в памяти и в update() проверяйте положение спрайта игрока (sprite.x, sprite.y). Это эффективнее, чем использовать физические тела для статичных зон.

// В update() вашей игровой сцены
if (Phaser.Geom.Ellipse.ContainsPoint(this.secretAreaEllipse, this.player)) {
    this.activateSecret();
}

2. **Проверка попадания для нестандартных хитбоксов:** Если хитбокс врага или объекта должен быть эллиптическим, вы можете проверять столкновение снаряда (его точку центра) с этой геометрической областью.

3. **Интерактивность для сложных UI-элементов:** Методом можно проверить, попал ли клик мыши (pointer.x, pointer.y) в область эллиптической кнопки или иконки.

Главное преимущество — производительность. Все расчеты выполняются по простой математической формуле, без задействования физического движка.

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

Phaser.Geom.Ellipse.ContainsPoint() — это простой и точный инструмент для проверки точки на принадлежность эллипсу. Он отлично подходит для создания триггеров, кастомных областей столкновений и интерактивных элементов. Для экспериментов попробуйте: изменить форму эллипса в реальном времени в ответ на игровые события; использовать несколько эллипсов для составной сложной зоны; привязать проверку не к координатам спрайта, а к положению курсора мыши для создания динамических эффектов.