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

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

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

Живой запуск

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

Исходный код


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

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

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

            //  Redraw it
            graphics.clear();
            graphics.strokeEllipseShape(ellipse, 64);
        
        });
    }
}

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

const game = new Phaser.Game(config);

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

Вся логика примера размещена внутри метода create сцены, который выполняется один раз при ее инициализации. Здесь мы создаем сам эллипс и графический объект для его отрисовки.

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

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

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

Далее мы создаем объект Graphics, который отвечает за отрисовку примитивов. Мы настраиваем его стиль линии: толщина 2 пикселя и зеленый цвет (0x00ff00). Сразу после создания вызывается метод .strokeEllipseShape(), который обводит контур нашего эллипса. Второй аргумент (64) определяет гладкость кривой — количество сегментов, из которых состоит эллипс. Чем больше значение, тем более гладкой будет фигура.

Обработка движения курсора мыши

Чтобы фигура ожила и стала следовать за указателем, нам нужен слушатель событий. Phaser предоставляет удобный способ подписки на события ввода.

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

Эта строка устанавливает обработчик для события 'pointermove', которое срабатывает при каждом перемещении курсора мыши (или касании на сенсорном устройстве) в пределах игрового холста. В колбэк-функцию передается объект pointer, содержащий актуальные координаты.

Обновление позиции и перерисовка

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

ellipse.x = pointer.x;
ellipse.y = pointer.y;

Мы напрямую меняем свойства `xиyобъектаellipse, присваивая ему текущие координаты курсора. Важно понимать, чтоellipse` — это чисто геометрический объект данных. Изменение его координат само по себе ничего не отрисует на экране.

graphics.clear();
graphics.strokeEllipseShape(ellipse, 64);

Поэтому следующий шаг — обновить графику. Сначала мы вызываем graphics.clear(), чтобы стереть все, что было нарисовано этим объектом Graphics ранее. Если этого не сделать, на экране останутся следы от всех предыдущих позиций эллипса. Затем мы заново рисуем контур эллипса с новыми координатами, используя тот же метод strokeEllipseShape. Этот цикл «обновить данные — очистить холст — нарисовать заново» является стандартным для динамической графики в Phaser.

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

Код сцены должен быть передан в основную конфигурацию игры Phaser.

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

Объект config определяет базовые параметры: размеры игрового окна (800x600), способ рендеринга (Phaser.AUTO выбирает между WebGL и Canvas автоматически), ID HTML-элемента, в который будет встроена игра, и класс нашей сцены.

const game = new Phaser.Game(config);

Инициализация экземпляра Phaser.Game с этой конфигурацией запускает весь игровой цикл.

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

Вы освоили ключевой паттерн: разделение данных (геометрический объект Ellipse) и их визуализации (объект Graphics). Это позволяет легко управлять фигурами в логике игры. Для экспериментов попробуйте изменить размеры эллипса в зависимости от скорости движения мыши, залить его цветом с помощью fillEllipseShape, создать несколько независимых фигур или привязать эллипс не к курсору, а к спрайту персонажа, чтобы визуализировать его радиус взаимодействия.