Isometric terrain

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

  1. KayleMaster

    KayleMaster Member

    Joined:
    Jun 23, 2016
    Posts:
    34
    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.
    [​IMG]
    • 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):
    [​IMG]


    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. mariospants

    mariospants Member

    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. KayleMaster

    KayleMaster Member

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

    mariospants Member

    Joined:
    Jun 21, 2016
    Posts:
    95
    awesome, thanks
     
  5. KayleMaster

    KayleMaster Member

    Joined:
    Jun 23, 2016
    Posts:
    34
    Anyone interested in this?
    [​IMG]
    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:
    [​IMG]
    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.
    [​IMG]
     
    Abrexas, Under Logic and dazza_bo like this.
  6. sylvain_l

    sylvain_l Member

    Joined:
    Sep 18, 2016
    Posts:
    705
    It feels so openTTDish :)
    an openTTD clone in GML ^^
     
    MrFox likes this.
  7. KayleMaster

    KayleMaster Member

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

    Scr1pt Member

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

    Teddyboy16 Member

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

    Under Logic Member

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

    westhegoldenjackal Member

    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. Abrexas

    Abrexas Member

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

    This was a neat read, many thanks.
     

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice