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

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

В играх часто требуется найти центральную точку фигуры для размещения объектов, расчёта столкновений или визуальных эффектов. Встроенная геометрическая система Phaser позволяет легко найти центр масс (центроид) треугольника. Этот пример демонстрирует практическое использование `Phaser.Geom.Triangle.Centroid` и визуализацию результата.

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    create ()
    {
        const graphics = this.add.graphics({ lineStyle: { width: 2, color: 0x00ff00 }, fillStyle: { color: 0xffff00 } });

        //  Create a random triangle

        const x1 = Phaser.Math.Between(100, 700);
        const y1 = Phaser.Math.Between(50, 550);

        const x2 = Phaser.Math.Between(100, 700);
        const y2 = Phaser.Math.Between(50, 550);

        const x3 = Phaser.Math.Between(100, 700);
        const y3 = Phaser.Math.Between(50, 550);

        const triangle = new Phaser.Geom.Triangle(x1, y1, x2, y2, x3, y3);

        graphics.strokeTriangleShape(triangle);

        //  Get the centroid of the triangle

        const centroid = Phaser.Geom.Triangle.Centroid(triangle);

        //  Draw lines from each point of the triangle to the centroid

        graphics.lineStyle(1, 0x00ff00);

        graphics.lineBetween(x1, y1, centroid.x, centroid.y);
        graphics.lineBetween(x2, y2, centroid.x, centroid.y);
        graphics.lineBetween(x3, y3, centroid.x, centroid.y);

        //  Draw the centroid

        graphics.fillPointShape(centroid, 4);
    }
}

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

const game = new Phaser.Game(config);

Что такое центроид треугольника?

Центроид, или центр масс, треугольника — это точка пересечения его медиан. Она делит каждую медиану в отношении 2:1, считая от вершины. В Phaser это свойство можно вычислить статическим методом Phaser.Geom.Triangle.Centroid(), который возвращает объект Phaser.Geom.Point.

Эта точка полезна, когда нужно разместить метку, частицу или другой игровой объект точно в центре треугольной области.

Создание случайного треугольника

В начале примера создаётся треугольник со случайными координатами вершин в пределах сцены. Для этого используется утилита Phaser.Math.Between, которая генерирует целые числа в заданном диапазоне.

После получения координат трёх вершин, создаётся объект Phaser.Geom.Triangle.

const x1 = Phaser.Math.Between(100, 700);
const y1 = Phaser.Math.Between(50, 550);

const x2 = Phaser.Math.Between(100, 700);
const y2 = Phaser.Math.Between(50, 550);

const x3 = Phaser.Math.Between(100, 700);
const y3 = Phaser.Math.Between(50, 550);

const triangle = new Phaser.Geom.Triangle(x1, y1, x2, y2, x3, y3);

Созданный треугольник отрисовывается с помощью graphics.strokeTriangleShape().

Расчёт и отрисовка центроида

Ключевая операция — вызов статического метода Centroid, который принимает объект треугольника в качестве аргумента. Метод возвращает точку (объект с полями `xиy`).

const centroid = Phaser.Geom.Triangle.Centroid(triangle);

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

graphics.lineBetween(x1, y1, centroid.x, centroid.y);
graphics.lineBetween(x2, y2, centroid.x, centroid.y);
graphics.lineBetween(x3, y3, centroid.x, centroid.y);

Сам центроид отображается жёлтой точкой с помощью метода fillPointShape().

Практическое применение в играх

Понимание, как найти центр треугольника, открывает несколько возможностей для геймдева:

* **Динамическое позиционирование:** Размещение спрайта с текстом (например, названия зоны) в центре треугольной области на карте. * **Физика и столкновения:** Использование центроида в качестве опорной точки для расчёта вращения или центра масс составного физического тела треугольной формы. * **Генерация контента:** Определение центра для спавна врагов или разброса лута внутри случайно сгенерированного полигона. * **Визуальные эффекты:** Создание частиц, которые разлетаются из центра треугольной зоны поражения заклинания.

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

Метод Phaser.Geom.Triangle.Centroid предоставляет простой и эффективный способ найти центр масс треугольника. Для экспериментов попробуйте: 1. Сделать треугольник перетаскиваемым и обновлять позицию центроида в реальном времени. 2. Привязать к центроиду физический спрайт и посмотреть на его поведение. 3. Использовать центроид в качестве источника для системы частиц (this.add.particles).