Isometric Game Programming
From GMpedia.org Wiki
Contents |
[edit] Display
Order of drawing is important in isometric games. Fortunately Flash can help us out with some of this.
[edit] A simple back-to-front overdraw (Painter's algorithm)
Like the title implies: the backmost item is drawn first, then successive items are drawn over it. That part's not hard to understand, but in an isometric game, one works with three dimensions, which adds an additional degree of complexity.
Fortunately, isometric perspective is simpler than true 3d: if we have a bunch of sprites with an x and a y (where x=0, y=0 equals the topmost corner of the view, increasing to the maximum at the bottommost corner), then we simply add x and y together, and sort by the result: the largest value is closer to the front. The z value never comes into play: it just offsets the visual y coordinate.
[edit] Caching
If you are planning to use a static or mostly static isometric background, it can be computed once and drawn to a bitmap. Making cached backgrounds that can overlap the characters is unfortunately much harder, as backgrounds will overlap at some depths and not others, so it's not simply a matter of rendering a single background and reordering against it.
[edit] Culling
When rendering simple isometric graphics, lowering the amount of drawing necessary is relatively easy: when testing some tile, if either the tile directly in front of(x+1, y+1) or the two to either side(x+1 and y+1) is tall enough to cover the tested tile, then you can eliminate it from your drawing.
(if you use strange/oversized shapes this may become harder)
[edit] Picking
Tile picking - mapping a 2d screen coordinate, such as the mouse cursor, onto the isometric grid - looks hard at first, but is in fact relatively simple.
For this example we're assuming our specific perspective is one such that the surface of each tile is diamond-shaped(see Ultima Online for an example of this perspective): most games use "squashed" diamonds and will correspondingly need to scale their y coordinates.
Say we have drawn an isometric grid whose topmost corner is at (100,0) on-screen, and whose bottommost corner is at (100,100).
To pick the tile correctly, we are best served to first offset our initial screen coordinates so that (0,0) becomes the top of the grid.
Next, we must rotate our axes. This part is the hardest, but fortunately, since we're using 45-degree angles it's really easy if we think it through carefully. If (150,50) onscreen is the right-most corner of the grid, then we are at (50,50) relative to the top. If (100,50) is the center of the grid, then we are at (0,50) relative. Moving only to the right or left from the origin takes us off-grid. Thus we have these properties:
1. Adding to screen Y increases tile X and tile Y equally. 2. Adding to screen X increases one of tile X or tile Y and decreases the other. 2. Adding to screen X and screen Y increases one of tile X or tile Y (depending on which way you position the axes) but not both.
These are linear relationships, so now we only need to figure out how to scale them. With diamond-shaped tiles, it's easy.
1. Divide each of the relative screen x and y by 2 and then add them together. 2. Divide each of the relative screen x and y by 2, add one, subtract the other.
Depending on how you've set things up, one will be tile x, the other tile y.
Finally, divide the results by the size of your tiles. The whole process, as you might guess, takes trial and error, but the required math is NOT hard.
