- Home /
Tiles implementation question
I was looking on a new game by Klei, called "Oxygen Not Included" and I was really impressed with visuals of the tiles. As we know, the game is made in Unity, so my question is - how would you approach creating such tiles visuals from technical point of view? Problems that I see here are - custom shapes for different tiles, outlining the group of similar tiles in a wavy line, making tiles bleed to one another.
Answer by Monofraps · Jul 30, 2017 at 06:39 PM
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.
1) How do they texture tiles?
2) How do the borders work?
3) (Somewhat related to 2) How to they generate geometry/choose the right border?
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 http://blog.project-retrograde.com/2013/05/marching-squares/ 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.
Your answer
Follow this Question
Related Questions
Cubes are showing outlines 1 Answer
Graphic Tearing in Full Screen Mode with Vsync 1 Answer
Issue importing fbx animation with outline layer 0 Answers
QuickOutline: how can I change the shader to work with objects with two materials? 3 Answers
Making a dynamic outline to make 3D objects render as 2D? 0 Answers