E. Darwin Hartshorn: //Boilerplate

Devgame Internship 4: Tiles

In videogames, tiles are used to create large levels with a few small graphics.  Here’s a fantastic example by someone else:


As you can see, you can create a large variety of backgrounds simply by laying tiles, like this, on a grid.

Super Mario World actually made this part of the gameplay design: unlike the other Super Mario games, the height you could jump and the rate at which you accelerated are determined in tiles. By having a block somewhere on the screen at all times, the designers made it easy for your subconscious to recognize the distances and give you a gut instinct for whether you could make a jump or not, and precisely how far you would need to run to make that jump.

Anyway, I need to make tiles for Vargenstone.  Pixel art tiles are easy. You can see some in my portfolio.

Non pixel art tiles are, well, interesting. Here was my first attempt:

Cave Wall Tiles


Incidentally, there’s an important lesson in this tile set. Notice how there is no floor tile, and the wall tiles have a ‘scalloped edge’.  They are transparent, and meant to be layered on top of a repeating floor of a different size. This was a clever thing I did all on my own, and didn’t bother to tell my programmer about. Which made his use of the tiles super-awkward, as he was trying to implement them the normal way. The way pretty much every game that uses tiles on the face of the earth implements them.

Lesson: talk to your teammates.  Which is one of six or seven reasons I’m blogging: documentation on the proper use of the art.

So, this tile set is poorly sized, not designed for my programmer’s intended use, and incomplete. Also, it’s a first attempt.

In other words, I can do better.

Step 1: Make the floor.

For this, I’m using a free tool: Krita. Krita started its life as a Photoshop alternative, but as it became clear that GIMP did that better, Krita zeroed in on its strengths and became a digital painting tool.

The specific reason I’m using Krita is if you have this:

t1… and you press ‘W’, you get this:


But it’s not just an automatic test of tiling ability! In tile mode, when you draw anywhere on the tiled canvas, it works.  You can draw across boundaries, and the program will cope.

Piece of Cake.

Piece of Cake.

Where are the borders in that tile? You can plainly see that it is a repeated pattern, but you don’t know where the actual borders are, and neither do I.  Krita makes painted tiles easy.

So. I’m going to paint a floor tile at 500×500 pixels.  The final size for the graphic is 100×100, and a 300×300 version needs to exist.  Scaling graphics down helps iron out little glitches and inconsistencies, so I’m going to work at a size that’s slightly bigger than the biggest version we’ll ever use.

First: I need to fill the tile with a blue-gray.  Bluish colors feel more distant to the viewer, reddish colors closer.  By setting the floor as blue-gray, I’m telling the player “this is background. Don’t bother focusing on it.”  The characters and the walls will have warmer colors, allowing the player to pick them out instantly.

This explanation of the tiles in Metroid Fusion covers the coloration concepts brilliantly, and I’m actually going to refer to it quite a few times as I work.


Next, I collect references with the artist’s best friend: image search.

I hit ins and ‘w’ to add a new layer and switch into tile mode, then I take Krita’s pencil brush and sketch in some stonework.


A lot of the references have light brown veins running through them. I create another layer so I can ease off on the veins if the effect is too strong, and lay them in with a paintbrush brush.


As expected, the effect is too strong.

By turning down the opacity on the brown vein layer and then blurring it, I get a much nicer effect.


Right. I’ll just skip forward to the end, as at this point I’ve divulged everything that’s not tightly tied to personal style.

What matters is I’ve got a dark, blue-gray, paint+pencil-looking floor tile.


Yeah, it’s kind of hard to see what’s going on there. Frankly, the optimal end-point is the player never even notices the tile’s existence.

Part 2 incoming.


Leave a Reply