Tutorials on Game Making

Articles

Education and Schools

Books

Hi, Thanks for visiting my website. My name is Will and if you have questions
or would like to
contribute projects or ideas you can contact me

How to Manipulate Tiles and Textures for a good look in your video games

Getting good textures and manipulating them into good tiles is a fundamental skill that is very important in game making. If you don't get this right nothing in your game world will look right. You should spend the time needed to learn this skill. It is well worth the effort and will make the difference between drab and cartoonish game levels and sharp good looking levels.

Lets start with some definitions:

What is a texture?

Here are some examples:

Textures have a look, and a feel. You can find textures everywhere. Asphalt roads, blankets, plastics, wallpaper, rugs. They all have distinct textures. And textures are very important in your game. If you wanted to design a wooden structure would you use the top texture? Nope. You would want to use the center one. But you can't just use that texture. You have to change it into a tile that will be poured neatly onto the surface of yourwooden structure. That is where Tiles come in.

3D Game Art Product Page at Amazon

What Are Tiles?

Tiles are textures that have been specially formatted to blend together well in the video game world.You use some kind of image manipulation program to do this.

Here is a tile: For demonstration purposes it is 50 pixels by 50 pixels.

Now what will this tile look like if we repeat it into a bigger surface? Say the wall of a room?

It looks like this:

See how it has a blocky look? You can see where the different tiles meet each other. Clearly eight squares placed side by side. This is no good. Not what you want for your game.

We can fix this however by manipulating the small tile. And when we are done the eight tiles placed together look like this:

There is still a repetition of the pattern, but it no longer looks like eight identical blocks placed side by side. Notice that the dark lines of the stones match up across the tiles.

How do we do this?

We take our original tile and we rearrange it by breaking it up into four pieces. Think of your tile as four different quadrants like this:

So you cut your original tile into four pieces then rearrange the pieces into a new tile. You move the four quarters of your tile into the new positions. Now 1 is in the lower right and 2 is in the lower left etc.

Creating the Art of the Game Product Page at Amazon

What does this do? In the first tile you can see the blue lines going horizontal and vertical. These pass through areas of the tile that blend perfectly. The top of 3 blends perfectly with the bottom of 1. After you rearrange the tile the top of three is at the top of the square right? When this tile is poured in with other tiles guess what happens. The top of three is now directly against the bottom of a 1 and we know this blends perfectly because it was in the middle of the tile before.

One last thing. After you cut your tile into four squares and rearrange it into a new tile you should touch it up a little bit. Make sure the areas in the middle look good. Take out or smudge anything that looks unreal.

Not Always is this quadrant thing necessary.

For example you may have a shape that you want to be repeated and "look" repeated like the tiles in a ceiling. In the image below the floor is well tiled and looks seamless. The ceiling is definitely tiled with the seams and looks good that way.

More Important Tips:

You should always try to make your tiles in pixel squares of 128x128 or 256x256. This is a format that is perfectly suited for the computer and it will handle these graphics very efficiently. If you make your tiles in sizes like 100x100 or some other size the computer has to take a lot longer to figure out how to pour the texture into shapes. This could slow down your game significantly.

Remember: After you rearrange your four quadrants into a new tile, touch it up a little bit. smooth out any harsh lines in the center.

So you want to work with graphics but can 't afford Photoshop. You still can have an outstanding graphics program for a lot less money. I use Paint Shop Pro. I do all my design and graphics work in this program and it is absolutely fantastic. I can't recommend it enough. If you want to do some decent graphics and art work you have got to get a good program and Paint Shop Pro is the affordable solution. It does what the expensive ones do and it is easier to understand.

Check it out at Amazon.com I have created a link that will take you directly to it.

Corel Paint Shop Pro X8 Ultimate

Finally, This technique of managing textures is a little bit tricky to grasp at first but it is worth the effort. Properly handling tiles is a very important skill and worth the effort.

Return to Make a video game home page

SiteMap