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

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

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

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

Живой запуск

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

Исходный код

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

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

        this.triangle = new Phaser.Geom.Triangle.BuildEquilateral(400, 25, 450);
    }

    update ()
    {
        this.a += 0.015;

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

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

        Phaser.Geom.Triangle.Rotate(this.triangle, 0.02);

        this.graphics.clear();

        this.graphics.strokeTriangleShape(this.triangle);

        if (Phaser.Geom.Triangle.Contains(this.triangle, x, y))
        {
            this.graphics.fillStyle(0xaa0000);
        }
        else
        {
            this.graphics.fillStyle(0x0000aa);
        }

        this.graphics.fillCircle(x, y, 8);
    }
}

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

const game = new Phaser.Game(config);

Подготовка сцены и создание фигуры

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

Ключевой момент — использование фабричного метода Phaser.Geom.Triangle.BuildEquilateral. Он создает равносторонний треугольник по координатам верхней вершины и длине стороны.

create ()
{
    this.graphics = this.add.graphics({ lineStyle: { width: 2, color: 0xaaaa00 } });
    this.triangle = new Phaser.Geom.Triangle.BuildEquilateral(400, 25, 450);
}

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

В update() происходит вся анимация. Угол this.a постоянно увеличивается, задавая движение.

Координаты точки (x, y) вычисляются с помощью тригонометрических функций Math.cos и Math.sin, что создает сложную траекторию типа «восьмерки» или лиссажу.

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

Треугольник также плавно вращается вокруг своего центра с помощью статического метода Phaser.Geom.Triangle.Rotate.

Phaser.Geom.Triangle.Rotate(this.triangle, 0.02);

Отрисовка и ключевая проверка

Перед каждой отрисовкой холст Graphics очищается. Затем контур треугольника отрисовывается методом strokeTriangleShape.

Сердце примера — вызов Phaser.Geom.Triangle.Contains. Этот метод принимает объект треугольника и координаты точки, возвращая true или false.

if (Phaser.Geom.Triangle.Contains(this.triangle, x, y))
{
    this.graphics.fillStyle(0xaa0000); // Красный, если точка ВНУТРИ
}
else
{
    this.graphics.fillStyle(0x0000aa); // Синий, если точка СНАРУЖИ
}

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

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

Стандартная конфигурация игры Phaser 3. Важно, что ширина и высота (800x600) соответствуют области движения точки, чтобы ее было хорошо видно.

const config = {
    width: 800,
    height: 600,
    type: Phaser.AUTO,
    parent: 'phaser-example',
    scene: Example // Указываем наш класс сцены
};

const game = new Phaser.Game(config);

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

Метод Phaser.Geom.Triangle.Contains предоставляет точный и производительный способ проверки точки на вхождение в треугольник. Это лишь одна из многих полезных функций в модуле Phaser.Geom. **Идеи для экспериментов:** 1. Замените движущуюся точку на курсор мыши (this.input.activePointer) и проверяйте попадание в реальном времени. 2. Создайте массив треугольников и проверяйте, в какой из них попала точка. 3. Используйте Contains для создания нестандартной hitbox у спрайта сложной формы.