Isometric terrain

GM Version: GM:S
Target Platform: ALL
Download: Link
Links: click

  • What is an isometric view?
Isometric view is an an axonometric projection in which the three coordinate axes appear equally foreshortened and the angle between any two of them is 120 degrees.
However here, we're going to be looking at 2:1 (width:height) type isometric, which is not true isometric, but it's easier to work with and the end user won't notice a difference.

  • How it works?
The best way to do 2D isometric in GML or any other game engine is by basically making the whole game top-down and using a set of calculations to draw the isometric sprites at the right position.
This means that you don't have to write new code for pathfinding, collision detecting an all other sorts of things.
We will be using grids (or arrays) to store the information we need.

  1. Create event
Code:
//Chunk size
chunk_size = 8;
The chunk size is the width and lenght of the terrain, 64 would equal to 4096 tiles.
Code:
//Screen position
globalX = 0;
globalY = 0;
Screen position is the absolute position in the room.
Code:
//Grid positions
LocalX = 0;
LocalY = 0;
These grid positions will be used for the ds_grid.
Code:
//Chunk start position
global.isoX = tile_width*4-tile_width/2;
global.isoY = tile_height*4;
This is the offset at which the terrain will draw the tile at 0,0 grid position. You can change this to however you want, I just made it so it centers the terrain at the view.
It's also important to set tile_width and tile_height as constants !
My tile width is 128 and the height is 64.
Code:
//Grid initialize
chunk = ds_grid_create(chunk_size,chunk_size);
//Chunk generation
 //tile_width and tile_height are defined as macros
 //Creates tiles for each position of the grid
for (var o=0; o<chunk_size; o++){
  for (var i=0; i<chunk_size; i++) {
     chunk[# i,o] = tile_add(grass_flat,0,0,tile_width,tile_height,IsoToScreenX(i,o),IsoToScreenY(i,o) ,1);
  }
}
Now we need to make the scripts IsoToScreenX,IsoToScreenY,ScreenToIsoX and ScreenToIsoY.
These are the calculations from absolute coordinates to isometric and back.

IsoToScreenX
Code:
///IsoToScreenX(LocalX,LocalY)
//Transform grid x coordinate to absolute screen x coordinate

return global.isoX + ((argument0 - argument1) * tile_width/2);
IsoToScreenY
Code:
///IsoToScreenY(LocalX,LocalY)
//Transform grid y coordinate to absolute screen y coordinate

return global.isoY + ((argument0 + argument1) * tile_height/2);
ScreenToIsoX
Code:
////ScreenToIsoX(x,y)
//Transforms absolute x coordinate to grid x coordinate

return (((argument0 - global.isoX) / (tile_width/2)) + ((argument1 - global.isoY) / (tile_height/2))) / 2;
ScreenToIsoY
Code:
///ScreenToIsoY(x,y)
//Transforms absolute y coordinate to grid y coordinate
 return (((argument1 - global.isoY) / (tile_height/2)) - ((argument0 - global.isoX) / (tile_width/2))) / 2;
And this is the result I got (except the obvious paint I did on it):



What thing do you want to learn how to do next?
  • Isometric RTS (age of empires)
  • Isometric RPG (diablo like)
  • Isometric Shooter
  • Else.
 
Last edited:
Anyone interested in this?

How it works:


The thing is, you don't need to modify the tile, but the edges of the tile. Imagine each edge of the tile is a value in a 2D array. A heightmap. Here's how a tile would look:

And then you would have a function that checks if the tile corresponds to the heightmap. For this specific tile the test would be:
if edge_north && !edge_south && !edge_west && !edge_east
{tile = tile_flat_bot_front;}
^This only works for one level terrain, for more than 1 level it will be a bit more difficult but still doable
The black rectangle is the grid snap to the edges of the tiles. When I click, I set the value in the 2D array to 1.
 
A clone of a clone ? Ok :D
openTTD is an open source game made from scratch, it has nothing to do with Transport Tycoon except that it's basically the same game. They even made their own graphics so they don't get sued.
I would be better off using something more low level (or was it the other way around) than game maker but it's doable. Thinking between GMS YYC or GMS2. GMS 2 has some pretty sweet tile animations but it's a bit high priced for me.
 
T

Teddyboy16

Guest
An isometric shooter would be nice like Zaxxon or Viewpoint.
 
Anyone interested in this?

How it works:


The thing is, you don't need to modify the tile, but the edges of the tile. Imagine each edge of the tile is a value in a 2D array. A heightmap. Here's how a tile would look:

And then you would have a function that checks if the tile corresponds to the heightmap. For this specific tile the test would be:
if edge_north && !edge_south && !edge_west && !edge_east
{tile = tile_flat_bot_front;}
^This only works for one level terrain, for more than 1 level it will be a bit more difficult but still doable
The black rectangle is the grid snap to the edges of the tiles. When I click, I set the value in the 2D array to 1.
I'd definitely interested, especially multi-level terrain
 
W

westhegoldenjackal

Guest
isometric rts : age of empires. would be very interested in that! I have a big project in mind.
 
Top