[SOLVED] Creating a clickable circle sprite

[Roofpl]

I'm in the process of playing around with clickable circle sprites and have the following, to cut out the corners.

bubble.hitArea = new Phaser.Circle(bubble.x + bubble.width/2, bubble.y + bubble.height/2, bubble.width);

Looking in the debug:

game.debug.geom(bubble.hitArea);

it seems to do the trick as it displays the hitarea perfectly over the sprite, however the actual clickable space is vastly different. By enabling the hand cursor on the sprite I can see only a very small spot on the sprite is actually clickable. I've had a look around on here to see if anyone had come across something similar but none of what I found was quite what I've got here.

Has anyone come across this before or can answer what's actually going on here? Am I wrong in using hitArea for this task?

[GiniWren]

I was able to get the hit area working like your post suggested by changing the x, y coordinates of the hit area to be simply offset by half the width/height, since it appears to be positioned with the center of the circle relative placed to your sprite's anchor:

bubble.hitArea = new Phaser.Circle(bubble.width/2, bubble.height/2, bubble.width);

Note this will make the game.debug.geom shape look incorrectly positioned, because being referenced directly as sprite.hitArea means it won't be drawn relative to the sprite's anchor. To see a debug shape drawn correctly, you'd have to do something like:

game.debug.geom(new Phaser.Circle(bubble.hitArea.x + bubble.x, bubble.hitArea.y + bubble.y, bubble.hitArea.diameter), 'rgba(255,0,0,0.3)');

 

[Roofpl]

Thank you for your response GiniWren. What you've said all makes sense, however unfortunately the hitArea of the sprite still does not!

Currently using the changes you've provided I'm still getting oddly shaped and sized hitAreas on my bubble sprite. Hopefully the GIF below better explains:

As you can see, despite the debug Circle suggesting the hitArea is covering the entire bubble sprite, the only clickable areas are a small portion of the top left.

[samme]

I'm not sure, but hitArea may be local to the sprite already. So it could be

bubble.hitArea = new Phaser.Circle(0, 0, bubble.width);

or

bubble.hitArea = new Phaser.Circle(-0.5 * bubble.width, -0.5 * bubble.height, bubble.width);

depending on the sprite anchor.

[Roofpl]

Thanks for the help samme. I've frustratingly just figured out what the problem was, which was my fault for not including more of my code even though I thought it was irrelevant.

If you scale a sprite and want to add a hitArea to the sprite, you must add the hitArea before scaling the sprite. Now I've put the hitArea line above the scale line everything works great:

 

The debug circle displays with the size of the sprite before being scaled, but that's not the end of the world.

Sorry if this shows up in the documentation somewhere and I missed it, though it is weird if it is an intended feature!

[samme]

I think there's very little documentation on hitArea.