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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    text;
    path;
    curve;
    bounds;
    graphics;

    constructor()
    {
        super({
            key: 'Example'
        });
    }

    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.spritesheet('dragcircle', 'assets/sprites/dragcircle.png', { frameWidth: 16 });
    }

    create ()
    {
        const sliderGraphics = this.add.graphics();

        this.path = { t: 0, vec: new Phaser.Math.Vector2() };

        this.bounds = new Phaser.Geom.Rectangle();

        this.curve = new Phaser.Curves.Ellipse(400, 300, 100, 150);

        this.curve.getBounds(this.bounds);

        this.createSlider(sliderGraphics, 100, 10, 'width', 500, 0, 400, 100, this.curve.setXRadius);
        this.createSlider(sliderGraphics, 100, 30, 'height', 500, 0, 300, 150, this.curve.setYRadius);
        this.createSlider(sliderGraphics, 100, 50, 'start', 500, 0, 360, 0, this.curve.setStartAngle);
        this.createSlider(sliderGraphics, 100, 70, 'end', 500, 0, 360, 360, this.curve.setEndAngle);
        this.createSlider(sliderGraphics, 100, 90, 'angle', 500, 0, 360, 0, this.curve.setRotation);

        const centerPoint = this.add.image(this.curve.p0.x, this.curve.p0.y, 'dragcircle', 0).setInteractive();
        centerPoint.setData('control', 'center').setData('vector', this.curve.p0).setName("centerpoint");
        this.input.setDraggable(centerPoint);

        this.input.on(Phaser.Input.Events.DRAG, function (event, gameObject) {
            gameObject.setFrame(1);
        });

        this.input.on(Phaser.Input.Events.DRAG, function (event, gameObject) {

            if (gameObject.data.get('control') === 'center')
            {
                gameObject.x = event.dragX;
                gameObject.y = event.dragY;

                gameObject.data.get('vector').set(event.dragX, event.dragY);
            }

        });

        this.input.on(Phaser.Input.Events.DRAG_END, function (event, gameObject) {

            gameObject.setFrame(0);

        });

        this.tweens.add({
            targets: this.path,
            t: 1,
            ease: 'Linear',
            duration: 4000,
            repeat: -1
        });

        //  Debug this.graphics
        this.graphics = this.add.graphics();
    }

    update ()
    {
        this.graphics.clear();

        this.curve.getBounds(this.bounds);

        //  Draw the this.bounds
        this.graphics.lineStyle(1, 0x00ff00, 1).strokeRectShape(this.bounds);

        this.graphics.lineStyle(2, 0xffffff, 1);

        this.curve.draw(this.graphics, 64);

        this.curve.getPoint(this.path.t, this.path.vec);

        this.graphics.fillStyle(0xffff00, 1);
        this.graphics.fillCircle(this.path.vec.x, this.path.vec.y, 8);
    }


    createSlider (graphics, x, y, label, width, min, max, value, callback)
    {
        //  Default value
        value = Phaser.Math.Clamp(value, min, max);

        graphics.lineStyle(1, 0xffffff, 1);
        graphics.lineBetween(x, y + 8, x + width, y + 8);

        this.text = this.add.text(x - 10, y, label + ':', { font: '16px Courier', fill: '#00ff00' }).setOrigin(1, 0);
        const textValue = this.add.text(x + width + 10, y, value.toFixed(2), { font: '16px Courier', fill: '#00ff00' });

        const image = this.add.image(x, y + 8, 'dragcircle', 0).setInteractive();

        image.setData('labelValue', textValue);

        image.setData('left', x);
        image.setData('right', x + width);

        this.input.setDraggable(image);

        //  Drag limits

        image.setData('label', label);

        //  The range the control is allowed to be within (the actual values, not the percentage or pixels)
        image.setData('min', min);
        image.setData('max', max);
        image.setData('value', value);

        //  The scale is how many pixels = 1 unit of range
        const scale = max / width;

        image.setData('scale', scale);

        const p = Phaser.Math.Percent(value, min, max);

        // console.log('width', width);
        // console.log('min', min);
        // console.log('max', max);
        // console.log('value', value, 'p:', p, '%');
        // console.log('scale', scale);

        image.x += p * width;

        image.setData('callback', callback);

        this.input.on(Phaser.Input.Events.DRAG, (pointer, gameObject) => {
            if(gameObject.name !== "centerpoint")
            {
                this.updateSlider(gameObject, pointer, pointer.x, pointer.y)
            }
        });
    }

    updateSlider (handle, pointer, dragX, dragY)
    {
        const min = handle.getData('min');
        const max = handle.getData('max');
        const scale = handle.getData('scale');
        const left = handle.getData('left');
        const right = handle.getData('right');

        dragX = Phaser.Math.Clamp(dragX, left, right);

        handle.x = dragX;

        //  Calculate the value
        const value = (dragX - left) * scale;

        handle.setData('value', value);

        handle.getData('labelValue').setText(value.toFixed(2));

        const callback = handle.getData('callback');

        callback.call(this.curve, value);
    }

}

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

