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

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

При разработке игр часто требуется манипулировать геометрическими объектами. Понимание того, как получать и визуализировать ключевые точки отрезка, — это основа для создания траекторий, прицелов, линий-индикаторов и сложных геометрических построений. В этой статье мы разберем практический пример вращения отрезка и отрисовки его конечных точек, используя методы `getPointA()` и `getPointB()` из API Phaser.Geom.Line.

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    graphics;
    line;

    create ()
    {
        this.graphics = this.add.graphics({ lineStyle: { width: 2, color: 0xaa00aa } });

        this.line = new Phaser.Geom.Line(250, 300, 550, 300);
    }

    update ()
    {
        Phaser.Geom.Line.Rotate(this.line, 0.02);

        this.graphics.clear();

        this.graphics.strokeLineShape(this.line);

        this.graphics.fillStyle(0xaa0000);
        this.graphics.fillPointShape(this.line.getPointA(), 10);

        this.graphics.fillStyle(0x0000aa);
        this.graphics.fillPointShape(this.line.getPointB(), 10);
    }
}

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

const game = new Phaser.Game(config);

Инициализация сцены и создание объектов

В начале кода мы создаем класс сцены, наследующий от Phaser.Scene. В нем объявляются два свойства: graphics для рисования и line для хранения геометрического объекта.

В методе create() происходит первоначальная настройка:

this.graphics = this.add.graphics({ lineStyle: { width: 2, color: 0xaa00aa } });
this.line = new Phaser.Geom.Line(250, 300, 550, 300);

Здесь создается объект Graphics с фиолетовым стилем линии толщиной 2 пикселя. Затем инициализируется отрезок line с начальной точкой A в координатах (250, 300) и конечной точкой B в (550, 300). Этот отрезок будет горизонтальным и расположенным по центру экрана по вертикали.

Анимация и получение точек отрезка

Основная логика анимации находится в методе update(), который вызывается на каждом кадре.

Первым делом отрезок вращается вокруг своего центра:

Phaser.Geom.Line.Rotate(this.line, 0.02);

Статический метод Phaser.Geom.Line.Rotate() поворачивает отрезок this.line на 0.02 радиана за кадр. После этого необходимо очистить холст для рисования и отрисовать обновленную геометрию:

this.graphics.clear();
this.graphics.strokeLineShape(this.line);

Теперь ключевой момент: чтобы визуализировать концы отрезка, мы используем методы getPointA() и getPointB(). Эти методы возвращают объекты Phaser.Geom.Point, содержащие текущие координаты соответствующих концов отрезка после всех трансформаций (в данном случае — вращения).

this.graphics.fillStyle(0xaa0000);
this.graphics.fillPointShape(this.line.getPointA(), 10);

this.graphics.fillStyle(0x0000aa);
this.graphics.fillPointShape(this.line.getPointB(), 10);

Сначала устанавливается красный цвет заливки, и методом fillPointShape() рисуется точка A радиусом 10 пикселей. Затем цвет меняется на синий, и аналогичным образом рисуется точка B. Важно, что мы не храним точки отдельно — методы getPointA и getPointB всегда возвращают актуальные координаты, что очень удобно для динамических расчетов.

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

Финальная часть кода — стандартная конфигурация игры Phaser и ее инстанцирование.

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

const game = new Phaser.Game(config);

Конфиг задает окно игры размером 800x600 пикселей, автоматический выбор рендерера (WebGL или Canvas) и указывает нашу сцену Example в качестве стартовой. Создание экземпляра Phaser.Game с этим конфигом запускает игровой цикл.

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

Методы getPointA() и getPointB() — это простые, но мощные инструменты для работы с отрезками в Phaser. Они позволяют легко получать доступ к концам линии после любых трансформаций, что открывает множество возможностей для геймдизайна. Попробуйте поэкспериментировать: привязать к точкам спрайты (например, маркеры или части оружия), реализовать движение объекта между точками A и B по отрезку или создать систему прицеливания, где линия — это траектория полета снаряда, а точки — начальная и расчетная позиции.