The maths involved in isometric grids...

[Technocrat]

Code: ags

Having previously made use of quite a few grids in Operation: Forklift, I've decided to try and make the switch to isometric ones as an intellectual exercise. Unfortunately, because I suck as maths, I'm having trouble visualising the numbers I need to consider, and wondered if anyone could point me in the right direction. I'm looking to try and move two of the mechanisms I used in Forklift into an isometric layout. I'll just ask about one for now.

I use the drawingsurface to produce the battlefield, based on an array. Say for example, I have an int array of 100, called SqContent. Each of those ints can be 0 (water), 1 (grass) or 2 (forest). Each square is 20x20 pixels. At the beginning of the match, I tell the drawingsurface to make use of sprites to lay down tiles based on the integer of each square. After it completes the tenth, the "y" value increases, and it moves back to the first column to lay the second row, based on the array's information from 11-20.

[code]
 
    ds.DrawSurface(backup);  
  int Math;
  int TilezAcross;
  int TilezDown;
  TilezAcross=0;
  TilezDown=0;
  Math=0;
  while(Math<100){
    // Basic tiles
    if(SqContent[Math]==0)ds.DrawImage(TilezAcross*20, TilezDown*20, 16); // draw water if 0
    if(SqContent[Math]==1)ds.DrawImage(TilezAcross*20, TilezDown*20, 17); // draw grass if 1
    if(SqContent[Math]==2)ds.DrawImage(TilezAcross*20, TilezDown*20, 18); // draw forest if 2    
  
  TilezAcross++;
  if(TilezAcross==10){       // Has it reached the right edge? If yes, go down a level.
    TilezDown++;
    TilezAcross=0;
  }
  JunkMath++;
  }
  ds.Release();

}

Straightforward enough, because each square's position to draw in is 20 multiplied by which square we're on. What I can't visualise is, if we start with square 0,0 at the top of an isometric grid, what value I tell it to increase by to draw the next square. Can anyone with a greater understanding of isometrics fill me in a little on the maths? Or does someone know a good place for teaching about isometrics?[/code]

[Wyz]

The thing is that isometric maps have 3 axes instead of 2, Ye can still use only x and y if you alternate the placement of the tiles. Well I could explain it myself but instead I've found this site:
http://www.gamedev.net/reference/articles/article747.asp

[Wersus]

A bit off topic, but you should probably try to get rid of those magic numbers. Also the whole loop would be a bit more readable as something like this:

Code: ags

for (int y = 0; y < ROWS; y++)
{
	for (int x = 0; x < COLUMNS; x++)
	{
		int slot = y * COLUMNS + x;
		
		if (SqContent[slot] == 0)
			ds.DrawImage(x * TILE_SIZE, y * TILE_SIZE, IMG_WATER);
		else if (SqContent[slot] == 1)
			ds.DrawImage(x * TILE_SIZE, y * TILE_SIZE, IMG_GRASS);
		else if (SqContent[slot] == 2)
			ds.DrawImage(x * TILE_SIZE, y * TILE_SIZE, IMG_FOREST);
	}
}

[Jim Reed]

You probably have your tile data storred into an array (A) like this, and you need to draw it in this order (B), then you will draw some grass and road iso tiles (C), and then it will seem boring, so you will add height (D), and after a few years of toil no one will appreciate =), you'll end up having something similar to this:



Having the tile and the sides as three different sprites (E)  might help you reduce CPU drain, if you calculate which parts of the screen you need to redraw each game loop, instead of redrawing the whole screen.

Ofcourse I have never done it, and the math is way beyond me, so take this post as graphical representation of your problem, not the solution, if it helps anything.

[Khris]

I might also contribute some stuff I learned here; not before Technocrat fixes his post though.