Rope in phaser 3

Phaser 3
1

Hey ppl,

I am currently porting a game from phaser 2 to phaser 3. I used the Phaser.Rope game object to “bend” an animation by multiple set points, but unfortunately there is no rope object in phaser 3(yet). There is an issue on github for this, but as it’s on low priority, I doubt this will get added soon.

Does anyone has an idea of how to build something like this in phaser 3? I checked how pixi does it, but honestly I am not super deep in meshes, so I don’t really know how to proceed here.

Any help is greatly appreciated :slight_smile:

2

I’m actually not familiar with the Rope class from Phaser 2, but could the Geom Line class work? Or did Rope actually deform a sprite?

3

It Actually deforms it :sweat_smile:

4

I created a fairly simple Rope class which uses the graphics object and strokes a path. You have to break up the rope into segments and have each segment gravitate towards it’s other segments with weights. Then simply paint the segments like so:

    updateGfx()
    {
        this.gfx.clear();
        this.gfx.lineStyle(this.lineWidth, this.color, this.alpha);
        this.gfx.beginPath();
        this.gfx.moveTo(this.pieces[0].posNow.x, this.pieces[0].posNow.y);
        for(let i = 1; i < this.pieces.length; i++)
        {
            this.gfx.lineTo(this.pieces[i].posNow.x, this.pieces[i].posNow.y);
        }
        this.gfx.strokePath();
        this.gfx.closePath();
    }

Here’s a little video demonstrating what this can achieve:

let rope = new Rope(this, 0, 0, 100, 300, 4, 0xffffff); //Scene, x, y, numSegments, ropeLength, lineWidth, colo

rope.gravity = .2;

rope.stiffness = 1000;

rope.damping = .8;

rope.windEnabled = true;

rope.windFrequency = .01;

rope.windUndulationAmplitude = 4

this.input.on('pointermove', (p)=>{

rope.setPosition(p.x, p.y);

});
1 Like
5

I guess we mean different types of “ropes” :smiley:
Please take a look at the phaser 2 example I posted - its not a rope in “line style” but a rope deforming a sprite/animation.

6

Ah, gotcha. In that case, you could probably use spine to get the desired effect. Here’s an example video.

You can control the paths/contraints/bones within phaser if you need procedural changes.

7

Hmm…I think the pieces are there in Phaser 3 with transformations. It would just be a pretty big project to get all the logic right in a generic way. I would assume the Phaser 2 Rope was just a convenience class that did the transformations in a specific way.

8


Could you share a solution or a hint to a solution? I don’t really understand how to make a rope like in your example on Phaser 3.70, Matter physics; I’ve used circuit physics so far, but I really liked your option!