Making a Zone

[cseibert 3]

Does anyone have a good example of how to create a zone which invokes a callback function when a player enters / leaves the zone?  I am just trying to display some extra text when a player enters a zone, but I can't find any good examples using the Phaser3 Zone class.

I found a work around using the Rectangle object manually, but I'm assuming (hoping) there is an easier way to use the Zone class to setup this same functionality using enter / leave callbacks?

This is what I have done so far:

// create
this.zone = new Phaser.Geom.Rectangle(this.box.x - 25, this.box.y - 25, 50, 50);
this.player = this.physics.add.sprite(800, 600, 'player_handgun');
this.text = this.add.text(this.box.x + 20, this.box.y, "use", {
  font: "18px Arial",
  fill: "#ff0000",
  align: "center",
  backgroundColor: "#00ffff"
});
this.text.setOrigin(0.5, 0.5);
this.text.setVisible(false);

// update
if (Phaser.Geom.Rectangle.Overlaps(this.player.getBounds(), this.zone)) {
  this.text.setVisible(true);
} else {
  this.text.setVisible(false);
}

Again, ^ this approach works, but I rather find a way to use the Phaser's Zone class.  Some issues I have with this approach is I can't set the origin(0.5, 0.5) on the rectangle, so I have to calculate the zone offset manually.

[samme 719]

Zones don't really do their own overlap checks, but you could add an Arcade Physics body to a zone and then use an overlap collider, if you prefer that.

Even without a physics body, you could do 

Phaser.Geom.Rectangle.Overlaps(player.getBounds(), zone.getBounds())

 

[cseibert 3]

Thanks, I guess the Zone class is for something different then?  Can you explain with more examples what you mean by "add an Arcade Physics body to a zone"?

[samme 719]

https://codepen.io/samme/pen/yqJoym?editors=0010

[cseibert 3]

Thank you, I appreciate this example you made!  Makes sense now.