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

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

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

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

Живой запуск

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

Исходный код

class MainScene extends Phaser.Scene {
    constructor() {
      super({ key: 'main' });
    }

    create() {

      const g = this.add.graphics();

      const line = new Phaser.Geom.Line(100, 100, 300, 100);

      g.lineStyle(1, 0xff0000);
      g.strokeLineShape(line);

    //   const points = Phaser.Geom.Line.GetPoints(line, 5);
      const points = Phaser.Geom.Line.GetPoints(line, 0, 64);

      points.forEach(point => {

        this.add.circle(point.x, point.y, 4, 0x00ff00);

      });

      //   this.add.line(0, 0, 100, 100, 300, 100, 0xff0000).setOrigin(0);

    //   this.add.rectangle(100, 100, 5, 5, 0x0000ff);
    //   this.add.rectangle(300, 100, 5, 5, 0x0000ff);

    //   Phaser.Actions.PlaceOnLine(balls, line);

    }

    update() {
    }
  }

  const config = {
    type: Phaser.AUTO,
    width: 640,
    height: 480,
    backgroundColor: '#000000',
    parent: 'game',
    scene: [MainScene]
  }
  const game = new Phaser.Game(config);

Создание сцены и базовой линии

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

В методе create(), который вызывается один раз при инициализации сцены, мы сначала создаем графический объект (Graphics) для отрисовки примитивов. Затем определяем геометрическую линию с координатами начала (100, 100) и конца (300, 100). Эта линия отрисовывается красным цветом с толщиной в 1 пиксель.

const g = this.add.graphics();
const line = new Phaser.Geom.Line(100, 100, 300, 100);
g.lineStyle(1, 0xff0000);
g.strokeLineShape(line);

Разбиваем линию на равные отрезки

Ключевой метод в этом примере — Phaser.Geom.Line.GetPoints. Он принимает три аргумента: саму линию, количество шагов (или stepRate), и общее количество точек, которое нужно получить. В комментарии показан вариант с 5 точками, а в рабочем коде используется 64 точки с шагом 0.

Когда stepRate равен 0, метод игнорирует его и создает массив точек, равномерно распределенных по линии, в количестве, указанном в третьем аргументе. Каждая точка — это объект с координатами `xиy`.

// Получаем 64 точки, равномерно распределенные по линии
const points = Phaser.Geom.Line.GetPoints(line, 0, 64);

Визуализация полученных точек

После получения массива точек мы можем пройтись по нему с помощью forEach и для каждой точки создать графический примитив. В данном случае для визуализации используются зеленые круги радиусом 4 пикселя, которые добавляются через this.add.circle.

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

points.forEach(point => {
  this.add.circle(point.x, point.y, 4, 0x00ff00);
});

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

Для запуска игры в Phaser необходимо создать конфигурационный объект и передать его в конструктор Phaser.Game. В конфигурации указывается тип рендерера (в данном случае Phaser.AUTO), размеры холста, цвет фона, родительский HTML-элемент и массив сцен. Наша MainScene добавлена в этот массив, поэтому она будет запущена автоматически при старте игры.

const config = {
  type: Phaser.AUTO,
  width: 640,
  height: 480,
  backgroundColor: '#000000',
  parent: 'game',
  scene: [MainScene]
};
const game = new Phaser.Game(config);

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

Метод Phaser.Geom.Line.GetPoints — это мощный инструмент для работы с линейными траекториями в играх. Он избавляет разработчика от необходимости вручную вычислять координаты точек, позволяя сосредоточиться на игровой логике. Для экспериментов попробуйте изменить количество точек, использовать ненулевой stepRate или применить полученные точки для размещения анимированных спрайтов вдоль более сложных путей, составленных из нескольких линий.