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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    x;
    line;
    graphics;

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

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

        this.input.on('pointermove', pointer =>
        {

            this.x = pointer.x / 800;

        });
    }

    update ()
    {
        this.graphics.clear();

        Phaser.Geom.Line.RotateAroundXY(this.line, this.line.x1, this.line.y2, 0.03);

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

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

const game = new Phaser.Game(config);

Создание сцены и базовой геометрии

В методе create() инициализируются ключевые объекты. Сначала создается графический контекст graphics для отрисовки линий с заданным стилем.

Затем определяется сама линия с помощью класса Phaser.Geom.Line. Её начальные координаты — (100, 300) и (400, 300), то есть это горизонтальный отрезок.

this.graphics = this.add.graphics({ lineStyle: { width: 4, color: 0xaa00aa } });
this.line = new Phaser.Geom.Line(100, 300, 400, 300);

Далее настраивается обработчик события движения указателя (pointermove). Положение курсора по оси X (pointer.x) нормализуется, делением на ширину сцены (800), и сохраняется в свойстве this.x. Это значение не используется в данном примере напрямую для вращения, но демонстрирует, как можно связывать ввод с параметрами геометрии.

Принцип вращения вокруг точки

Основное действие происходит в update(). Каждый кадр графический слой очищается методом clear(), чтобы линия не оставляла след.

Для вращения используется статический метод Phaser.Geom.Line.RotateAroundXY(). Он принимает три основных аргумента: 1. Саму линию (this.line), которую нужно трансформировать. 2. Координаты X и Y точки, вокруг которой будет происходить вращение.

Phaser.Geom.Line.RotateAroundXY(this.line, this.line.x1, this.line.y2, 0.03);

В примере в качестве центра вращения взята точка с координатами (this.line.x1, this.line.y2). Это левая начальная точка линии по X и правая конечная точка по Y — создавая эффект вращения вокруг «угла» траектории. Последний аргумент (0.03) — это угол поворота в радианах за один кадр.

Отрисовка и конфигурация приложения

После изменения координат линии её нужно отрисовать. Для этого используется метод strokeLineShape() графического объекта, куда передается обновлённая линия.

this.graphics.strokeLineShape(this.line);

Конфигурация игры (config) задаёт стандартные параметры: размеры окна, автоматический выбор рендерера (Phaser.AUTO) и связь с контейнером на странице. Важно, что в свойстве scene передаётся наш класс Example.

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

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

Вы освоили ключевой метод RotateAroundXY для динамического вращения геометрических примитивов. Для экспериментов попробуйте: изменить центр вращения на позицию курсора (pointer.x, pointer.y), привязать угол поворота к скорости движения мыши или создать несколько линий, вращающихся вокруг общего центра, чтобы построить простой механический механизм или узор.