Creating assets for computer games. Pt-01. Textures.

Introduction. Textures are 2d images which are stretched and tiled onto a 3d mesh. They are the surface of everything you see. In this tutorial I am going to show a few methods for making game textures. This tutorial set will be broken into several small tutorials, each tackling different textures, and each tutorial expanding on the last. None of the techniques are to be taken as definitive. There are many ways to create textures. This is only the way I create them at the moment. Tools. This tutorial is written using a few industry standard programs. These programs may be out of your budget, and as such I will list alternative software that may be downloaded for free. These tutorials will not cover the exact use of the alternative programs (as I have no clue how to use them myself) but the basic techniques, and the reasons behind them remain universal. 1 digital camera. Nothing fancy. Just a basic 3+ mega pixel, point and click, style camera will do. The better the camera, the better the texture might be. 2 Photoshop 7+ (alternative, the gimp http://www.gimp.org/ ). 3 Nvidia developer tools. ( http://developer.nvidia.com/object/nv_texture_tools.html ) Stock. Fist you need to gather stock. Go out on a lightly overcast, but dry day, and photograph any and all surfaces that look interesting. Avoid any surfaces with excessive shadows or highlights. Shadows and highlights are generated by the games engine. Thats why overcast days are best for taking stock. It causes less strong shadowing while providing very evenly diffuse lighting. This is what you want. Needless to say, if you need to use a flash, its too dark. Flash is in general, your enemy. Diffuse map. I have chosen a slightly flaky painted wall as stock for my texture. I will want the texture to tile both vertically and horizontally with no obvious seems. I will also want the final texture to be perfectly square. Games engines demand their textures to be to the power of 2. i.e. 128px, 256px, 512px etc. it can be 128px by 512px if you like, but for this texture the final size will be 512px square. (Note; px = pixels,) Open your stock image in Photoshop.

Rotate your image to be the right way up if you need to. Image > Rotate Canvas > (choose rotation) Draw out a roughly square selection across the most interesting part of the photograph. It doesnt have to be too accurate. We will be editing the selection in a second. Rectangular marquee tool (shortcut M) Right-Click within the selected area. A menu will open up. Click transform selection

The selected area now has handles at the corners and in the middle of the selection lines. Here you can scale the selection. Use the handles to get as much of the area that you want. When you are a little more satisfied with your selection you can right-click again within the selected area. This brings down another menu. This menu has various ways in which you can alter the selection. Select distort from the menu. This makes all the corner handles separately manipulatable. You can use this to select an area that takes into account the effect of perspective. (Note; perspective is the effect created from photographing a surface from less than straight in front. Visible when you photograph something that has 90 degree angles and the photograph is out of true to the original source. Bad description I know. You will twig it.) When you have a selection you are totally happy with commit your transformation Enter. The selection need not be square. In fact it is more likely to be a bit warpy. Copy the selection. Ctrl and C. Create a new document, Ctrl and N. Enter to commit. Paste the copied selection into the new document. Ctrl and P.

Your copied selection is probably sitting unevenly in the new document, with sections of white background showing behind the texture. This is fine. We will fix this now.

Transform the image, Ctrl and T. Your adjustment handles are back, only this time they are at the edges of the document. Also, now the handles adjust the image, not a selection. Right click in the transform area, and choose distort from the menu, just as before. now you can adjust the corners of the image independently. Now, work the corners of the image to the corners of the document. There must be none of the background document visible. (Note; it may be necessary to zoom in and out doing this. You can either use the role wheel of your mouse, or sometimes you might use the shortcuts.) Ctrl and + is zoom-in. ctrl and -is zoom-out.) You should have something that looks kind of like this.

If you have problems getting the corners in the right place you can switch off the snap function. View > Snap. Snap tries to help you get things in the right alignment, but this kind of transformation is a bit beyond its ability. Commit to your transformation once more. You should have a rectangular texture now. Not quite square, and definitely not tiling. But you are on your way. Now we are going to get your image to tile. First thing you have to do is flatten your image. Layer > Flatten Image. Now you need to offset your image so you can see the seams. Filter > Other > Offset. Set both the horizontal and vertical settings to -256px. Set the undefined areas to wrap around. Ok the filter, and your image will have a line running up the vertical and across the horizontal of it. These are your edges of your image. We are now going to use the clone stamp tool shortcut (S) to copy sections from the good parts of your image onto the seams of your image, to hide the seams. Select the clone stamp tool.

Go to the brush preset picker in the left of the top bar, and select drop shadow brushes Select a good big brush. About 50px. Hold alt and click your left mouse button on a good area of your texture. Now left click and paint over an area of your seam line.

Try to locate an area of seam that looks quite similar to the area of good texture you clicked on in the first place. When you are painting over the seam line, you are copying the section of good texture over the seam. Things to watch out for. Avoid selecting areas of good texture with distinctive marks or patterns. Avoid selecting areas of good textures with non-matching colours or marks that would not look right over your seam. Alt and left click to select different areas of good texture regularly. Feel free to adjust the size of the brush if you need to. When you have no visible seam left, and your texture looks ok, we will reverse the textures offset. Filter > other > offset. Set the horizontal and vertical settings to +256px and leave the undefined areas to wrap around. Ok the filter, and your texture should be back the way it was, apart from now the texture should tile with no visible seams. We will size the texture now, then test to see if it tiles correctly. Image > Image Size. At the bottom of the image size box, un-tick the constrain proportions box. Now in pixel dimensions set both width and height to 512px.

