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

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

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

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

Живой запуск

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

Исходный код

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

        circle.setPosition(400, 200);

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

        // move right by radius
        circle.x += circle.radius;

        graphics.lineStyle(1, 0x00ff00);
        graphics.strokeCircleShape(circle);

        // place top-right corner to bottom-left of its previous position
        circle.right = circle.left;
        circle.top = circle.bottom;

        graphics.lineStyle(1, 0x0000ff);
        graphics.strokeCircleShape(circle);
    }
}

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

const game = new Phaser.Game(config);

Создание круга и установка позиции

В начале примера мы создаем геометрический объект круга. Изначально его центр помещается в точку (0, 0), а затем с помощью метода setPosition перемещается.

const circle = new Phaser.Geom.Circle(0, 0, 75);
circle.setPosition(400, 200);

Метод setPosition(x, y) перемещает центр круга в указанные координаты. Это базовый способ задания позиции. После этого круг отрисовывается красным контуром с помощью графики (graphics.strokeCircleShape).

Изменение позиции через свойства центра

Прямое изменение свойств `xиy` объекта круга позволяет смещать его центр. Это простой способ для инкрементного перемещения, например, в игровом цикле.

circle.x += circle.radius;

В данном коде круг сдвигается вправо на величину своего радиуса. После этого он отрисовывается зеленым контуром. Обратите внимание, что мы изменяем свойство напрямую, а не используем метод.

Точное позиционирование по границам

Наиболее мощная часть примера — использование свойств границ: right, left, top и bottom. Установка этих свойств автоматически пересчитывает положение центра круга.

circle.right = circle.left;
circle.top = circle.bottom;

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

Практическое применение и вывод

Эти техники незаменимы для: 1. **Выравнивания объектов** относительно друг друга или краев экрана. 2. **Обработки столкновений**, где нужно проверять границы фигур. 3. **Создания анимаций** с точным контролем над траекторией.

Главное преимущество — возможность работать как с центром (`x,y`), так и с границами, выбирая наиболее удобный для задачи способ.

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

Класс Phaser.Geom.Circle предоставляет гибкий набор инструментов для управления положением. Попробуйте экспериментировать: анимируйте движение круга, изменяя circle.x в update, или создайте композицию из нескольких фигур, выравнивая их через свойства right и bottom. Для сложной геометрии изучите другие классы, например, Phaser.Geom.Rectangle.