Coordinates and Isometric Grids

BlitzMax Forums/BlitzMax Programming/Coordinates and Isometric Grids

blackwater

(Posted 2012) [#1]

Hi all. I'm in the process of creating an isometric grid for the purposes of placing isometric sprites and coordinates for AStar navigation. Let me preface this post by saying I don't have advanced math skills :)

So what I came up with last night is to run through a couple of For loops to create a large diamond and a bunch of smaller diamonds within that. My thinking is when I create it, I will know the X.Y coordinates of each corner (4 corners for each diamond tile). When I get the mouse coordinates, I will run through a custom List and know which tile was clicked on.

The problem is the size of the loop gets very big very quickly and my editor is clearly lagging because of it. To make a 100 x 100 isometric grid by drawing each line, that's 10000 runs. The map size is OK but I was hoping for bigger. Also, it seems really like a "brute force" method to have to run through thousands of nodes to find out which tile I clicked on.

Is there a better, faster way of doing this? The reason I'm drawing the lines is so I can see where I'm placing tiles (sprites) to line them up correctly. But then I started thinking if I'm somehow able to know what the coordinates are for each tile without pre-generating them I should be able to place the sprite and have it lock in to that tile without me having to visually make sure it's lined up correctly.

I have a few other ideas I haven't tried yet, the biggest one is generating the grid from an origin of known fixed coordinates, such as the top left of the screen somehow but haven't fleshed it out yet. I've read a bunch of articles off google but haven't really found anything of use, or at least anything that I can translate into simpler terms.

So anyone have any ideas or methods or another direction I can go in? I'm thinking this discussion will be helpful to other people as well since I can't be the only one wanting to create a large isometric grid.

Thanks in advance for help!

Enyaw

(Posted 2012) [#2]

Maybe this code might be of some help to you and you might find some part of it that could help you out.

Const Y_Offset:Int = 100
Global Setup:TSetup = New TSetup
Global tm:TMouse = New TMouse

Graphics Setup.Gfx_Width, Setup.Gfx_Height


Repeat
Cls

DrawText " FPS-" + FPS.calc() + " " + tm.xc() + " " + tm.yc(), 0, 0

Iso(px(tm.xc(), tm.yc(), 0) - 16, py(tm.xc(), tm.yc(), 0) + (Y_Offset + 1), 16, 8)

Drawgrid()

Flip
Until KeyDown(KEY_ESCAPE) Or AppTerminate()
End

'*****************************************************************************************

Type TSetup
	Field Gfx_Width:Int = 800
	Field Gfx_Height:Int = 600
	Field GSizeX:Int = 21
	Field GsizeY:Int = 21
End Type

Type FPS
	Global counter:Float, time:Float, TFPS:Float
	Function calc:Int()
		counter:+1
		If time < MilliSecs()
			TFPS = counter' <- Frames/Sec
			time = MilliSecs() + 1000'Update
			counter = 0
		EndIf
		Return TFPS
	EndFunction
EndType

Type TMouse
	Function xm:Int() ' return iso mousex coordinate
		Local v:Int = MouseX() - 32
		Return v
	End Function

	Function ym:Int()
		Local v:Int = MouseY() - Y_Offset + 16 ' return iso mousey coordinate
		Return v
	End Function

	Function xc:Int()
		Local v:Int = Limit(Int((xm() + ym() + ym() - 400) Sar 5), 0, 20) ' limit coordinates to iso X grid
		Return v
	End Function

	Function yc:Int()
		Local v:Int = Limit(Int((ym() + ym() - xm() + 300) Sar 5), 0, 20) ' limit coordinates to iso Y grid
		Return v
	End Function
End Type


'*********************************************************************************

Function Drawgrid()
	Local cx:Int = 384
	Local cy:Int = 10 + Y_Offset
	SetColor(255, 255, 255)
	For Local yy:Int = 0 To Setup.GsizeY
		Local ax:Int = cx
		Local ay:Int = cy
		For Local xx:Int = 0 To Setup.GSizeX
			If xx < 21 Then DrawLine ax, ay, ax + 16, (ay + 8)
			If yy < 21 Then DrawLine ax, ay, ax - 16, (ay + 8)
			ax = ax + 16
			ay = ay + 8
		Next
		cx = cx - 16
		cy = cy + 8
	Next
End Function

Function Limit:Int(fl:Int, fb:Int, ft:Int)
	If fl > ft Then fl = ft
	If fl < fb Then fl = fb
	Return fl
End Function

Function px:Int(X:Int, Y:Int, Z:Int) 'iso X calculation
	Local xp:Int = 400 - 16 + (X - Y) Shl 4
	Return xp
End Function

Function py:Int (X:Int, Y:Int, Z:Int) 'iso y calculation
	Local yp:Int = 10 + (X + X + Y + Y - Z) Shl 2
	Return yp
End Function

Function Iso(X:Float, Y:Float, xs:Float, ys:Float)
	Local P:Float[] = [X + 0 * xs, Y + 1 * ys, X + 1 * xs, Y + 0 * ys, X + 1 * xs, Y + 0 * ys, X + 2 * xs, Y + 1 * ys, X + 2 * xs, Y + 1 * ys, X + 1 * xs, Y + 2 * ys]
	SetColor(255, 0, 0)
	DrawPoly P
	SetColor(255, 255, 255)
End Function

matibee

(Posted 2012) [#3]

I'm not an expert in isometric games as such but in these cases it helps to have screen-to-world and world-to-screen transformation functions.

If you have a draw origin (of a scrolling map) a tile offset and a pixel inside that tile, you can calculate the actual screen coords (and prove it with a simple bit of test code.) That's world-to-screen. Then just reverse all those operations and you'll have a screen-to-world.

If you post some test code I can help you more.

Matt Merkulov

(Posted 2012) [#4]

DWLab framework has isometric cameras with given coordinate system OX and OY vectors which code contains isometric screen-to-field and back transformations.