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

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

При создании игр часто возникает задача динамического перемещения объектов или их геометрических границ. Метод `Phaser.Geom.Ellipse.Offset()` позволяет сдвигать эллипс на заданное расстояние по осям X и Y, что полезно для анимации траекторий, создания паттернов движения или визуальных эффектов. В этой статье мы разберем, как работает этот метод на конкретном примере, и объясним, как его можно применить в ваших проектах.

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    create ()
    {
        const ellipse = new Phaser.Geom.Ellipse(320, 225, 170, 50);

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

        graphics.strokeEllipseShape(ellipse);

        for (let i = 0; i < 10; i++)
        {
            const angle = i / 10 * Phaser.Math.PI2;

            const xOffset = Math.cos(angle) * ellipse.width;
            const yOffset = Math.sin(angle) * ellipse.height;

            Phaser.Geom.Ellipse.Offset(ellipse, xOffset, yOffset);

            graphics.strokeEllipseShape(ellipse);
        }
    }
}

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

const game = new Phaser.Game(config);

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

В начале примера создается объект эллипса с помощью конструктора Phaser.Geom.Ellipse. Этот объект определяет форму и её начальное положение на сцене.

Затем создается графический объект graphics с заданным стилем линии для отрисовки контура.

const ellipse = new Phaser.Geom.Ellipse(320, 225, 170, 50);

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

Параметры конструктора Ellipse задают координаты центра (x, y), ширину и высоту фигуры. После создания эллипс отрисовывается на сцене методом strokeEllipseShape.

Принцип работы метода Offset

Метод Phaser.Geom.Ellipse.Offset() изменяет положение центра эллипса, добавляя переданные значения смещения к его текущим координатам. Это мутирующая операция: она изменяет сам объект ellipse, а не создаёт новый.

Phaser.Geom.Ellipse.Offset(ellipse, xOffset, yOffset);

В примере смещения xOffset и yOffset рассчитываются на основе угла и размеров эллипса, что позволяет двигать его по эллиптической траектории.

Цикл смещения и визуализация

Пример использует цикл для последовательного смещения и отрисовки эллипса 10 раз. На каждой итерации вычисляется угол, а затем по нему рассчитываются смещения по осям.

for (let i = 0; i < 10; i++)
{
    const angle = i / 10 * Phaser.Math.PI2;

    const xOffset = Math.cos(angle) * ellipse.width;
    const yOffset = Math.sin(angle) * ellipse.height;

    Phaser.Geom.Ellipse.Offset(ellipse, xOffset, yOffset);

    graphics.strokeEllipseShape(ellipse);
}

Угол равномерно распределяется по полному кругу (Phaser.Math.PI2). Умножение cos(angle) на ширину, а sin(angle) на высоту создает смещение, пропорциональное форме исходного эллипса, в результате траектория движения также становится эллиптической. После каждого вызова Offset эллипс перерисовывается, создавая серию концентрических фигур.

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

Код завершается стандартной конфигурацией Phaser игры и её инициализацией.

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

const game = new Phaser.Geom(config);

Эта конфигурация создает игровое окно размером 800x600 пикселей и указывает класс Example в качестве основной сцены. Обратите внимание на опечатку в исходном примере: должно быть new Phaser.Game(config), а не new Phaser.Geom(config).

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

Метод Offset предоставляет простой способ анимировать или трансформировать геометрические фигуры, изменяя их положение. Для экспериментов попробуйте изменить множители при расчёте смещения, чтобы получить другие паттерны (например, спирали), или привяжите смещение к времени для плавной анимации движения игровых объектов вдоль эллиптических путей.