• Advertisement
Sign in to follow this  

Tile picking in isometric game

This topic is 1556 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 working on an isometric game and originally I was using a tile size ratio of 2:1. After doing some research, it looks like the standard now seems to be a ratio of 4:3 for mobile games, so I began converting it to 4:3, but now I'm having issues with tile picking. Originally I was using the following code to perform the pick, and this works perfect when the tile size ratio is 2:1:

// mouseX & mouseY are the screen space pick locations
var gridSize = 10;
var tileWidth = 200;
var tileHeight = 100; // 200/100 = ratio of 2:1

var tileY = ((mouseY*2)-((gridSize*tileWidth)/2)+mouseX)/2;
var tileX = mouseX - tileY;
tileY = Math.round(tileY/tileHeight);
tileX = Math.round(tileX/tileHeight);

When I change tileHeight to 150, which changes the ratio to 4:3, this code obviously no longer works. I'm having trouble getting the math right on this one with the new ratio - anyone have any experience with this?

 

Share this post


Link to post
Share on other sites
Advertisement

Try this and see if it works:

var tileY = ((mouseY*(4/3))-((gridSize*tileWidth)*(3/4))+mouseX)*(3/4);

I just replaced your 2:1 ratio math with a 4:3 ratio.

 

Unfortunately not, thank you for the help though. I'm pretty confident that the calculation of tileX will also change with a different ratio.

Share this post


Link to post
Share on other sites


Unfortunately not, thank you for the help though. I'm pretty confident that the calculation of tileX will also change with a different ratio.

 

I'd have to rethink the tileY calculation, but since the tileY calculation is used for tileX, I am not so sure.

Share this post


Link to post
Share on other sites

I put together some demos to act as an example of what I'm attempting to achieve. The first example uses a 2:1 ratio and works perfectly. The second example uses a 4:3 ratio and does not work at all.

 

2:1 ratio (works) http://cssquaredgames.com/iso/iso.html

4:3 ratio (doesn't work) http://cssquaredgames.com/iso/iso_4x3.html

 

Any help is much appreciated.

Share this post


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

  • Advertisement