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

Работа с геометрическими фигурами — основа для многих игровых механик: от коллизий до визуальных эффектов. В Phaser класс `Phaser.Geom.Ellipse` предоставляет удобный API для создания и манипуляции эллипсами. Эта статья на практическом примере покажет, как создавать эллипс, изменять его положение с помощью метода `setPosition`, а также напрямую работать со свойствами `x`, `y`, `width`, `height`, `left`, `right`, `top` и `bottom`. Эти навыки пригодятся для точного позиционирования игровых объектов, зон обнаружения или создания динамических интерфейсов.

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    create ()
    {
        const ellipse = new Phaser.Geom.Ellipse(0, 0, 200, 120);

        ellipse.setPosition(300, 200);

        const graphics = this.add.graphics({ lineStyle: { width: 2, color: 0xff0000 } });
        graphics.strokeEllipseShape(ellipse);

        // move right by width
        ellipse.x += ellipse.width;

        graphics.lineStyle(2, 0x00ff00);
        graphics.strokeEllipseShape(ellipse);

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

        graphics.lineStyle(2, 0x0000ff);
        graphics.strokeEllipseShape(ellipse);
    }
}

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

const game = new Phaser.Game(config);

Создание эллипса и базовое позиционирование

Класс Phaser.Geom.Ellipse позволяет создать эллипс, задав его центр и размеры. Метод setPosition — это удобный способ сразу установить новые координаты центра фигуры.

const ellipse = new Phaser.Geom.Ellipse(0, 0, 200, 120);
ellipse.setPosition(300, 200);

В первой строке создается эллипс с центром в точке (0, 0), шириной 200 пикселей и высотой 120 пикселей. Затем метод setPosition(300, 200) перемещает центр этого эллипса в точку с координатами x=300, y=200 на сцене. Для отрисовки контура эллипса используется объект Graphics.

const graphics = this.add.graphics({ lineStyle: { width: 2, color: 0xff0000 } });
graphics.strokeEllipseShape(ellipse);

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

После создания и первоначальной отрисовки можно напрямую менять свойства эллипса, такие как `xиwidth`. Это демонстрирует, что геометрические объекты в Phaser — это динамические структуры данных.

ellipse.x += ellipse.width;

Эта строка кода сдвигает эллипс вправо на величину его собственной ширины (ellipse.width). Координата `x` центра эллипса увеличивается на 200 пикселей. После изменения мы снова рисуем эллипс, но уже зеленым цветом, чтобы визуализировать сдвиг.

graphics.lineStyle(2, 0x00ff00);
graphics.strokeEllipseShape(ellipse);

Использование свойств-геттеров для границ

Класс Ellipse предоставляет вычисляемые свойства для работы с его границами: left, right, top, bottom. Установка этих свойств мгновенно меняет позицию центра фигуры.

ellipse.right = ellipse.left;
ellipse.top = ellipse.bottom;

Первая строка (ellipse.right = ellipse.left) устанавливает правую границу эллипса равной его левой границе. Поскольку правая граница вычисляется как x + width/2, а левая — как x - width/2, это уравнение приводит к сдвигу центра `x` влево, пока половинки ширины не сойдутся в одной точке. Фактически, эллипс "схлопывается" по горизонтали. Вторая строка делает то же самое по вертикали, устанавливая верхнюю границу равной нижней. В результате центр эллипса перемещается в точку, которая была его нижним левым углом (если рассматривать описанный прямоугольник). Фигура отрисовывается синим контуром в новой, рассчитанной позиции.

graphics.lineStyle(2, 0x0000ff);
graphics.strokeEllipseShape(ellipse);

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

Управление эллипсами через Phaser.Geom.Ellipse интуитивно понятно и мощно. Вы можете использовать метод setPosition для простых назначений или напрямую манипулировать свойствами `x,yи границами для сложной логики. Для экспериментов попробуйте анимировать движение эллипса, изменяя его свойства в цикле обновленияupdate, создавать несколько эллипсов для формирования сложных фигур или использоватьEllipseв качестве зоны для проверки попадания курсора (ellipse.contains(x, y)`).