A tileset is a series of small images (tiles) that can be re-arranged, stacked, and adjusted to make a really big world with only a few images. We want to do this because images tend to increase file size and if you had a choice, would you rather paint 10tiles that are 64×64? Or draw a totally unique background at 8192×8192.
Also in the case of iPhones or GBAs, you are going to want to use 1 really big image (a 512×512 made up of small tiles) instead of many tiny files. More on that later.
*note* in this tut, I am only going to be going over the technical part of making tiles, but these are not artistically sound. You will have to deliver texture, shadowing, and contour all by yourself.
So in order to make a tile, first we set our tile size. You want to make your tile size in binary since most tools are going to want a square of some sort. In this case 64×64 but you can use 8×8, 32×32, etc…
So now we have our tile size. Lets create a brick type tile.
Then stack several of them together so they are “tiled”.
Notice how our horizontal line flows together but our vertical line is broken up and doesn’t meet with the others? This is usually undesirable because we want all the tiles to run together seamlessly. So lets fix that with a tile that is going to meet at the edges and look OK.
The tileThe stack
See how much better that is? All the lines run together and you probably could draw those in for ever. Let’s put a cat infront of that wall so that we have a character reference. I am also going to add in a floor to force perspective so that our cat can sit on something.
Ok so now we can make floors, walls, etc… but it kinda looks weird not to have any shadowing in our scene. Because without it everything looks, well, flat. so we are going to create some shadows. To do this, we need two things. Transparency in the file, and “layers”.
Transparency: So now we need to talk about filetype. The file format you are used to is probably .JPG unfortunately .JPG doesn’t allow for transparency. So when we save out our file, we are going to use .PNG files. When you export or “save as” an image there is an option to save PNGs with or without transparency in most photo editing software like Photoshop.
Layers: Layers are typically in most tile editing systems now-days. They give an artist or designer the ability to put some things in-front of the player character, and some things behind. Think about it like working in photoshop, each layer can be positioned differently on the image.
So now, lets add some shadows to our scene and also add a decorative object to the back wall. For the shadow I am just using the gradient tool going from black to transparent. If this were in an engine, these tiles would be in a different layer but could be within the same tileset image.
Notice how the shield is really wide? That is because it takes up 2 tiles within the tile set, so when I place down the tile, it is the left hand side and the right hand side of the shield.
Finally, lets add a final “parallaxing” foreground. a parallax layer is typically a background or foreground layer that moves slower than the scrolling room. Obviously we aren’t moving in but you can look online for multiple examples of parallax. Since this is an interior room I am going to just do a foreground element.
OK! So this is starting to get pretty complex and interesting. Lets take a look at what the “tilesheet” looks like. If you recall from the beginning, we are programattically pulling a single image and replicating it multiple times. On most handheld devices, the best way to do this is to create a single image with lots of little tiles inside it. A Tilesheet! Lets look at what our scene tilesheet lookslike.
Our tileset is only half the size of our scene (I added red lines to show you where the 64×64 divisions are. And as you may have figured out, we can use these pieces over and over again in different combinations to create different scenes.
Hopefully now you have a clearer understanding on how to create a tileset.