Trygve Vea is happy hacking :)

This is a picture of the interior of Links house, in “The Legend of Zelda: A Link to the Past”. It’s the first room in the game. It looks very good. I will attempt to analyze what they have done to achieve this – what techniques have been applied, and why. Some techniques has been used because they are great artists – and some techniques have been used, because the SNES has very little memory.

First, a little bit about the SNES. The old game consoles got hardware-support for tiles. This means two things; Re-using small pieces of graphics was easily achieved – as the console can flip the tiles horizontally, and vertically, without consuming more memory. The only console in sale today, that still makes use of this – is the Nintendo DS.

A screen consists of a grid of tiles. When you look at a grid with 8×8 spacing, you can easily tell that the tiles are being reused. In some places, you’ll see variations that are achieved by just flipping every other tile.

The floor is the simplest pattern in this scene. It is made out of two tiles, simply alternating each other. One can also create this pattern as one 16×16 tile.

The bed is fairly simple. It consists of 6 tiles. The bed is symmetrical, so the right side is just repeating the same tiles as the left side, but flipped horizontally. Rows 2-4 are identical.

This cares to demonstrate some of the limitations the graphic artists were working under. Even though the game looks very good, it’s needless to say that the artist would be able to create more detail if he wasn’t confined to the limitation of maximum X tiles in the tileset. We now know that the bed is symmetrical, because of technical limitations – and not because the artist thought it was the best way to draw a bed. You will find this literally everywhere in 16-bit era games.

It still looks good, but it was also a sacrifice to make room for more art. Unless you are making graphics for a platform with strict limitations on how detailed your graphics can be – you should remember that this is not a compromise you need to deal with. You may chose to do so, for your own reasons – e.g. you want to mimic the 16-bit era graphics more accurately. But you don’t have to. You’re free to ignore it.

So, I’m quite happy with the tiles I ended up with in SUBJECT:7 – so I’ve decided to make a guide on how to draw them. It’s fairly easy to learn – one just have to apply the knowledge.

I mainly use Gimp for drawing – but I suspect that any drawing application that’s capable of dealing with layers, opacity settings on the layers, and radial gradients will do (yes, I’m aware that gradients is a nono when doing pixelart – I don’t care).

First a couple of words about what you see here:

Two tricks are used to give you the illusion of depth. The first technique is to make the bricks on the top appear larger than the bricks on the bottom. The second technique is to make the bottom somewhat darker than the top. This is a very common way to do things – one very good example would be “The Legend of Zelda: A Link to the Past”.

You should also note that on the corner-tiles, the brick-spacing is moving slightly towards the corner – this adds the illusion of perspective.

Things appear larger on top, smaller on the bottom. Brighter on top, darker on the bottom. Thus adding to the illusion of perspective. These tiles are from The Legend of Zelda: A Link to the Past

When you create a new image, you start with a background layer. I usually never want to do anything with this layer – except for maybe give it one opaque color covering the entire thing. I always apply details on different layers, because I never know if I want to reorder anything later on. I also like to configure a grid to match my tile size immediately – always showing the grid, and zooming in as far as 1600%.

Step 0:

We will create tiles that are 16×16 large. The wall tiles will for practical reasons be made in groups of 8, so create a new image that is at least 48×48 pixels large. Set grid size to 16×16, and turn on the grid. You should now have a blank image, with grids showing the 16×16 borders clearly to you.

Step 1:

Create a new layer, name it ‘step 1′. Make the changes on the new layer.

Give the corner tiles one straight line from the center and to the edge – create four squares within eachother. Note that the squares have different spacing – this is to add to the illusion of depth. Leave the square of 16×16 in the center empty.

Step 2:

Create a new layer, name it ‘step 2′. Make the changes on the new layer.

It’s time to add the space between the bricks. On the corner-tiles, it should move slightly towards the corner itself – on the top/bottom/left/right tiles, they should always be straight.

Step 3:

Create a new layer, name it ‘step 3′. Set its opacity to something low, like 25%. Even though the picture make it look like we’re drawing with grey – we’re still using solid black as the color. Make the changes on the new layer.

It is time to draw some cracks in the bricks. The purpose are to give the players some illusion about how great you are. The cracks are just semi-random shapes on each brick. If the shape can start from an adjent brick-space, it may add some appeal.

Step 4:

Create a new layer, name it ‘step 4′. Make sure that it’s ordered to be between the background and ‘step 1′. Fill everything, except for the middle 16×16 with a color of your choice. I’ve used red.

Step 5:

Adjust the opacity of ‘step 1′ and ‘step 2′ according to taste. I’ve set my ‘step 1′ to 70%, and ‘step 2′ to 65%.

Step 6:

Create a new layer, name it ‘step 6′. Make the changes on the new layer.

Create a solid black square, partially covering the brick wall. I’m covering 7 pixels in on my tiles here.

Step 7:

Adjust the opacity of ‘step 6′ to 30%. Look! We have shadow!

Step 8:

Repeat step 6/7 with a slightly smaller square.

If you’ve followed my instructions, you have a set of tiles that points inward in a room. You still lack the tiles pointing outward – but these steps can be repeated. All you have to do different, is to reverse the two techniques that achieve the illusion of perspective, which I explained early in this tutorial.

The layer composition should be something along these lines;