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

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

Понимание геометрических примитивов Phaser упрощает создание игровой логики, связанной с областями, коллайдерами и визуализацией. Класс `Phaser.Geom.Ellipse` предоставляет набор готовых свойств для быстрого доступа к ключевым точкам фигуры. Эта статья покажет, как использовать эти свойства для отрисовки эллипса и его описанного прямоугольника, что полезно для отладки хитбоксов или создания зон интереса.

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    create ()
    {
        const ellipse = new Phaser.Geom.Ellipse(400, 300, 250, 150);

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

        graphics.lineStyle(2, 0x00aa00);
        graphics.lineBetween(ellipse.x, ellipse.y, ellipse.right, ellipse.bottom);

        graphics.strokeRect(ellipse.left, ellipse.top, ellipse.width, ellipse.height);
    }
}

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

const game = new Phaser.Game(config);

Создание эллипса и его визуализация

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

Сначала создадим экземпляр Phaser.Geom.Ellipse. Его конструктор принимает координаты центра (x, y), ширину и высоту.

const ellipse = new Phaser.Geom.Ellipse(400, 300, 250, 150);

Затем создаем объект graphics и используем метод strokeEllipseShape, чтобы нарисовать контур нашего эллипса.

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

Использование базовых свойств: x, y, right, bottom

Каждый эллипс имеет свойства, дающие мгновенный доступ к его геометрии. Свойства `xиyхранят координаты центра. Свойстваrightиbottom` вычисляют крайнюю правую и нижнюю точки описанного прямоугольника.

В примере мы рисуем зеленую линию из центра эллипса в его правый нижний угол, используя эти свойства.

graphics.lineStyle(2, 0x00aa00);
graphics.lineBetween(ellipse.x, ellipse.y, ellipse.right, ellipse.bottom);

Это наглядно показывает связь центра фигуры с ее границами.

Описанный прямоугольник и его свойства

Любой эллипс можно вписать в выровненный по осям прямоугольник. Phaser.Geom.Ellipse предоставляет свойства для работы с этим прямоугольником: left, top, width, height.

Свойства left и top — это координаты левого верхнего угла этого воображаемого прямоугольника. Зная их и размеры, мы можем его нарисовать.

graphics.strokeRect(ellipse.left, ellipse.top, ellipse.width, ellipse.height);

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

Полный список полезных свойств Ellipse

Для комплексной работы доступны и другие вычисляемые свойства объекта. Вот основные из них: - `x,y`: Центр эллипса. - left, right: Левая и правая границы описанного прямоугольника. - top, bottom: Верхняя и нижняя границы. - width, height: Ширина и высота эллипса (и его описанного прямоугольника).

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

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

Свойства геометрических объектов в Phaser — это мощный инструмент для упрощения кода. Вместо ручных вычислений координат вы получаете их мгновенно. Поэкспериментируйте: попробуйте анимировать изменение width и height эллипса и наблюдайте, как автоматически меняются right и bottom. Используйте этот подход для отладки физических тел или создания динамических областей эффектов.