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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    create ()
    {
        const circle = new Phaser.Geom.Circle(50, 300, 50);

        const graphics = this.add.graphics({ lineStyle: { color: 0x00ff00 } });
        graphics.strokeCircleShape(circle);

        const point = new Phaser.Math.Vector2(Math.cos(Math.PI / 4) * 100, Math.sin(Math.PI / 4) * 100);

        for (let i = 0; i < 10; i++)
        {
            Phaser.Geom.Circle.OffsetPoint(circle, point);

            graphics.strokeCircleShape(circle);

            point.y *= -1;
        }
    }
}

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

const game = new Phaser.Game(config);

Подготовка сцены и создание объектов

В методе create() сцены мы создаем базовые геометрические объекты: круг и вектор. Круг будет визуализирован с помощью графики, а вектор задаст направление и расстояние для его движения.

const circle = new Phaser.Geom.Circle(50, 300, 50);
const graphics = this.add.graphics({ lineStyle: { color: 0x00ff00 } });
graphics.strokeCircleShape(circle);

const point = new Phaser.Math.Vector2(Math.cos(Math.PI / 4) * 100, Math.sin(Math.PI / 4) * 100);

Как работает метод OffsetPoint

Метод Phaser.Geom.Circle.OffsetPoint принимает два аргумента: объект круга и вектор. Он модифицирует исходный круг, прибавляя координаты вектора к текущим координатам центра круга. Это удобно для перемещения, так как не требует ручного обновления свойств `xиy`.

Phaser.Geom.Circle.OffsetPoint(circle, point);

После вызова метода координаты центра circle изменятся: circle.x += point.x, circle.y += point.y. Каждый вызов смещает круг по вектору point.

Создание паттерна движения в цикле

В примере используется цикл для итеративного смещения круга. После каждого смещения круг перерисовывается, чтобы визуализировать новое положение. Ключевой трюк — инвертирование `y`-компоненты вектора каждую итерацию, что создает зеркальное движение по вертикали.

for (let i = 0; i < 10; i++)
{
    Phaser.Geom.Circle.OffsetPoint(circle, point);
    graphics.strokeCircleShape(circle);
    point.y *= -1;
}

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

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

Сцена включается в конфигурацию игры стандартным для Phaser способом. Важно убедиться, что размеры холста (width, height) достаточны для отображения всей траектории движения круга.

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

const game = new Phaser.Game(config);

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

Метод OffsetPoint — это мощный инструмент для управления положением круга через векторы. Для экспериментов попробуйте: изменить вектор point динамически (например, на основе времени), привязать смещение к столкновениям (this.physics.add.image) или комбинировать OffsetPoint с другими геометрическими методами для создания сложных анимаций перемещения объектов.