Vol. 2 Iss. 2 - May 2001

Beginning tile graphics

By Rancid <rancid@neozones.com>

It seems, in the mid 1990's there wasn't one commercial game in which was full 3D. There weren't fancy games which used 3d environments and models such as homeworld. In fact, It was "Doom" which basically brought us into the era of 3d gaming. Most popular games back then were tile based games.

A game tile is simply a small uniform image that has a pattern which repeats or flows with other tiles. A good example of a tile is the patterns used in backgrounds in windows. In order to make good tiles, You must pay Great attention to detail. You must make sure all tiles that are bordering a specific tile, look good with that specific tile, and others which will border it. Tile1 has to look good by Tile2. Tile2 has to look good by Tile3 and so on. If done properly, a tile set can add beauty and depth to any game. The tile graphics must be created in such a way, that they are nice looking and detailed, but don't take too much attention away from game play. So they must not be incredibly bright or flashy. This tutorial will get you started on making your own game tiles in windows editable formats.

I myself generally use adobe photoshop to make my graphics, but maybe you have another program you could use or want to use. Any image editor that is able to set guides,cut/paste,and edit pixels manually will work. However, I'll be using Photoshop 5.0 as a example editor. Start out by creating a 16*16 image and zoom in 500%. draw a fixed width line on 2 adjacent sides of your picture, so it makes a backwards "L" or (). Open a new 16x16 picture and make the same picture as before except a normal "L". Save them both. Now take each "L" shaped picture and  flip them vertically. You now have 4 corners of a box. About all you can make with this is a big square, but that's not the idea. We now have our corner tiles for our block "lake". make 4 more box pictures with nothing but diagonals within them. Also make 4 more pictures with just 1 line. We have a tile set of 10 tiles, which will be enough for our first tileset.

Make a new picture in Photoshop which is 256x256 and make snap to lines every 16 pixels horizontally and vertically. You now have a area in which to work with your tiles. Arrange your tiles into a simple circle like shape. Now we get to do some artistic stuff :). color the outside of your lake green and the inside blue. Now we have a extremely simple landscape with a fixed grid over it.

Your probably thinking "this is all fine and good... i could of done this on my own". Follow me on the next part, we are going to do some very up close pixel work. To add detail to our tiles, we need to draw in some features. Water has waves, Grass isn't consistently one green, dirt isn't only one shade of brown right? So, that's what we are going to draw. Zoom in on a all blue tile, notice you can edit the tile within the grid we made earlier. Lets draw in some waves and different shades of blue   Not too hard right? wrong, make sure your tile looks good by itself, and flows into it. Select the tile you just made, copy it and paste the tile into the grid to the right and left of the original, and hide the grid.... zoom away if needed. Does the tile look okay? If not go back and do some more editing, remove and add to your liking but make sure the tile flows into itself.

Once the main water tile is completed, try pasting over all the old all blue tiles. The real trick to making tiles is to make them flow easily from one to another, there should be no distinguishable borders from one to the next. Now on to the grass tiles. Color a grass tile in to your liking a repeat the flow testing process until it repeats smoothly.

The corner tiles are somewhat more difficult to make because there is normally more detail involved. If you decide to make a little sand bar on a corner tile, it must be the same width and style eon all the other side tiles..... there are small tricks to cut time for this though. Make a nice repeating, flowing sandbar on the vertical half of your lake. Take each beach tile individually, flip it horizontally and paste it on top of its counterpart. SO now we have perfect flowing beach on both sides!  Also try making small variation s of similar tiles to place randomly, so you have small variations in your landscape. Ill show you just how effective that can be at the end of the tutorial.

Now that all your tiles are done, you must cut them out individually and paste them into a new picture. Also make sure you identify your tiles with a grid like name. Lets say your tiles horizontally are named a,b,c,d.... and vertically are 1,2,3,4.... When you save 4c, you know exactly where that tile is used and what other tiles repeat with it. This is handy while programming random map generators. Also for reference, save a snap of your tiles in the original grid structure. Write the tiles names "1a,3b etc"  over them and save the picture as "tile guide". The tile guide will help you later if you encounter trouble for any reason.  Congratulations! You have just made your first tile set the "right" way :). Go on to try this process with larger tiles (such as 64X64) and with different terrines. More variations on the tile make the tiled landscape that much more appealing. Here is a quick snap of the tile work i have done in Imeron as a example of what you can do with your tiles:

Try making desserts, forests, industrial plants, city streets... anything! as long as you follow this process of flowing one tile into another, they will come out better and better.