Click ok. Your image is now square, and to the power of two. It is also tiling. We will test that in a second. First, save the image. File > Save as. Name it painty-wall001_diffuse. Format it as Targa (.tga) When you click Save it will ask you to save it as either 16 bit, 24 bit, 0r 32, bit. Select 24 bit. Look at the name you have given it. Games engines will usually not like it if you give it assets with spaces in the names. The _diffuse, is just so you know its a diffuse map. I.e. the texture with the colour information. The 001 is in the name so you can have more than one painty-wall textures. Imagine how confusing the naming conventions can get when you have a few thousand textures and you are trying to come up with unique names for them all! Targa format is a high quality texture format accepted by most games engines. Now we are going to test to see if the texture tiles properly. Select all of your texture. Ctrl and A Copy your texture Ctrl and C Create a new document. Ctrl and N When the new document dialogue opens it will have both the width and height set as 512px. Make both these 1024px. Thats twice the size of your copied texture. Click Ok. Paste the texture into the new document. Ctrl and P The texture will now be sitting in the middle of your new document. Now turn snap back on. View > Snap. Select the move tool. (Shortcut; M.) Move the texture into the corner of the document. It should snap into the corner neatly. Now paste another copy into the document. Ctrl and P Move that into the opposite corner. Repeat twice more for the last two corners. You now should have four copies of your texture, sitting beside one another. Flatten the image.

Layer > Flatten Image. Your image should be seamless. You can delete this image when you are done checking to see if it tiles correctly, as it was only for testing purposes. Make sure to test every image you do. Its better than waiting till you get the texture into a games engine, then finding its not tiling. Specular map. You now have a tiling diffuse map. In old school games, this would have been enough. In current generation games, the games engine is capable of combining several different types of textures to produce a more believable finish. The next texture we are going to produce it called a specular map. It is a grey scale image which tells the games engine which parts of the texture is shiny, and which parts are not. Open your diffuse texture. Desaturate it. Image > Adjustments > Desaturate. There is no colour in your image now. Now go and adjust the brightness and contrast of the image. Image > Adjustments > Brightness/contrast. Brightness down and contrast up will usually work well on this kind of texture. The bright areas should be dark grey, and the dark areas should be totally black. Black means no shininess. And every step up the ladder towards white you go adds shininess. Painted walls tend to be a little shiny.

When you have something you are happy with, save it under the same name as the diffuse map, only change diffuse to specular You now have a specular map. Only one more map to go in this tutorial.

Normal map. A normal map is a texture which creates the illusion of 3d detail on a 2d surface. There are a lot of ways to make normal maps. For high detail, very 3d, normal maps, you should model your surface in a 3d application, like 3ds Max or Z-Brush. For something like this, we will use a plug-in for Photoshop made by Nvidia. If you have not installed the Nvidia developer tools, (link in the tools section) go do so. You will need to restart Photoshop if you have just installed the Nvidia developer tools. Using the Photoshop plug-in is a bit trial and error. First open your diffuse map in Photoshop. Now you are going to add a tiny amount of blur to your image. Filter > Blur > Gaussian blur. Make the blur between 0.5 and 1.0 pixels. This is so the normal map filter doesnt try to make something too complicated. Now increase the contrast a little bit. Image > Adjustments > Brightness/contrast. Up the contrast a good bit here and maybe fiddle with the brightness a bit too. Black bits will be low, pock marks and indents in your wall. White bits will be ridges and raised parts of your wall. Now flatten your image. Layer > flatten image. Now run your normal map filter. Filter > NVIDIA Tools >NormalMapFilter. Set filter type to 4 sample and in the scale box enter a number between 5 and 15. Click ok Below you can see the height map and the normal map that was rendered from it.

Save the normal map as the same name as the diffuse map, only change diffuse into normal You now have the three main textures used in computer games today. There are other types of texture, some of which I will cover in later tutorials. There are a vast number of ways to produce textures. You can use programs which create textures purely from algorithms, other programs allow you to feed in a raw image and spit a nice tiling texture out the other side. There are a bunch of cool programs which allow you to pull in a diffuse map, and will process a great normal map for you. Some are free beta testing downloads, others cost money. The above way I have used here is probably the most manual way of creating photo-textures, but its a great skill to have. Finally finished. Getting your wonderful texture into a games engine is another thing entirely. Not very complex, in general, it totally depends on the games engine you are using. I am not going to cover this subject here, but here are a few screen grabs from a few games engines with our flaky-paint texture in it.

First is DooM-3 engine. This engine supports all three map types. The second shot is from Unreal Tournament 2004. It is quite an old engine, so only supports diffuse and specular maps. (Note; The orange texture all over the place is just a placeholder. I have a habit of putting it everywhere when building a level. So I dont get distracted by all the pretty textures)