Pixi Polygon Hit Area Problems

[hexdecks]

Hi,

 

I'm posting this on the Phaser forums as I'm not getting much of a response on the Pixi forums. Also, I think the answer could be useful for users of Phaser (as Phaser uses the same convention as far as I know).

 

I am having difficulty defining a polygon hitArea for a sprite and I'm really not sure what I'm doing wrong.

For test purposes; I have done the following:

 

• Drawn a graphic to the screen
• Created a sprite
• Given the sprite a hit area with the same co-ords as the graphic I have drawn (but relative instead of absolute co-ords)
• Added a click handler to the sprite so that I can raise an alert() when I click inside the shape

 

It is almost detecting all clicks over the shape but not everywhere. Especially around the inside edges of the shape, the click event is not firing.

My code is as follows:

function drawTest()			{				// I defined the polygon which will be drawn to screen as a shape				var funnyShape = new PIXI.Polygon([					new PIXI.Point(100,100),					new PIXI.Point(200, 300),					new PIXI.Point(315, 210),					new PIXI.Point(40, 120),					]);				// I create an instance of the graphics object				var theShape = new PIXI.Graphics();				// I draw the shape to the polygon area indicated				theShape.beginFill(0xE3BE10);					theShape.drawShape(funnyShape);				theShape.endFill();				// I add the shape to the screen				stage.addChild(theShape);				// create sprite				// I create my sprite				var mrSprite = new PIXI.Sprite();				// I position and anchor my sprite				mrSprite.position.x = 100;				mrSprite.position.y = 100;				mrSprite.anchor.x = 100;				mrSprite.anchor.y = 100;				// I make sure the sprite is interactive (clickable)				mrSprite.interactive = true;				// The hit area is relative co-ords, so I set the hit area (should be the same as the drawn polygon)				mrSprite.hitArea = new PIXI.Polygon([					new PIXI.Point(0,0),					new PIXI.Point(100, 200),					new PIXI.Point(215, 110),					new PIXI.Point(-60, 20)					]);				// I add the click event handler				mrSprite.click = function(mousedata) {					alert("Clicked");					};								// I add the sprite to the screen				stage.addChild(mrSprite);			}

Any help or guidance you could give would be great as this problem has been driving me up the wall for a week!

Thanks! (Apologies for posting in the Phaser forums). Hopefully it is relevant as Phaser uses Pixi.

 

Jordan