I was looking on a new game by Klei, called “Oxygen Not Included” and I was really impressed with visuals of the tiles.
Sorry for digging up a year-old question but since nobody has answered yet and I’ve actually been wondering how they’re rendering the world too, I’ve started thinking and came up with …at least an idea of how i might work. First there are three questions I asked myself.
As for #1: It seem quite obvious that they’re not using a single texture per tile and they’re probably not using multiple seamless textures per material. Another quite cool solution would be to generate a texture procedurally but it’s not likely they’re doing that since that’d be overkill. Taking a closer look at the screenshot you can actually see some repeating pattern.
So with that in mind my best guess is that they have a single big texture per material and derive the actual UVs from the tile’s location in world space.
Now on to the next question. How do those transitions between different materials work? Again, I can only guess. Taking a closer look at those edges you can again see some repeating pattern.
Knowing that every material only has a single big texture, I’m guessing that these edges are created using some kind of mask which is used to blend between multiple textures. …which leads me to the next question: Assuming we have some kind of edge mask atlas how to do we select masks?
This did actually take me some time to figure out but I think I came up with quite a good solution. Looking at the tile selection overlay the game shows (if you select tiles for digging, etc), the masks look quite off (e.g. some mask pixels are outside the selection highlight) - so either they use some overly complicated geometry and UV calculation or the actual tile geometry is different from what the game highlights. Looking at the problem long enough, it turns out that edges between multiple materials always seem to meet “in the corners” of the selection highlighting.
The green, blue, red and purple squares are what the game shows as tiles. The middle yellowish square
is what I think to be the actual geometry. So I guess they’re using some derivation of marching squares. This post Loading... describes how to use marching squares to map existing (as in hand-crafted) transition tiles in a simple regular 2D grid. Due to the number of different materials and the resulting number of possible combinations, I’m pretty sure they did not pre-render all possible transitions. Using the technique described in the article above we can select a mask from an atlas and then render bordering tiles multiple times (once per bordering material; using a stable rendering order) with proper masks.
Even though Klei might do something totally different, I think that my suggestions above would yield a similar-looking effect.
