Detecting if something was clicked on

[hustlerinc]

I'm trying to figure out the simplest way to detect if something on my screen was clicked.

Currently the only clickable objects are menu buttons, so it was easy to implement by if (clickX >= 5 && and so on..). Sure aslong as whats clicked is static and just the menu it works fine. But this wont do once there are more clickable objects and they start moving around.

So now I need a function to detect if anything clickable was within the click, and let the clicked object know that it was clicked. For flexibility my requirements are that it works no matter what was clicked, menu button, game object, tile in map editor or whatever. It should only send the "you've been clicked" message to the object.

I'm leaning towards an array to keep track of clickable objects and their x,y positions. Once a click happens on the canvas it compares the clickX and clickY to these values.

Is there any better way to do it? How do game engines handle this?

[rich]

As well as your array of clickable objects you also need to know the z-index of each of them. For example if 4 items overlap you may only want the click to be detected by the one on the top. But then this opens up a can of worms if you need pixel accurate click detection - because what if you click on a rotated object? Or a transparent area of an object on the top, so technically it should only fire on the object below. You get the idea.

 

For now I would put all objects in some kind of array and do a simple bounding box check against them all (if there are thousands of them there are ways to optimise this later). Keep a reference to those items who's bounds check passed and then work out which of them is on the top.

[hustlerinc]

Right, I didn't even consider the z-index, even the simplest game has the menu on top.

I know the concept of AABB boxes, but I don't know if I'm implementing it correctly. When I do it i do it like this:

if (x <= objectX && y <= objectY && x >= objectX + object.width && y >= objectY + object.height)

Being a fan of clean and flexible code this makes my eyes itch, and even moving the menu is a pain since there are if else conditions too for each button (gamestates). My code isn't variables as in my example but exact pixels, because my menu is an array, and drawn with some math like this:

canvas.width - ((array.length * button.width) + (array.length * 5pxMargin))

That puts the menu top right no matter the amount of buttons, but theres no use having it that flexible if I have to hardcode the positions in the clickhandler anyway. When editing 3 buttons I need to change 20(!) numbers in the click event. Sure I could push the x and y positions into another array and this would work for the menu. But if Im gonna do that I might aswell have that array handle the entire viewport, optimizing what is drawn on screen at the same time.

How do you do it on photonstorm? Just AABB as you mentioned? Box2d must have this figured out (except the transparency part), how do they do it in english?

[rich]

Surely your objects (buttons, sprites, etc) know enough about themselves to know their x/y coordinate and width/height? In which case it would be trivial to add a function that just takes in the mouse x/y coords + an object and returns a true/false if the mouse is over it or not. Then you don't need to have a huge stack of hard-coded values and checks.

 

In Phaser I use several tests. First an AABB for fast elimination, then a rotated rect and finally if needed a pixel perfect check. Feel free to pull apart the source to see it in action.

[hustlerinc]

No they don't since it's just a boilerplate start screen and menu right now, no real gameplay. But yeah I'll have to include the x and y for each button, I used to store them but removed it when I added the for () loop.

I like phaser the code is easier to understand than many other libraries I've looked at. My gamestate is based on that. Will dig through it indepth when I get the time. Are the clicks handled in 1 function or are there a few working togheter? So I know what to look for.

[rich]

The 2 you'd need to look at are input/Pointer.js and input/InputHandler.js (the InputHandler is attached to the Sprite objects directly)

[claire]

How to detect if a sprite is click?

sprite.input.pointerDown()

This is not working.

Any idea?

[rich]

Probably best to start a thread about this in the Phaser forum, as it's not really related to here.