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

Работа с координатами — основа игровой логики. В Phaser для представления точек, направлений и скоростей используется класс `Phaser.Math.Vector2`. Эта статья покажет, как создавать векторы и визуализировать их на сцене с помощью Graphics. Понимание векторов необходимо для управления движением объектов, расчёта столкновений и реализации игровой физики.

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    create ()
    {
        const graphics = this.add.graphics({ fillStyle: { color: 0x2266aa } });

        const point1 = new Phaser.Math.Vector2();// point at 0/0
        const point2 = new Phaser.Math.Vector2(100);// point at 100/100
        const point3 = new Phaser.Math.Vector2(400, 300);// point at 400/300

        graphics.fillPointShape(point1, 15);
        graphics.fillPointShape(point2, 15);
        graphics.fillPointShape(point3, 15);
    }
}

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

const game = new Phaser.Game(config);

Что такое Vector2?

Класс Phaser.Math.Vector2 представляет собой двумерный вектор. В контексте игр он чаще всего используется для хранения координат точки (x, y) на плоскости. Это базовая структура данных для любой позиционной логики.

Создать вектор можно несколькими способами, передавая разное количество аргументов в конструктор.

Создание векторов

В примере показаны три основных способа инициализации вектора. Результат каждого конструктора — новый объект Vector2.

const point1 = new Phaser.Math.Vector2();

Вызов конструктора без аргументов создаёт вектор в начале координат (0, 0).

const point2 = new Phaser.Math.Vector2(100);

Если передан один аргумент, он присваивается и координате `x, и координатеy`. Здесь создаётся точка (100, 100).

const point3 = new Phaser.Math.Vector2(400, 300);

Передача двух аргументов явно задаёт координаты `xиy`. Создаётся точка (400, 300).

Визуализация точек

Чтобы увидеть созданные векторы на сцене, используется объект Graphics. Он позволяет рисовать примитивы, в том числе точки.

Сначала создаётся объект Graphics и настраивается стиль заливки.

const graphics = this.add.graphics({ fillStyle: { color: 0x2266aa } });

Здесь 0x2266aa — это шестнадцатеричный код синего цвета.

Для отрисовки вызывается метод fillPointShape. Первым аргументом он принимает объект с полями `xиy(нашVector2`), а вторым — размер точки в пикселях.

graphics.fillPointShape(point1, 15);
graphics.fillPointShape(point2, 15);
graphics.fillPointShape(point3, 15);

В результате на сцене появятся три синих круга диаметром 15 пикселей в заданных координатах.

Конфигурация игры

Код примера завершается стандартной для Phaser 3 конфигурацией. В ней задаётся размер холста, указывается тип рендерера (Phaser.AUTO позволяет движку выбрать WebGL или Canvas) и определяется стартовая сцена.

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

const game = new Phaser.Game(config);

Класс Example, описанный выше, передаётся в свойство scene и становится активной сценой при запуске игры.

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

Phaser.Math.Vector2 — это фундаментальный инструмент для работы с координатами. Вы научились создавать векторы и отрисовывать их как точки. Для экспериментов попробуйте

  1. создать массив векторов в случайных координатах и отрисовать их в цикле
  2. изменить цвет и размер точек
  3. использовать вектор не как точку, а как направление, применив его к позиции спрайта через метод add