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

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

Создание случайных точек внутри заданной области — частая задача в разработке игр: от разброса предметов на локации до генерации частиц эффектов. Phaser предоставляет удобные методы для работы с геометрическими фигурами. В этой статье разберем, как использовать `Phaser.Geom.Triangle.Random()` для заполнения треугольника случайными точками — этот подход эффективнее и точнее ручных расчётов. Вы научитесь применять этот метод для procedural generation и визуальных эффектов.

Версия 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 } });

        const triangle = new Phaser.Geom.Triangle.BuildRight(200, 400, 300, 200);

        graphics.strokeTriangleShape(triangle);

        //  Draw random points within it
        for (let i = 0; i < 200; i++)
        {
            const p = Phaser.Geom.Triangle.Random(triangle);

            graphics.fillPointShape(p, 2);
        }
    }
}

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

const game = new Phaser.Game(config);

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

В примере создается простая сцена Phaser. Основная работа происходит в методе create(). Сначала инициализируется объект graphics для рисования примитивов — линий и заливки. Указываются стили: зелёный контур и жёлтая заливка.

const graphics = this.add.graphics({ lineStyle: { width: 2, color: 0x00ff00 }, fillStyle: { color: 0xffff00 } });

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

Треугольник создается с помощью фабричного метода Phaser.Geom.Triangle.BuildRight(). Он строит прямоугольный треугольник: первые два аргумента — координаты прямого угла (x, y), следующие два — длины катетов. В примере треугольник начинается в точке (200, 400), имеет ширину 300 и высоту -200 (отрицательное значение означает направление вверх).

const triangle = new Phaser.Geom.Triangle.BuildRight(200, 400, 300, 200);

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

graphics.strokeTriangleShape(triangle);

Генерация случайных точек внутри треугольника

Ключевой метод — Phaser.Geom.Triangle.Random(). Он принимает объект треугольника и возвращает точку (Phaser.Geom.Point) со случайными координатами, гарантированно лежащую внутри треугольника. Алгоритм учитывает геометрию фигуры, что избавляет от необходимости проверять попадание точки вручную.

const p = Phaser.Geom.Triangle.Random(triangle);

В цикле генерируется 200 таких точек, и каждая отрисовывается как закрашенная точка размером 2 пикселя.

for (let i = 0; i < 200; i++)
{
    const p = Phaser.Geom.Triangle.Random(triangle);
    graphics.fillPointShape(p, 2);
}

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

Метод Phaser.Geom.Triangle.Random() — это мощный и оптимизированный инструмент для работы со случайным распределением внутри треугольной области. Попробуйте адаптировать код: анимируйте точки, измените форму треугольника на произвольную с помощью Phaser.Geom.Triangle, или используйте этот подход для расстановки врагов или ресурсов на треугольной части карты. Для более сложных фигур исследуйте другие методы в Phaser.Geom.