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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    create ()
    {
        const graphics = this.add.graphics();

        const triangle = new Phaser.Geom.Triangle(400, 100, 100, 500, 700, 500);

        graphics.fillStyle(0x00ff00);
        graphics.fillTriangleShape(triangle);

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

            graphics.clear();

            if (Phaser.Geom.Triangle.ContainsPoint(triangle, pointer))
            {
                graphics.fillStyle(0xff0000);
            }
            else
            {
                graphics.fillStyle(0x00ff00);
            }

            graphics.fillTriangleShape(triangle);

        });
    }
}

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

const game = new Phaser.Game(config);

Создание сцены и геометрии

В методе create() сцены мы подготавливаем канвас для отрисовки и создаём геометрический объект треугольника. Для отрисовки используется Graphics — инструмент Phaser для векторной графики.

const graphics = this.add.graphics();
const triangle = new Phaser.Geom.Triangle(400, 100, 100, 500, 700, 500);

Треугольник создаётся с помощью конструктора Phaser.Geom.Triangle, который принимает координаты трёх вершин (x1, y1, x2, y2, x3, y3). После создания объект triangle хранит только данные о своей форме.

Далее мы задаём зелёный цвет заливки и рисуем наш треугольник на холсте graphics.

graphics.fillStyle(0x00ff00);
graphics.fillTriangleShape(triangle);

Обработка движения курсора

Ключевая интерактивность добавляется через слушатель события pointermove. Каждый раз при движении мыши (или касании) будет вызываться переданная функция.

this.input.on('pointermove', pointer => {
    // Код обработки...
});

Первым делом внутри обработчика мы очищаем холст graphics с помощью метода clear(). Это необходимо, чтобы стереть предыдущий кадр и нарисовать треугольник заново с новым цветом.

graphics.clear();

Проверка точки на принадлежность треугольнику

Сердце примера — статический метод Phaser.Geom.Triangle.ContainsPoint(). Он принимает два аргумента: объект треугольника и объект точки (или любой объект со свойствами `xиy), и возвращаетtrueилиfalse`.

if (Phaser.Geom.Triangle.ContainsPoint(triangle, pointer))
{
    graphics.fillStyle(0xff0000); // Красный, если точка ВНУТРИ
}
else
{
    graphics.fillStyle(0x00ff00); // Зелёный, если точка СНАРУЖИ
}

Объект pointer автоматически передаётся в обработчик события и содержит актуальные координаты `xиy. МетодContainsPoint` использует математический алгоритм проверки барицентрических координат, что делает его очень быстрым и точным.

Визуализация результата

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

graphics.fillTriangleShape(triangle);

Таким образом, пользователь видит, как треугольник меняет цвет с зелёного на красный, когда курсор находится внутри его границ.

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

Метод Phaser.Geom.Triangle.ContainsPoint предоставляет готовое, оптимизированное решение для проверки точки внутри треугольника. Его можно использовать не только для визуальных демо, но и в реальной игровой механике. Поэкспериментируйте: попробуйте проверять не положение курсора, а положение другого игрового объекта (спрайта), создайте массив треугольников для сложной составной зоны или используйте этот принцип для определения столкновений нестандартной формы.