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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    create ()
    {
        //  Our ellipse is centered at 400x300 and is 600px wide by 300px tall
        const ellipse = new Phaser.Geom.Ellipse(400, 300, 600, 300);

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

        graphics.strokeEllipseShape(ellipse, 64);
    }
}

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

const game = new Phaser.Game(config);

Создание геометрического эллипса

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

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

Параметры в порядке следования: 1. **X (400)**: Координата центра эллипса по горизонтали. 2. **Y (300)**: Координата центра эллипса по вертикали. 3. **width (600)**: Ширина (диаметр по оси X) эллипса. 4. **height (300)**: Высота (диаметр по оси Y) эллипса.

Таким образом, мы создали эллипс с центром в точке (400, 300), шириной 600 пикселей и высотой 300 пикселей.

Настройка графического контекста

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

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

В этом вызове: * this.add.graphics() — фабричный метод для создания объекта отрисовки внутри текущей сцены. * lineStyle — объект конфигурации для стиля линии. Мы задаем толщину линии в 2 пикселя и зеленый цвет (шестнадцатеричный код 0x00ff00).

Теперь объект graphics готов рисовать контуры фигур заданным стилем.

Отрисовка контура эллипса

Созданный геометрический объект ellipse передается методу отрисовки. Ключевой метод здесь — strokeEllipseShape.

graphics.strokeEllipseShape(ellipse, 64);

Что происходит при вызове: 1. graphics.strokeEllipseShape(...) — команда нарисовать контур (обводку) эллипса. 2. Первый аргумент (ellipse) — это наш заранее созданный геометрический объект Phaser.Geom.Ellipse. 3. Второй аргумент (64) — **важный параметр сглаживания**. Он определяет количество сегментов (точек), из которых будет состоять контур эллипса. Чем выше значение, тем более гладкой будет кривая. Значение 64 является достаточным для визуально плавной кривой на большинстве экранов.

Сборка сцены и конфигурация игры

Весь код выполняется внутри метода create() сцены, который является стандартным хуком жизненного цикла Phaser для инициализации объектов.

Полная минимальная конфигурация игры выглядит так:

const config = {
    width: 800,
    height: 600,
    type: Phaser.AUTO,
    parent: 'phaser-example',
    scene: Example // Указываем класс нашей сцены
};

const game = new Phaser.Game(config);

В конфиге задается размер холста (800x600), автоматический выбор рендерера (WebGL или Canvas) и элемент на странице (parent), внутрь которого будет встроена игра. Класс Example, содержащий нашу логику, передается в свойство scene.

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

Класс Phaser.Geom.Ellipse — это мощный и простой строительный блок. Вы научились создавать геометрическую фигуру и визуализировать ее с помощью Graphics. Для экспериментов попробуйте: анимировать изменение ширины и высоты эллипса для эффекта "пульсации", использовать ellipse.contains(x, y) для проверки попадания курсора в область или привязать эллипс в качестве тела физического спрайта для создания объектов с овальной формой коллизии.