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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('bg', 'assets/skies/background1.png');
    }

    create ()
    {
        this.add.image(400, 300, 'bg');

        const r1 = this.add.ellipse(200, 200, 100, 170, 0x6666ff);

        const r2 = this.add.ellipse(400, 200, 100, 170, 0x9966ff);

        r2.setStrokeStyle(4, 0xefc53f);

        const r3 = this.add.ellipse(600, 200, 100, 170);

        r3.setStrokeStyle(2, 0x1a65ac);

        const r4 = this.add.ellipse(200, 400, 100, 170, 0xff6699);

        const r5 = this.add.ellipse(400, 400, 100, 170, 0xff33cc);

        const r6 = this.add.ellipse(600, 400, 100, 170, 0xff66ff);

        r6.setSmoothness(8);

        this.tweens.add({

            targets: r4,
            scaleX: 0.25,
            scaleY: 0.5,
            yoyo: true,
            repeat: -1,
            ease: 'Sine.easeInOut'

        });

        this.tweens.add({

            targets: r5,
            alpha: 0.2,
            yoyo: true,
            repeat: -1,
            ease: 'Sine.easeInOut'

        });

        this.tweens.add({

            targets: r6,
            angle: 90,
            yoyo: true,
            repeat: -1,
            ease: 'Sine.easeInOut'

        });
    }
}

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

const game = new Phaser.Game(config);

Создание базовых эллипсов

Основной метод для создания эллипса — this.add.ellipse(). Он доступен в любом объекте сцены (Scene) через фабрику игровых объектов (Game Object Factory).

Метод принимает несколько ключевых параметров:

const ellipse = this.add.ellipse(x, y, width, height, fillColor);

Где `xиy— это координаты центра эллипса на холсте,widthиheight— его горизонтальный и вертикальный диаметры соответственно. ПараметрfillColor` — это необязательный числовой код цвета для заливки (в формате 0xRRGGBB). Если его не указать, эллипс будет создан без заливки.

В нашем примере первые три эллипса (r1, r2, r3) создаются в верхнем ряду с разными подходами к стилизации.

Стилизация: обводка и сглаживание

После создания эллипса мы можем динамически менять его свойства. Метод setStrokeStyle() добавляет или изменяет контур (обводку) вокруг фигуры.

ellipse.setStrokeStyle(lineWidth, strokeColor);

Первый параметр — толщина линии в пикселях, второй — цвет обводки. В примере для r2 установлена золотистая обводка толщиной в 4 пикселя. Эллипс r3 создается без цвета заливки (третий параметр опущен), а затем для него устанавливается тонкая синяя обводка, что делает его похожим на кольцо.

Другой полезный метод — setSmoothness(). Он контролирует качество отрисовки кривой. Чем выше значение, тем более гладкими будут края, но это может сказаться на производительности при очень большом количестве объектов. В коде для эллипса r6 сглаженность установлена на 8.

ellipse.setSmoothness(8);

Анимация с помощью Tween-менеджера

Одна из сильных сторон Phaser — встроенная система анимаций (Tweens). Она позволяет плавно изменять любые числовые свойства игровых объектов. Доступ к менеджеру твинов осуществляется через this.tweens.add().

Конфигурационный объект твина обязательно содержит свойство targets (объект или массив объектов для анимации) и свойства, которые нужно изменить.

В примере анимируются три эллипса в нижнем ряду: 1. r4: Меняется масштаб по осям X и Y (scaleX, scaleY). 2. r5: Изменяется прозрачность (alpha). 3. r6: Вращается (angle).

Ключевые параметры для создания циклической анимации:

yoyo: true,      // Анимация проигрывается и в прямом, и в обратном порядке
repeat: -1,      // Бесконечное повторение
'ease: 'Sine.easeInOut' // Функция плавности, делающая движение более естественным

Почему это работает: структура сцены

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

Конфигурация игры (config) передается в конструктор Phaser.Game. Важные параметры:

type: Phaser.AUTO, // Phaser сам выберет WebGL или Canvas
width: 800,        // Ширина игрового поля
height: 600,       // Высота игрового поля
scene: Example     // Класс основной сцены

Инициализация игры с этими настройками автоматически создает холст и запускает жизненный цикл сцены (preload, create, update).

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

Как видите, с помощью всего нескольких строк кода в Phaser можно создавать и анимировать сложные геометрические примитивы. Эллипсы, благодаря своим свойствам, отлично подходят для создания планет, пузырей, элементов HUD или абстрактных фоновых эффектов. Для экспериментов попробуйте: анимировать свойство smoothness для динамического изменения качества; комбинировать несколько твинов на одном объекте (например, вращение + пульсация); использовать эллипсы в качестве невидимых физических тел, задав им прозрачность и включив физический движок Arcade или Matter.