const game = new Phaser.Game(config);

Создание эллипс-кривой и вычисление границ

В методе create() инициализируется сама кривая и её ограничивающий прямоугольник (bounds). Кривая Phaser.Curves.Ellipse задаётся центром и радиусами. Важно, что границы вычисляются не статически, а динамически, с помощью метода getBounds, который принимает существующий прямоугольник и заполняет его актуальными значениями.

this.curve = new Phaser.Curves.Ellipse(400, 300, 100, 150);
this.bounds = new Phaser.Geom.Rectangle();
this.curve.getBounds(this.bounds);

Метод getBounds перезаписывает координаты и размеры переданного объекта this.bounds на основе текущего состояния кривой. Это эффективнее, чем создавать новый объект каждый кадр.

Интерактивные ползунки для управления параметрами

В примере реализован универсальный метод createSlider для создания ползунков, меняющих параметры эллипса: ширину, высоту, начальный и конечный угол, а также общий поворот. Каждый ползунок — это спрайт-кружок, который можно перетаскивать. Его позиция привязана к числовому значению, которое передаётся в callback-функцию — метод кривой.

this.createSlider(sliderGraphics, 100, 30, 'height', 500, 0, 300, 150, this.curve.setYRadius);

При перетаскивании вызывается updateSlider, которая вычисляет новое значение на основе позиции ползунка, обновляет текстовое отображение и вызывает переданный callback. Например, this.curve.setYRadius(value) мгновенно меняет вертикальный радиус эллипса.

Перетаскивание центра эллипса

Помимо ползунков, центр эллипса тоже можно перемещать. Для этого создаётся интерактивный спрайт, привязанный к вектору this.curve.p0 (центральной точке эллипса). При событии перетаскивания обновляются координаты спрайта и самого вектора.

const centerPoint = this.add.image(this.curve.p0.x, this.curve.p0.y, 'dragcircle', 0).setInteractive();
centerPoint.setData('control', 'center').setData('vector', this.curve.p0);

Обратите внимание на проверку gameObject.data.get('control') === 'center' в обработчике события DRAG. Это позволяет отличить перетаскивание центра от перетаскивания ползунков. Координаты центра эллипса обновляются напрямую в объекте this.curve.p0.

Визуализация и анимация в update()

Каждый кадр в update() происходит перерисовка. Сначала очищается графический объект this.graphics, затем заново вычисляются границы кривой и отрисовываются: прямоугольник границ и сама кривая. Также по кривой движется жёлтая точка, управляемая твином.

this.graphics.clear();
this.curve.getBounds(this.bounds);
this.graphics.lineStyle(1, 0x00ff00, 1).strokeRectShape(this.bounds);
this.curve.draw(this.graphics, 64);
this.curve.getPoint(this.path.t, this.path.vec);
this.graphics.fillCircle(this.path.vec.x, this.path.vec.y, 8);

Метод getPoint получает точку на кривой в зависимости от значения `t(от 0 до 1) и записывает её в векторthis.path.vec. Твин плавно изменяетthis.path.t`, создавая иллюзию движения точки по траектории.

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

Этот пример — отличная база для экспериментов с кривыми. Попробуйте привязать движение игрового персонажа к getPoint, используя `tкак прогресс по пути. Или используйтеgetBounds` для упрощённой проверки коллизий объекта с кривой зоной. Можно модифицировать код, чтобы ползунки управляли не эллипсом, а, например, сплайном Безье, и визуализировали его контрольные точки и касательные.