Polygon and wrong hitArea

Phaser 3
1

I’m trying to create a GameObject represented as a polygon, and I want to highlight it on mouse-over. I tried this:

    var points = [-50, -50, 0, -50, 50, 0, 0, 50, -50, 50]
    var pl = scene.add.polygon(400, 1200, points, 0xFF0000)
    pl.setInteractive(pl.points, Phaser.Geom.Polygon.Contains)
    pl.on(Phaser.Input.Events.GAMEOBJECT_POINTER_OVER, function(){pl.fillColor = 0xFF6060} , this)
    pl.on(Phaser.Input.Events.GAMEOBJECT_POINTER_OUT, function(){pl.fillColor = 0xFF0000}, this)
    scene.input.enableDebug(pl, 0xff00ff)

However, I see the debug is showing me the hit area is actually a rectangle with the upper right corner at coordinate (0, 0, w=100, h=100). I tried playing with setOrigin on the polygon, but it shift both the filled polygon and the hit area.

  1. How do I center the hit area around my polygon?
  2. why is the hit area not reflecting the shape of the polygon (i.e. is rectangular)?
2

The Shape game objects (in this case, Phaser.GameObjects.Polygon) are not equivalent to the logical geometry objects (Phaser.Geom.Polygon). Your callback, Phaser.Geom.Polygon.Contains, expects a logical polygon object, not a set of points. Moreover, Shape game objects don’t have a points property. As a result, you’re passing undefined as the shape, so Phaser defaults to a rectangle and ignores the callback.

Replace pl.points with pl.geom. In a more complicated scenario, like in this example, you can also create a Phaser.Geom.Polygon yourself.

1 Like
3

Thank you Telinc1, that worked!