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

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

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

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

Живой запуск

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

Исходный код

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

        const ellipse = new Phaser.Geom.Ellipse(400, 300, 200, 100);

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

            ellipse.setSize(pointer.x, pointer.y);

            redraw();
        });

        redraw();

        function redraw ()
        {
            graphics.clear();

            graphics.fillEllipseShape(ellipse);

            const majorRadius = ellipse.getMajorRadius();

            graphics.strokeCircle(400, 300, majorRadius);
        }
    }
}

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

const game = new Phaser.Game(config);

Подготовка сцены и создание эллипса

В методе create() мы настраиваем графический объект graphics для рисования. Он будет заливать фигуры цветом 0x00aaaa и обводить контуром 0xaa0000 толщиной 2 пикселя.

Затем создается экземпляр эллипса Phaser.Geom.Ellipse. Его конструктор принимает четыре параметра: координаты центра по X и Y, ширину и высоту. Изначально эллипс позиционируется в центре сцены (400, 300) с шириной 200 и высотой 100 пикселей.

const graphics = this.add.graphics({ fillStyle: { color: 0x00aaaa }, lineStyle: { width: 2, color: 0xaa0000 } });
const ellipse = new Phaser.Geom.Ellipse(400, 300, 200, 100);

Динамическое изменение размеров

Чтобы сделать пример интерактивным, мы подписываемся на событие перемещения указателя pointermove. При каждом движении мыши вызывается метод ellipse.setSize(), который обновляет ширину и высоту эллипса, используя текущие координаты курсора (pointer.x, pointer.y).

После изменения размера вызывается функция redraw(), которая перерисовывает фигуру. Это позволяет визуально исследовать, как меняется эллипс при разных пропорциях.

this.input.on('pointermove', pointer =>
{
    ellipse.setSize(pointer.x, pointer.y);
    redraw();
});

Визуализация и вычисление радиуса

Функция redraw() отвечает за всю отрисовку. Сначала она очищает холст graphics.clear(), чтобы удалить предыдущий кадр. Затем заливает текущий эллипс с помощью graphics.fillEllipseShape(ellipse).

Ключевой момент — получение большой полуоси (major radius) эллипса через метод getMajorRadius(). Этот метод возвращает половину большей из двух осей (ширины или высоты). Результат сохраняется в переменную majorRadius.

Чтобы наглядно показать этот радиус, мы рисуем окружность с центром в точке (400, 300) и радиусом, равным majorRadius. Для этого используется graphics.strokeCircle(). Таким образом, окружность всегда будет касаться эллипса по его самой широкой стороне.

function redraw ()
{
    graphics.clear();
    graphics.fillEllipseShape(ellipse);
    const majorRadius = ellipse.getMajorRadius();
    graphics.strokeCircle(400, 300, majorRadius);
}

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

Пример завершается стандартной для Phaser 3 конфигурацией. В объекте config задаются размеры холста (800x600), автоматический выбор рендерера (Phaser.AUTO) и указание основного класса сцены Example.

Затем создаётся экземпляр игры new Phaser.Game(config), который инициализирует все системы и запускает сцену.

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

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

Метод getMajorRadius() — это простой, но мощный инструмент для работы с эллипсами. Он полезен, когда вам нужно определить дистанцию от центра до края фигуры по её наибольшей оси. Например, можно использовать это значение для расчёта радиуса круговой коллизии вокруг вытянутого объекта или для создания эффектов "ауры". Попробуйте поэкспериментировать: измените начальные размеры эллипса, добавьте вторую окружность с getMinorRadius() (малой полуосью) или привяжите движение другого игрового объекта к вычисленному радиусу, создав орбитальное вращение.