Jump to content
  • Advertisement
Sign in to follow this  

Selecting objects with mouse at pixel accuracy?

This topic is 2771 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

I'm really confused how i do this. I use JavaScript for my game interactions but im sure the logic applies to all isometric games.

I'm trying to work out how - when a user clicks in the window the game works out what object (or image in my situation) was clicked and the process it to "do" something.

For example, If i have to objects on a map, and user clicks on one of them, so far what i have done is:

Get the mouse x:y location.

I just can't logically work out how to approach this but it seems all game devs have managed it =/

Any one got any insight here?

Share this post

Link to post
Share on other sites
The most straightforward way would probably be as AdrianC suggests, although I understand if your displayed world makes it a little more complicated than that.

You could maintain a list of bounding boxes for the (shown) clickable objects, and check though that whenever the user clicks.
A faster alternative could be to construct a quad tree next to that list so your objects in this list are looked up faster.

All these approaches would still just check an approximation of the objects.
To perform pixel-perfect detection, you'd need to check against the alpha value, or the mask of the candidate sprites.
(typically meaning peeking inside images. I don't know how that would work in JS)
Keep in mind that bigger objects may obstruct for smaller, occluded ones.

If you don't have any hills or anything (I think most browser-based isometric games today are flat) just intersect with the parallelogram,
or even better: transform the xy coords of the mouse into isometric values.

I've done this several times, and I always end up thinking of how the mouse position components contribute to the isometric coordinates:
x+: increases x value. subtracts from y value.
y+: increases x value, increases from y value.

This can be inversed, into what curiously enough is how you're plotting your isometric tiles in the first place, right? tongue.png

I'll let you find the coefficients depending on the assumed viewing angles. For typical 2:1 tiles, we're dealing with halves and doubles...

If you can't make AdrianC's solution work for you, and you use hills, i'd lookup in my "hill map" after transforming
the mouse coordinates to ordinary map coordinates.

Share this post

Link to post
Share on other sites
I can already do on click to get grid reference, but a tall sprite which may cover another tile above, would be unclickable unless i click on its base tile.

Share this post

Link to post
Share on other sites
From the sounds of it, you've already solved the problem of drawing the sprites in the correct order, so iterate through the sprites in the same order in your hit test and you should be fine.

You could break it down to:
1) Do a hit test against the base tiles to find the column of tiles being clicked on.
2) Iterate through the sprites in that column from front to back, testing if the click point falls within a non transparent region of the sprite.

Note: by "column" I mean in screen-space, I'm not sure how you've represented your grid.

Also, if your sprites have holes in them, you might run into inconsistency problems where it appears like you clicked on the sprite at the front, but it clicked through the hole and selected the one in the tile behind. so using a bounding box that includes transparent parts of the sprite might be better.

Share this post

Link to post
Share on other sites
Sign in to follow this  

  • Advertisement

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!