Interactivity on rope object

Phaser 3
1

Hi,
I’m new in Phaser and I would like to know if there is a way to add interactivity to a Rope class object.
I’ve tried :

const rope = this.add.rope(x, y, ‘myImage’, null, 10, false)
rope.setInteractive()
rope.on(‘pointerdown’, () => {
console.log(‘click’)
})

But with no results, I am missing something ?
Thanks

2

I guess this is a Phaser bug, or else you’re not supposed to make ropes interactive, but a workaround is

rope.displayOriginX = 0;
rope.displayOriginY = 0;

You’ll probably have to give a hitArea and hitAreaCallback (Rectangle etc.) to get the proper size and position.

1 Like
3

Thanks for your help !
I’ve followed your steps and I manage to get interactivity but I cannot properly set hitArea size and position.
I’ve finally found this solution (which was in the documentation) :

    // custom hit area
    const hitArea = this.add.rectangle(100, 485, 120, 150, 0xffff00)

    // rope
    const rope = this.add.rope(100, 485, 'myImage', null, 10, false)
    rope.displayOriginX = 0.5
    rope.displayOriginY = 0.5
    rope.setInteractive(hitArea, (pointer, x, y, event) => {
      return (
        Math.abs(x) <= this.rope.displayWidth / 2 &&
        Math.abs(y) <= this.rope.displayHeight / 2
      )
    })
    rope.on('pointerdown', () => { console.log('click')} )
4 
rope.setInteractive(
  new Phaser.Geom.Rectangle(-320, -123, 640, 246),
  Phaser.Geom.Rectangle.Contains
);

this.input.enableDebug(rope);