Случайные точки внутри фигур

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

Случайные точки внутри прямоугольника

Прямоугольник является самой простой фигурой для генерации случайных точек. В Phaser можно использовать объект Phaser.Geom.Rectangle.

const rect = new Phaser.Geom.Rectangle(100, 100, 300, 200);

function getRandomPointInRect(rect) {
    const x = Phaser.Math.Between(rect.x, rect.x + rect.width);
    const y = Phaser.Math.Between(rect.y, rect.y + rect.height);
    return new Phaser.Geom.Point(x, y);
}

const point = getRandomPointInRect(rect);
console.log(point); // Phaser.Geom.Point { x: ..., y: ... }

Особенности:

  • Используется Phaser.Math.Between для генерации целых чисел в диапазоне.
  • Можно использовать Phaser.Math.FloatBetween для получения точек с плавающей точкой.
  • Прямоугольник задаётся координатами верхнего левого угла и размерами.

Случайные точки внутри круга

Для круга используется объект Phaser.Geom.Circle. Чтобы точки равномерно распределялись по площади, необходимо учитывать полярные координаты.

const circle = new Phaser.Geom.Circle(400, 300, 100);

function getRandomPointInCircle(circle) {
    const t = 2 * Math.PI * Math.random();
    const r = circle.radius * Math.sqrt(Math.random());
    const x = circle.x + r * Math.cos(t);
    const y = circle.y + r * Math.sin(t);
    return new Phaser.Geom.Point(x, y);
}

const point = getRandomPointInCircle(circle);
console.log(point);

Ключевые моменты:

  • Применение квадратного корня к случайному радиусу обеспечивает равномерное распределение точек по площади круга.
  • Угловая координата генерируется равномерно от 0 до 2π.

Случайные точки внутри многоугольника

Phaser предоставляет Phaser.Geom.Polygon для работы с многоугольниками. Простейший способ — метод проверки принадлежности точки многоугольнику.

const polygon = new Phaser.Geom.Polygon([
    100, 100,
    300, 150,
    250, 300,
    120, 280
]);

function getRandomPointInPolygon(polygon) {
    const bounds = polygon.getBounds();
    let point;
    do {
        const x = Phaser.Math.Between(bounds.x, bounds.right);
        const y = Phaser.Math.Between(bounds.y, bounds.bottom);
        point = new Phaser.Geom.Point(x, y);
    } while (!Phaser.Geom.Polygon.Contains(polygon, point.x, point.y));
    return point;
}

const point = getRandomPointInPolygon(polygon);
console.log(point);

Особенности метода:

  • Генерация происходит внутри ограничивающего прямоугольника (getBounds()), затем проверяется принадлежность точке.
  • Для сложных многоугольников метод может быть менее эффективным, так как точки могут часто попадать за пределы фигуры.

Использование генерации точек для спрайтов и частиц

Phaser позволяет напрямую использовать сгенерированные точки для позиционирования спрайтов или частиц.

for (let i = 0; i < 50; i++) {
    const point = getRandomPointInCircle(circle);
    this.add.sprite(point.x, point.y, 'star');
}
  • Такой подход применим для эффекта звёздного дождя, расстановки объектов уровня или случайного расположения врагов.
  • Можно комбинировать разные фигуры для создания более сложной генерации.

Генерация нескольких точек с учетом плотности

Для равномерного распределения большого числа точек внутри фигуры можно использовать алгоритм голубиного распределения (Poisson Disk Sampling). В Phaser нет встроенной функции, но реализовать её можно вручную или через сторонние библиотеки. Основная идея:

  1. Определить минимальное расстояние между точками.
  2. Генерировать случайную точку.
  3. Проверять, удовлетворяет ли она условию минимального расстояния от уже существующих точек.
  4. Добавлять точку в массив, если условие выполнено.

Прямые методы Phaser для точек

Phaser имеет встроенные методы для получения случайной точки внутри фигур:

  • Phaser.Geom.Rectangle.Random(rect) — случайная точка в прямоугольнике.
  • Phaser.Geom.Circle.Random(circle) — случайная точка в круге.
  • Phaser.Geom.Triangle.Random(triangle) — случайная точка в треугольнике.

Пример:

const rect = new Phaser.Geom.Rectangle(50, 50, 200, 100);
const point = Phaser.Geom.Rectangle.Random(rect);
console.log(point);

Преимущества:

  • Минимизирует необходимость писать свой код.
  • Позволяет генерировать точки мгновенно и безопасно.

Итоговое применение

Генерация случайных точек в Phaser — фундаментальная задача для создания динамических сцен, систем частиц, распределения объектов и процедурной генерации уровней. Правильный выбор метода зависит от фигуры и требований к равномерности распределения, а встроенные функции Phaser позволяют быстро и безопасно решать большинство стандартных задач.

Оглавление