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.

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:

… 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.

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.