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

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

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

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

Живой запуск

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

Исходный код

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

        const graphics = this.add.graphics({ fillStyle: { color: 0xff0000 } });
        graphics.fillCircleShape(circle);
    }
}

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

const game = new Phaser.Game(config);

Инициализация сцены и конфигурация

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

class Example extends Phaser.Scene
{
    create ()
    {
        // Здесь будет размещен наш код
    }
}

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

const game = new Phaser.Game(config);

Создание геометрического круга

Объект круга создается с помощью конструктора Phaser.Geom.Circle. Он принимает три параметра: координаты центра по осям X и Y, а также радиус. Этот объект сам по себе не является спрайтом и не отображается на экране — он лишь хранит математическое описание фигуры.

const circle = new Phaser.Geom.Circle(400, 300, 100);

В данном примере круг будет расположен в центре экрана (400, 300) с радиусом 100 пикселей. Эти координаты и размеры можно легко менять для размещения круга в любой точке игрового мира.

Визуализация с помощью Graphics

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

const graphics = this.add.graphics({ fillStyle: { color: 0xff0000 } });
graphics.fillCircleShape(circle);

Ключевые моменты: 1. this.add.graphics() создает и добавляет на сцену новый объект для рисования. 2. Параметр fillStyle определяет цвет заливки (здесь — ярко-красный, 0xff0000). 3. Метод fillCircleShape() принимает ранее созданный геометрический объект circle и заливает его указанным цветом.

Применение в реальных проектах

Созданный круг — это не просто картинка. Объект Phaser.Geom.Circle можно использовать для множества практических задач благодаря встроенным методам.

* **Проверка попадания точки:** Метод circle.contains(x, y) вернет true, если точка находится внутри круга. Это полезно для кликабельных зон или триггеров.

// Проверяем, находится ли курсор мыши внутри круга
if (circle.contains(pointer.x, pointer.y)) {
    console.log('Попадание!');
}

* **Основа для физического тела:** Геометрический круг можно использовать как коллайдер для спрайта, создав физическое тело в форме круга. * **Определение зоны:** Задайте радиус вокруг персонажа для ауры или области обнаружения врагов.

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

Работа с Phaser.Geom.Circle проста, но открывает путь к созданию сложных игровых систем. Вы освоили создание и отрисовку круга. Для экспериментов попробуйте: анимировать радиус круга, создавать несколько кругов разного цвета, использовать круг как невидимую триггерную зону для запуска событий или привязать его положение к курсору мыши для интерактивного взаимодействия.