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

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

В игровой разработке геометрия — это не просто теория, а инструмент для создания динамического геймплея. Умение вычислять площади фигур помогает в коллизиях, генерации карт и балансировке механик. В этой статье мы разберем, как Phaser предоставляет простой API для работы с геометрией эллипса и как визуализировать его площадь в реальном времени, реагируя на действия игрока.

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

Живой запуск

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

Исходный код

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

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

        const text = this.add.text(400, 50, '');

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

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

            redraw();

        });

        redraw();

        function redraw ()
        {

            graphics.clear();

            const area = Phaser.Geom.Ellipse.Area(ellipse);

            const squareSide = Math.sqrt(area);

            graphics.fillRect(0, 0, squareSide, squareSide);

            graphics.strokeEllipseShape(ellipse);

            text.setText(`Ellipse Area: ${area}`);

        }
    }
}

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

const game = new Phaser.Game(config);

Создание сцены и графического объекта

В Phaser вся графика и логика происходят внутри сцен. В методе create мы инициализируем основные объекты.

Сначала создаем графический объект (graphics), который будет рисовать контуры и заливку. Мы задаем ему стиль линии и цвет заливки.

Затем создаем геометрический объект Phaser.Geom.Ellipse, определяющий эллипс по координатам центра и радиусам.

Также добавляем текстовый объект для отображения вычисленной площади.

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

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

const text = this.add.text(400, 50, '');

Обработка ввода и динамическое изменение

Чтобы сделать пример интерактивным, мы подписываемся на событие перемещения указателя мыши (pointermove). При каждом движении мыши обновляем размеры эллипса, используя текущие координаты указателя в качестве новых радиусов.

Затем вызываем функцию redraw для перерисовки сцены.

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

Функция перерисовки и вычисление площади

Функция redraw отвечает за всю визуализацию. Сначала она очищает предыдущие рисунки с помощью graphics.clear().

Затем происходит ключевое вычисление: вызов статического метода Phaser.Geom.Ellipse.Area, который принимает объект эллипса и возвращает его площадь.

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

После этого отрисовываем контур самого эллипса и обновляем текстовую метку.

function redraw ()
{
    graphics.clear();
    const area = Phaser.Geom.Ellipse.Area(ellipse);
    const squareSide = Math.sqrt(area);
    graphics.fillRect(0, 0, squareSide, squareSide);
    graphics.strokeEllipseShape(ellipse);
    text.setText(`Ellipse Area: ${area}`);
}

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

Каждый проект Phaser начинается с конфигурационного объекта, который передается в конструктор Phaser.Game. Здесь мы задаем базовые параметры: размеры холста, тип рендерера (WebGL или Canvas), родительский HTML-элемент и главную сцену.

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

const game = new Phaser.Game(config);

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

Вы увидели, как Phaser объединяет геометрические вычисления, обработку ввода и графику в единый рабочий процесс. Метод Phaser.Geom.Ellipse.Area — это мощный, но простой инструмент для игровой логики. Для экспериментов попробуйте: использовать вычисленную площадь для изменения физических свойств объекта (например, массы), привязать размер эллипса не к курсору, а к игровому таймеру для создания пульсирующих эффектов или реализовать проверку коллизии на основе перекрытия площадей разных фигур.