How to write an Isometric Engine in pure 2D

Writing an isometric engine in pure 2D was one of the first engines I made when I was 19 years old, back in 2001. I already had a relatively long experience with 3D making, but not 2D. It was for a clone of the Equinox game (SNES). What surprised me the most at that time, it was the absolute lack of real literature about the topic. The biggest issue was occlusions, because in pure 2D you can't use a native depth buffer. There are several solutions. If you have access to the image pixels, one solution (the simplest) is to program a simplified depth buffer, using a depth-channel for the tiles, or algorithmically obtaining the missing image from a bounding-box around the tile, obviously with the same geometric transformations as the engine. If, on the other hand, you don't have access to pixels (or can't store a depth buffer) but can only draw blocks of tiles (my old scenario), things get complicated.

Comment Image

You need to develop an algorithm that resolves occlusions recursively to calculate what-is-behind-what, taking tiles position and size into account. To start, you need to think about how to handle occlusions with just two boxes. The order only matters if the two boxes overlap, so you only need to solve if the rectangles enclosing the boxes overlap. If they overlap, the order can be calculated as follows (Y pointing up):

if (box1.bottom > box2.top) {
    // box2 first, box1 last
} else if (box1.top < box2.bottom) {
    // box1 first, box2 last
} else {
    if (box1.near > box2.far || box1.left > box2.right) {
        // box1 first, box2 last
    } else {
        // box2 first, box1 last
    }
}

I couldn't find this formula in any book or online tutorial, I found it in the past using my brain and it worked, so feel free to use it. The algorithm can be easily extended to calculate order priority with any number of boxes by using a simple topological sorting. For every pair of boxes that overlap on the screen, use the formula to see which is behind the other and increment a counter for the block that is covering the other (A is behind C (+1), B is behind C (+1), B is behind A (+1)). At the end you have: B(0), A(1) and C(2), which is the correct order on screen. Note that if you checked A against C, you don't need to check C against A in the next iteration (avoid double counting). The overall complexity for N overlapping boxes is of ((N - 1) * N) / 2 checks.

You can download a demo of the isometric engine for Windows here:

https://www.texturemind.com/files/demos/EquinoxDemo.zip

Leave a Reply