How to make clickable area visible?

Phaser 3
1

Hi!

I have a “token” animation which consists of a dropping coin and the player has to click it to pick the coin. I realized that it’s hard to pick the coin (I have to keep clicking around until manage to pick it by chance) and I would like to see what’s going on by checking the allowed clicking area.

I know that there is a way of turning the clickable area visible for debugging purposes but I am not being able to remind how to do this.

My code:

mytoken = this.add.sprite(x,y).setInteractive();

this.anims.create({
    key: "Token",
    frames: this.anims.generateFrameNames("Token"),
    frameRate: 20,
    repeat: 0
});

mytoken.on('pointerup', (e) => {
    // do things
}

mytoken.play("Token");

ALSO how can I set the shape area and the useHandCursor at the same time? I tried this but it didn’t work:

mysprite = this.add.sprite(x,y).setInteractive(new Phaser.Geom.Rectangle(0, 0, 20, 20), Phaser.Geom.Rectangle.Contains,{ useHandCursor: true });

Any help?

Thanks!

2

You pass exactly one argument to setInteractive(), Phaser.Types.Input.InputConfiguration.

And

this.input.enableDebug(gameObject);
1 Like
3

Samme!

The enableDebug worked perfectly, thanks!

I checked the InputConfiguration link and managed to see what attributes can be added but not how to implement it. Would you have an example?

I tried:

mytoken = this.add.sprite(x,y).setInteractive(new Phaser.Geom.Rectangle(0, 22, 27, 29), Phaser.Geom.Rectangle.Contains,Phaser.Types.Input.useHandCursor(true));

Expecting that it would add the desired area to the sprite AND the use of hand cursor but it didn’t work. I got an error Uncaught TypeError: Cannot read property ‘Input’ of undefined.

Thanks!

PS: I really wish the Phaser documentation had examples of usage…

4 
this.add.sprite(/*…*/).setInteractive({
  hitArea: new Phaser.Geom.Rectangle(0, 22, 27, 29),
  hitAreaCallback: Phaser.Geom.Rectangle.Contains,
  useHandCursor: true
});
2 Likes
5

Cool, thank you very much Samme!