在Phaser 3中拖动连接到图像的多条线

时间:2018-09-22 14:33:16

标签: phaser-framework

我是Phaser的新手,想知道我是否在正确的轨道上。目标是从其他图像中拖动连接有多条线的图像,并在拖动图像时使这些线随图像一起移动。我认为帖子底部的示例是一个很好的起点。我基于此的代码如下。任何帮助,如果这是可能的,以及在正确方向上的任何指针,将不胜感激。谢谢

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

    var path;
    var curve;
    var graphics;

    var game = new Phaser.Game(config);

    function preload ()
    {
        this.load.spritesheet('dragcircle', 'assets/sprites/dragcircle.png', { frameWidth: 16 });
    }

    function create ()
    {
        graphics = this.add.graphics();

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

        curve = new Phaser.Curves.Line([ 100, 100, 600, 400 ]);
        curve2 = new Phaser.Curves.Line([ 100, 100, 300, 100 ]);

        var point0 = this.add.image(curve.p0.x, curve.p0.y, 'dragcircle', 0).setInteractive();
        var point1 = this.add.image(curve.p1.x, curve.p1.y, 'dragcircle', 0).setInteractive();

        var point3 = this.add.image(curve2.p0.x, curve2.p0.y, 'dragcircle', 0).setInteractive();
        var point4 = this.add.image(curve2.p1.x, curve2.p1.y, 'dragcircle', 0).setInteractive();

        point0.setData('vector', curve.p0);
        point1.setData('vector', curve.p1);
        point3.setData('vector', curve2.p0);
        point4.setData('vector', curve2.p1);

        this.input.setDraggable([ point0, point1,point3,point4]);

        this.input.on('dragstart', function (pointer, gameObject) {

            gameObject.setFrame(1);

        });

        this.input.on('drag', function (pointer, gameObject, dragX, dragY) {

            gameObject.x = dragX;
            gameObject.y = dragY;

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

        });

        this.input.on('dragend', function (pointer, gameObject) {

            gameObject.setFrame(0);

        });


    }

    function update ()
    {
        graphics.clear();
        graphics.lineStyle(2, 0xffffff, 1);

        curve.draw(graphics);
        curve2.draw(graphics);

    }

Example from Phaser Labs

0 个答案:

没有答案