Interactive Rectangle fill

[PurpleRed]

Hello! Looking for a way to draw a clickable rectangle on canvas. Ive found 2 other post on this subject, One of which has no awnser and the other awnser is for phaser 2.

I tried to take the phaser 2 example and find the phaser 3 example on https://labs.phaser.io/

Any help is greatly appreciated. :]

[prob]

Not sure what your current setup is without any code, but there's a good introduction and explanation on the Phaser 3 Input Manager from the dev logs here and here.  

[B3L7]

The closest I could get quickly was:

 

function create ()
{
    var rect = new Phaser.Geom.Rectangle(250, 200, 300, 200);

    var graphics = this.add.graphics({ fillStyle: { color: 0x0000ff } });

    graphics.fillRectShape(rect);

    graphics.setInteractive(rect, event);
    


}

function event() {
    console.log('over');
}

 

But I couldn't find a simple way to check for pointerDown against the graphics object.

 

I think it might just be faster to use a square image that you scale to the dimensions you want and check for clicks on that:

 

https://labs.phaser.io/edit.html?src=src\input\mouse\click sprite.js

[PurpleRed]

6 hours ago, B3L7 said:

I think it might just be faster to use a square image that you scale to the dimensions you want and check for clicks on that:

 

https://labs.phaser.io/edit.html?src=src\input\mouse\click sprite.js

Thanks for the tips. The closest I could get was just using an interactive area ontop of a graphic fill but yea Ill probably just make a sprite.

[Kacper Mironiuk]

Hello,

I have the same problem and I found a solution (It's only a test code but I hope it will help somebody)

class MyGame extends Phaser.Scene {
  create() {
    let rect = new Phaser.Geom.Rectangle(250, 200, 300, 300);
    let graphics = this.add.graphics({ fillStyle: { color: 0x0000ff } });
    let pointer = this.input.activePointer; // because MyGame extends Phaser scene this is a scene

    graphics.fillRectShape(rect);

    graphics.setInteractive(rect, () => {
      if(pointer.isDown) {
        console.log('clicked');
      }
    });
  }
}

Above code is inside npm project, but in above case it should be replaced by scene variable

I hope above code help somebody

Edited April 25, 2021 by Kacper Mironiuk