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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    create ()
    {
        const graphics = this.add.graphics({ lineStyle: { width: 4, color: 0xaa00aa }, fillStyle: { color: 0x0000aa } });

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

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

            line.x2 = pointer.x;
            line.y2 = pointer.y;

            redraw();
        });

        redraw();

        function redraw ()
        {
            graphics.clear();

            const midPoint = Phaser.Geom.Line.GetMidPoint(line);

            graphics.strokeLineShape(line);

            graphics.fillPointShape(midPoint, 25);
        }
    }
}

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

const game = new Phaser.Game(config);

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

В методе create() мы подготавливаем сцену для рисования и создаем исходную линию.

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

Объект graphics отвечает за отрисовку примитивов. Мы задаем ему стиль линии и заливки. Линия создается с начальной точкой (0, 300) и конечной (400, 100). Эти координаты определяют ее первоначальное положение на сцене.

Обработка взаимодействия и обновление линии

Чтобы линия реагировала на движение мыши, мы настраиваем слушатель события pointermove.

this.input.on('pointermove', pointer => {
    line.x2 = pointer.x;
    line.y2 = pointer.y;
    redraw();
});

При каждом движении курсора координаты конца линии (x2, y2) обновляются на текущую позицию указателя (pointer.x, pointer.y). После изменения вызывается функция redraw() для перерисовки кадра. Начало линии (x1, y1) остается зафиксированным.

Расчет средней точки и отрисовка

Функция redraw() отвечает за очистку холста, вычисление середины линии и отображение всех элементов.

function redraw ()
{
    graphics.clear();
    const midPoint = Phaser.Geom.Line.GetMidPoint(line);
    graphics.strokeLineShape(line);
    graphics.fillPointShape(midPoint, 25);
}

Сначала холст очищается методом clear(). Ключевой вызов — Phaser.Geom.Line.GetMidPoint(line). Этот статический метод принимает объект линии и возвращает объект точки (Phaser.Geom.Point) с координатами, рассчитанными по формуле ( (x1 + x2) / 2 , (y1 + y2) / 2 ). Затем линия отрисовывается методом strokeLineShape, а средняя точка — методом fillPointShape с радиусом 25 пикселя.

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

Пример завершается стандартной конфигурацией игры Phaser.

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

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

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

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