Building blocks

I want to share a cool technique for quickly building tiles for 2d worlds. In particular, avoiding the need to design separate blocks for perimeter tiles. Take the following screen:

Although the effect is subtle here, notice that all walls carry a black border. To achieve this, tiles positioned at the top-left of a structure must look different from those at the bottom, etc. There are 16 combinations in all, and we want to avoid having to design them all individually.


Here is the single tile I used to achieve the screen above, magnified 4x:

The key is to make the tile a little bigger than it should be, in this case 40x40, and to position the black lines outside of this area. Here is the same tile with its 40x40 region shown with a square:

As long as the area inside the square can be tiled nicely, you can pretty much go for your life in the outside area, and then chop up the tile in various ways to create the 16 images you need. Here is how the tile would be chopped up for the top-left tile:

While this example is very simple, the concept is very useful. For example, in the next couple of weeks I'm going to create a tile containing a nice grass texture and with blades of grass protruding out of the top of the tile.


The only requirement is that the sprite engine you're using must support position offsets, otherwise the extra size will stuff up the screen position of the tile.