Drawing Isometric game worlds?

Update: Corrected map rendering algorithm, added more illustrations, changed formating Perhaps the advantage for the "zig-zag" technique for mapping the tiles to the screen can be said that the tile's x and y coordinates are on the vertical and horizontal axes Drawing in a diamond" approach: By drawing an isometric map using "drawing in a diamond", which I believe refers to just rendering the map by using a nested for loop over the two-dimensional array, such as this example: tile_map = ...,... for (i = 0; I = 0; j--): // Changed loop condition here. Draw( tile_mapij, x = (j * tile_width / 2) + (i * tile_width / 2) y = (i * tile_height / 2) - (j * tile_height / 2) ) With the above fix, the rendering of the map should be corrected: Zig-zag" approach: Advantage: Perhaps the advantage of the "zig-zag" approach is that the rendered map may appear to be a little more vertically compact than the "diamond" approach: Disadvantage: From trying to implement the zig-zag technique, the disadvantage may be that it is a little bit harder to write the rendering code because it cannot be written as simple as a nested for loop over each element in an array: tile_map = ...,... for (i = 0; I Size; j++): draw( tile_mapij, x = (j * tile_width) + offset_x, y = I * tile_height / 2 ) Also, it may be a little bit difficult to try to figure out the coordinate of a tile due to the staggered nature of the rendering order.

Update: Corrected map rendering algorithm, added more illustrations, changed formating. Perhaps the advantage for the "zig-zag" technique for mapping the tiles to the screen can be said that the tile's x and y coordinates are on the vertical and horizontal axes. "Drawing in a diamond" approach: By drawing an isometric map using "drawing in a diamond", which I believe refers to just rendering the map by using a nested for-loop over the two-dimensional array, such as this example: tile_map = ...,... for (i = 0; I = 0; j--): // Changed loop condition here.

Draw( tile_mapij, x = (j * tile_width / 2) + (i * tile_width / 2) y = (i * tile_height / 2) - (j * tile_height / 2) ) With the above fix, the rendering of the map should be corrected: "Zig-zag" approach: Advantage: Perhaps the advantage of the "zig-zag" approach is that the rendered map may appear to be a little more vertically compact than the "diamond" approach: Disadvantage: From trying to implement the zig-zag technique, the disadvantage may be that it is a little bit harder to write the rendering code because it cannot be written as simple as a nested for-loop over each element in an array: tile_map = ...,... for (i = 0; I A box with a box inside. TileImage1 -> A black box. TileImage2 -> A white box.

TileImage3 -> A box with a tall gray object in it. A Note on Tile Widths and Heights The variables tile_width and tile_height which are used in the above code examples refer to the width and height of the ground tile in the image representing the tile: Using the dimensions of the image will work, as long as the image dimensions and the tile dimensions match. Otherwise, the tile map could be rendered with gaps between the tiles.

12 you even drew pictures. That's effort. – zaratustra May 25 '09 at 17:58 Cheers coobird.

I'm using the diamond approach for the current game I'm developing and it's working a treat. Thanks again. – Benny May 27 '09 at 10:42 Glad to hear things are working out :) Good luck!

– coobird May 27 '09 at 14:27 What about multiple height layers? Can I draw them smiliary, starting with the lowest level and continue until reaching the highest level? – NagyI Mar 4 at 19:30 For example, if you look at this picture, how can I draw a similar map from code using tiles which are shown at the bottom?(pixeljoint.Com/files/icons/full/iso_64x64_outside_both.

Png) I know this picture is composed from more tiles than which are on the bottom. – NagyI Mar 4 at 19:49.

Either way gets the job done. I assume that by zigzag you mean something like this: (numbers are order of rendering) .. .. 01 .. .. .. 06 02 .. .. 11 07 03 .. 16 12 08 04 21 17 13 09 05 22 18 14 10 .. 23 19 15 .. .. 24 20 .. .. .. 25 .. .. And by diamond you mean: .. .. .. .. .. 01 02 03 04 .. 05 06 07 .. 08 09 10 11 .. 12 13 14 .. 15 16 17 18 .. 19 20 21 .. 22 23 24 25 .. .. .. .. .. The first method needs more tiles rendered so that the full screen is drawn, but you can easily make a boundary check and skip any tiles fully off-screen. Both methods will require some number crunching to find out what is the location of tile 01.In the end, both methods are roughly equal in terms of math required for a certain level of efficiency.

2 I actually meant the other way around. The diamond shape (which leaves the edges of the map smooth) and the zig-zag method, leaving the edges spikey – Benny May 23 '09 at 22:58.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.