# Isometric terrain

Discussion in 'Tutorials' started by KayleMaster, Jan 15, 2017.

1. ### KayleMasterMember

Joined:
Jun 23, 2016
Posts:
34
GM Version: GM:S
Target Platform: ALL

• 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++) {
}
}
```
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: Jun 10, 2017
2. ### mariospantsMember

Joined:
Jun 21, 2016
Posts:
95
Can't wait to start trying this out... if I use it, I'll donate!

KayleMaster likes this.
3. ### KayleMasterMember

Joined:
Jun 23, 2016
Posts:
34
Hey if you need anything more specific ask me. Pathfinding, collision stuff like that.

mariospants likes this.
4. ### mariospantsMember

Joined:
Jun 21, 2016
Posts:
95
awesome, thanks

5. ### KayleMasterMember

Joined:
Jun 23, 2016
Posts:
34
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.

Abrexas, Under Logic and dazza_bo like this.
6. ### sylvain_lMember

Joined:
Sep 18, 2016
Posts:
705
It feels so openTTDish
an openTTD clone in GML ^^

MrFox likes this.
7. ### KayleMasterMember

Joined:
Jun 23, 2016
Posts:
34
A clone of a clone ? Ok
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.

8. ### Scr1ptMember

Joined:
Jan 16, 2017
Posts:
3
Isometric RPG is cool

9. ### Teddyboy16Member

Joined:
May 19, 2017
Posts:
4
An isometric shooter would be nice like Zaxxon or Viewpoint.

10. ### Under LogicMember

Joined:
Jun 24, 2016
Posts:
7
I'd definitely interested, especially multi-level terrain

11. ### westhegoldenjackalMember

Joined:
Dec 10, 2018
Posts:
1
isometric rts : age of empires. would be very interested in that! I have a big project in mind.

12. ### AbrexasMember

Joined:
Aug 10, 2016
Posts:
72
Isometric is hella fun to play with.

This was a neat read, many thanks.