So you want to make wall tiles?

Back when I was working on Babo:Invasion at Play Brains one of the coders and I had to come up with all the variations of wall models we were going to have to construct in order to allow any arbitrary shape of wall to be created within our tile based levels. As we figured out possibility after possibility it quickly became clear that the task was going to be just too great. In order to accomodate all maner of possible combination of wall tile we would have needed to model 41 different unique models. We came up with a way of reducing that to 4. Read on to find out how.



The secret is to subdivide each tile into 4 quarters. In Babo, we got away with only 4 models because the 3D made it easy to reuse things like corners or straight walls. Below is an example from an upcoming personal NorthernBytes project we are calling Sword and Penguin that illustrates how this technique can work in 2D by using 5 unique graphics. Remember, that's down from 41 if you didn't split the tiles!

Here are the 5 aforementioned graphics.

These graphics represent a full top, used when all surrounding tiles are also wall tiles, the four outer corders, four inner corners, horizontal walls and vertical walls. 

Now, here are the same 5 graphics split into quarters.

Now, by splitting each tile into quarters we can grab the parts we need to reassemble them in-game to accomodate all necessary combinations. Look at the image below and try to see how it was assembled using the parts above.

Each wall tile in the image is actually made up of four sub images.

Under the hood, all five of these images are packed along with other graphics onto a texture atlas to reduce draw calls. With Sword and Penguin we will be able to further optimize drawing by baking the walls down into the background texture so the floor and walls can be rendered onto a single quad.

So, if you're working on a tile based level editor and feeling overwhelmed by all the graphics you're going to need to create to make the tiles flow into each other nicely, why not split them in four and save yourself a bunch of work?