Drawing vertical assets without depth sorting
or drawing them whenever we want!
A better solution to depth sorting is what I was trying to find lately. In most 2D games, everything is sorted from farthest to nearest assets for the final scene to look natural. That's what the GRG project is doing, it draws everything starting at the top right tile and going down line by line skipping the tiles off the screen. If something at the top of the screen is drawn after something that is below it (incorrectly sorted), it will appear as if it was standing mid-air on top of the thing instead of safely on the ground (see image #1).
Choices: easy versus efficient versus possible
The problem comes when it's time to store all the PC, NPC and objects. Storing everything inside of the tile it stands on is the first approach we thought of. Easy and the game map is already rendering tiles properly. But this isn't the most beautiful solution and we have to keep track of everything that moves and update the tiles they leave and enter. It's not that big of a deal, I just thought of a maybe better solution.
In order to remove the link between the map and the moving entities, we thought of a little hack to render vertical entities. Enable depth testing and render every entity that is vertical (like walls, trees and characters) with a subtle angle, something like 0.1° (see the second image, which is way more than 0.1°). With this technique, we could draw something on top of the screen after drawing everything. We could add a character to an already rendered scene. An angle of 0.1 is so subtle that the 120 pixels cat asset is losing 0.6 pixel in height.
The problem of depth testing
The main problem with the later is that depth testing isn't really easy to get to work with transparency and is almost impossible to get to work properly with lot of translucent objects (see Transparency Sorting). Some shader programs may help, but what I found only work with boolean opacity (0.5 or less alpha is completely transparent, more than 0.5 is opaque). I've made some testing but after some research, I thought that the depth sorting approach (already implemented through tiles) would get us the better visual result without much effort.
A little explanation of the test result
The third image shows what I got with depth testing. The #1 and #2 are both drawn with a subtle angle while the #3 isn't. They're drawn in the order indicated by their number. We can see that the depth testing works; the asset #1 is drawn, then the #2 gets drawn but still appear behind, thanks to the depth testing of OpenGL. The #3 is drawn last but without an angle, completely flat, so it fails the depth test against #1 and #2 making it appear behind both. The problem is obviously the transparent background of the assets. The transparent bits are drawn in the depth buffer making things behind fails the depth test.