One for the mathematicians: mapping screen click to iso grid

[togFox]

Never done iso maps before so never realised how hard this is. I have an isometric tiled map where 1,1 is in the top corner and 1,col is in the right corner of the screen (orientation matters). When there is a mouse-click on a tile, I need to work out which tile was clicked. I watched this very good tutorial where the first 10 minutes explains the maths but then he jumps to C# or C++ or to a language I can't even identify

https://www.youtube.com/watch?v=ukkbNKTgf5U

None the less - I pick through the demo code he provides here:
https://github.com/OneLoneCoder/olcPix ... cTiles.cpp

and I think I've done okay translating the C into LUA:

Code: Select all

function ConvertGraphicsToGridXY(x,y)
-- Converts a screen co-ordinate (origin top-left corner) into an isometric grid co-ordinate
	local tilewidth = 32
	local tileheight = 21

	-- Work out active cell. This means the 'normal' left/right aligned grid
	local cellx = x / tilewidth
	local celly = y / tileheight
	
	-- Work out mouse offset into cell. Will be used later to determine if x,y is in one of the corners of the cell
	local offsetx = x / tilewidth
	local offsety = y / tileheight
	
	isox = cf.round(celly + (cellx),1)		-- cf.round is just a rounding function from one of my personal libraries
	isoy = cf.round(celly - cellx,1)
	
	return isox,isoy

end

The approach is to 'overlay' an invisible left/right,up/down grid over the isometric grid, determine which cell was clicked, then determine which corner of the cell was clicked, and then map that to the iso grid.

I have two problems:
a) is my code conversion actually correct (I think it is)
b) in the tutorial, he uses some sort of colour mask thingy to detect corner clicks. Anyone familiar with the subject might have seen this before:


Other languages can check which colour was clicked and thereby know what corner was clicked. Is there a similar way in lua/love2d?

Here is my tiled map for reference:



Finally, I'm happy to use some module or engine or something with this but things like STI and tileclick either don't do isometric or don't do forever expanding random maps (i.e you have to handcraft each map).

This is just day 2 on this project and I'm pretty chuffed with the progress already. With so many isometric dungeon-crawlers out there I'm hoping this is an easy problem to fix. Thanks.

[togFox]

I've just found this function in LUAPill github that is probably helpful:

Code: Select all

function luapill:screenToMap(screen)
   local map = {}
   screen.x = (screen.x - CAMERA.x) / TILESCALE
   screen.y = (screen.y - CAMERA.y) / TILESCALE
   map.x = math.floor(math.floor(screen.x / TILE_WIDTH_HALF + screen.y / TILE_HEIGHT_HALF) / 2)
   map.y = math.floor(math.floor(screen.y / TILE_HEIGHT_HALF -(screen.x / TILE_WIDTH_HALF)) / 2) + 1
   return map
end

I don't need tilescale (camera zooming) and camera.x/y is probably relevant (panning the map). I'm sure a solution is close!

[ivan]

It's possible to do this using just math (without a bitmap mask), but it depends on the tilt of the tile.
A while ago I wrote a short tutorial on:
https://2dengine.com/?p=isometric#Mouse ... tile_index

[sisyphu2]

Never done iso maps before so never realised how hard this is. I have an isometric tiled map where 1,1 is in the top corner and 1,col is in the right corner of the screen (orientation matters). When there is a mouse-click on a tile, I need to work out which tile was clicked. I watched this very good tutorial where the first 10 minutes explains the maths but then he jumps to C# or C++ or to a language I can't even identify

https://www.youtube.com/watch?v=ukkbNKTgf5U

None the less - I pick through the demo code he provides here:
https://github.com/OneLoneCoder/olcPix ... cTiles.cpp

and I think I've done okay translating the C into LUA:

Code: Select all

function ConvertGraphicsToGridXY(x,y)
-- Converts a screen co-ordinate (origin top-left corner) into an isometric grid co-ordinate
	local tilewidth = 32
	local tileheight = 21

	-- Work out active cell. This means the 'normal' left/right aligned grid
	local cellx = x / tilewidth
	local celly = y / tileheight
	
	-- Work out mouse offset into cell. Will be used later to determine if x,y is in one of the corners of the cell
	local offsetx = x / tilewidth
	local offsety = y / tileheight
	
	isox = cf.round(celly + (cellx),1)		-- cf.round is just a rounding function from one of my personal libraries
	isoy = cf.round(celly - cellx,1)
	
	return isox,isoy

end

The approach is to 'overlay' an invisible left/right,up/down grid over the isometric grid, determine which cell was clicked, then determine which corner of the cell was clicked, and then map that to the iso grid.

I have two problems:
a) is my code conversion actually correct (I think it is)
b) in the tutorial, he uses some sort of colour mask thingy to detect corner clicks. Anyone familiar with the subject might have seen this before:


Other languages can check which colour was clicked and thereby know what corner was clicked. Is there a similar way in lua/love2d?

Here is my tiled map for reference:



Finally, I'm happy to use some module or engine or something with this but things like STI and tileclick either don't do isometric or don't do forever expanding random maps (i.e you have to handcraft each map).

This is just day 2 on this project and I'm pretty chuffed with the progress already. With so many isometric dungeon-crawlers out there I'm hoping this is an easy problem to fix. Thanks.

I encountered the same challenge when starting my own isometric game.
This article was the most useful for me when starting out:
http://clintbellanger.net/articles/isometric_math/
As the poster above says, I would also endorse a simple mathematical approach.

[RNavega]

This article was the most useful for me when starting out:
http://clintbellanger.net/articles/isometric_math/

Nice tutorial, thanks. I like how it's framed as an affine transformation of spaces -- to travel on the horizontal axis you need a 2D vector, as well as another 2D vector to travel on the vertical axis. So it's not just (x,y), but (x,y),(u,v).

What I didn't understand was this part:

EDIT: whoops, nevermind, I was making an arithmetic error.