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?

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.

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.

You could use a mouse map. There were some articles on GameDev.net years ago that explained them: Here's one (and a thread elaborating on it), here's another.

That looks interesting, I'll have to give that a shot. Thanks.