Changes between Version 1 and Version 2 of OverviewOfIsometricEngineDevelopment

Show
Ignore:
Author:
bhook (IP: 70.91.167.201)
Timestamp:
03/25/07 17:31:04 (12 years ago)
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • OverviewOfIsometricEngineDevelopment

    v1 v2  
    99(from !MobyGames) 
    1010 
    11 http://www.bookofhook.com/Images/Isometric_Images/zaxxon.gif 
     11[[Image(http://www.bookofhook.com/Images/Isometric_Images/zaxxon.gif)]] 
    1212 
    1313Each of the elements on the screen is drawn as if 3D, but if you look closely you can tell that all the images on the screen are actually parallel to each other (but slanted to the viewer, thus giving the illusion of 3D). 
    1515For most gamers today, however, the term isometric conjures up images of role playing games, as RPGs were one of the genres that leveraged this technique to its fullest.  Ultima On-line is a popular example of a very skewed isometric form (it has a side-to-height ratio of 1:1, which practically feels like you're looking top down). 
    1616 
    17 http://www.bookofhook.com/Images/Isometric_Images/uo.jpg 
     17[[Image(http://www.bookofhook.com/Images/Isometric_Images/uo.jpg)]] 
    1818 
    1919The isometric grid pattern is immediately apparent from the floor tiles in the above image. 
    2323'''X-Com: UFO Defense''' 
    2424 
    25 http://www.bookofhook.com/Images/Isometric_Images/x-com.gif 
     25[[Image(http://www.bookofhook.com/Images/Isometric_Images/x-com.gif)]] 
    2626 
    2727'''Syndicate''' 
    2828 
    29 http://www.bookofhook.com/Images/Isometric_Images/syndicate.gif 
     29[[Image(http://www.bookofhook.com/Images/Isometric_Images/syndicate.gif)]] 
    3030 
    3131'''Crusader: No Remorse''' 
    3232 
    33 http://www.bookofhook.com/Images/Isometric_Images/crusader.jpg 
     33[[Image(http://www.bookofhook.com/Images/Isometric_Images/crusader.jpg)]] 
    3434 
    3535'''Transport Tycoon''' 
    3636 
    37 http://www.bookofhook.com/Images/Isometric_Images/rctycoon.jpg 
     37[[Image(http://www.bookofhook.com/Images/Isometric_Images/rctycoon.jpg)]] 
    3838 
    3939'''Diablo''' 
    4040 
    41 http://www.bookofhook.com/Images/Isometric_Images/diablo.jpg 
     41[[Image(http://www.bookofhook.com/Images/Isometric_Images/diablo.jpg)]] 
    4242 
    4343All of the above have the more characteristic 2:1 aspect ratio for the isometric tiles.  They also share the characteristic of a relatively flat floor and not much in the way of elevation changes. 
    4747'''Baldur's Gate 2''' 
    4848 
    49 http://www.bookofhook.com/Images/Isometric_Images/bg2.jpg 
     49[[Image(http://www.bookofhook.com/Images/Isometric_Images/bg2.jpg)]] 
    5050 
    5151While noticeably better looking, the technology actually took a step back in some ways since there were no longer tiles or the concept of elevations.  But the pictures sure were pretty (which exacted its own toll, primarily on the artists responsible for constructing such images). 
    6161'''Tactics:Ogre''' 
    6262 
    63 http://www.bookofhook.com/Images/Isometric_Images/kol.png 
     63[[Image(http://www.bookofhook.com/Images/Isometric_Images/kol.png)]] 
    6464 
    6565'''Final Fantasy Tactics: Advance''' 
    6666 
    67 http://www.bookofhook.com/Images/Isometric_Images/ffta.png 
     67[[Image(http://www.bookofhook.com/Images/Isometric_Images/ffta.png)]] 
    6868 
    6969From the screen shots we can see that it's the 2:1 isometric tile configuration again, just as with the earlier PC games.  There are, in fact, a lot of similarities between these engines and those of the early games such as Syndicate.  The biggest identifying characteristic of a GBA isometric game is that they're constructed from "blocks".  They support elevation by stacking cubes on top of each other, and the maps are often very small (due to the limited RAM of the GBA, not to mention it's kind of annoying to scroll around large maps without a mouse or real keyboard). 
    138138The fundamental realization is that you can just invert the map-to-screen transformation (used during rendering). The simplified form of the map to screen transformation is this: 
    139139 
    140 http://www.bookofhook.com/Images/Isometric_Images/map_to_screen.gif 
     140[[Image(http://www.bookofhook.com/Images/Isometric_Images/map_to_screen.gif)]] 
    141141 
    142142Which could be expressed in matrix form: 
    143143 
    144 http://www.bookofhook.com/Images/Isometric_Images/map_to_screen_matrix.gif 
     144[[Image(http://www.bookofhook.com/Images/Isometric_Images/map_to_screen_matrix.gif)]] 
    145145 
    146146Now that it's in matrix form we could think of this in terms of invertability -- to go from a screen coordinate to a map coordinate would just mean applying the inverse of the map-to-screen transformation. 
    148148But this is way more complicated than it needs to be, especially if you don't know or understand matrices and vectors and inversions and all that good stuff. Instead, we can look at it as basic algebra. If we take our earlier equations for our screen coordinates, apply substitution and solve for the map coordinates using good old elimination and back substitution, we get the same answer. I won't bother with all the steps -- this is basic high school math -- but the final result is something reasonably simple: 
    149149 
    150 http://www.bookofhook.com/Images/Isometric_Images/screen_to_map.gif 
     150[[Image(http://www.bookofhook.com/Images/Isometric_Images/screen_to_map.gif)]] 
    151151 
    152152That's it, problem solved. The basic equation is simplistic in that it doesn't take into account any translation (scrolling) or other offsets for toolbars and user interface, but those are easy enough to substitute back in.