Drawing retro-style brick tiles

I grew up playing Super Mario Bros, Mega Man, and The Legend of Zelda. For me, the retro-style of characters running on brick tiles brings back the feeling of nostalgia and is what I like to include in the prototypes of games I make too. They represent both a simplicity and, as I’ve learned, a high level of visual complexity too.

(Note: While I will be using Paint.Net to make these examples, GIMP or Pinta work really well too.)

Since retro-style drawing is usually based in scaling powers of two, I like to start that way too. In fact, because my own drawing skill isn’t very good, I start with a simple 16×16 image.

From there, I draw a single pixel line along the left and right sides, top to bottom. And then along the top too. Basically, an upside-down U-shape on the edges.

black-white

(Note: I find the pixel grid super useful. It’s under View->Pixel Grid in both Paint.Net and Pinta.)

From there, count down five rows and then draw a line across, left to right. Next, count down four rows. Draw another line.

black-white2

Now, divide the top and third row in half by drawing a line on column seven. For the middle row, draw a line three columns in from one side and three columns in from another.

black-white3

Awesome! We have a good looking brick layout. Now on to the details!

By adding a triangle per brick, the edges of it can be outlined by using a gradient. For example, since these examples are black and white, a grey edge helps give each brick a weathered look and creates a relief effect.

(As I’m going to show later, different color edges emphasize different things. Grey for dirt and white for snow, as two examples.)

black-white4

By drawing the background over pixels on the sides of the bricks, it can create an even greater weathered look, as if parts of the bricks have fallen out over time due to erosion.

black-white5

To really get the full effect of using retro-style bricks, we need at least three different images. One for the left side. One for the right side. And, to keep the work created so far, the current one will serve as the middle.

To create a left-sided image, run the lines of the bricks to the right-hand side.

black-white6

And, to make the right-sided image, horizontally flip the left-sided image. Then, re-draw the triangle edge work to match the same direction as the other images.

black-white7

Adding new weathered edges to the left and right-sided images creates the same effect we had on the middle block.

In fact, now all three images can be combined together.

complete

However, all the erosion seems to come from one direction, as if wind or water flowed against the bricks only from the top-left side only.

To change that, make the middle image only have a top edging and have the right-side be, well, right-sided.

complete
Black and white coloring might be fine for the Gothic-styled games I make, but what if you wanted ice and snow?

Easy! Just change the colors and add more to the edges in different places as if the snow landed unevenly.

icesheet

Of course, the bricks don’t have to be that big either. Instead of five-four-four, they could all be three rows tall too.

threerows

Or even mix it up with more edges and uneven lengths to create a stonework look!

stones

The best advice I can give though is to play around with colors and lengths. Spend some time trying out different looks to see how it makes you feel. Most of what I’ve ended up using in my own projects came from me changing a basic template of bricks to make new things.