次世代游戲貼圖技巧

次世代游戲貼圖技巧 1. Make your photo tileable What does tileable mean? Most people will answer something like: “if I can place the texture next to each other without having a visible seam”. Sounds ok, but tileable also means that you don’t have any eye-catching repeating spots in your texture. In early 3dgames this was not a big issue, but in next generation games this is a big issue, so let’s see what we can do about that. As a starter you need a good photo. Google image search is ok, but there are plenty of other places that are much better. I always go to www.flickr.com , because there you have tons of very high resolution images. (not all of them are, but most of them). Today we’ll make a 1024*1024 texture, so look for an image that has at least these sizes. You really don’t want to scale your image up! I did a search on ”Concrete wall” and found this great image that I’ll be using to day. Some tips before we go on. Make sure that you image is taking in a 90° angle. Photoshop has a set of tools to optimize your image if the angle is not 100% ok, but 45° angles are not worth trying. Also, make sure that your images is a good base to start with. The bad one has that yellow spot, that will make it look tilled, even when there is no seam. If you know you way around with Adobe Photoshop you can make this look ok, but remember, this is a basic tutorial. Back to our image. I made a square selection (you can do this by holding the Shift key while dragging). This is the part that I want to use: It has a line running true the middle, and one horizontal one, which I’ll use for the seams. Make a new file, with the following sizes: 1024*1024. Copy-paste your image from your photo to your new document, and scale down if needed. How do we make it tileable? We separate the image in 4 parts, and them to the opposite corner. (Upper left becomes lower right, etc). But where do we cut? Some people only use a small border, I usually go for the middle of the image, making 4 identical square selections. I could use the concrete grooves in this situation, but I want to show you the power of the Clone Stamp Tool in Photoshop, so I’ll go for the middle. Here is how we do this. Place guides in the middle of your image (go to View>New guide, or drag them from your Rulers (toggle rulers with Ctrl-R)). Now make selections, and Cut/paste. Make sure that every part is on a different layer. Now drag them to their new position. We now have all our outer borders perfectly tileable. The only thing left for us is the centre of the image. As you can see, we have some very bright parts, and some very dark parts. It is very unlikely that you will not have this. What to do about this? First of, we add an Adjustment Layer to our layerset. Select the layer on top of your stack, then press the “adjustment layer” button, and choose for Hue/Saturation. Set Saturation to -100. Now why did we do this? Because now we have a gray-scale version of our texture. Why do we need gray-scale? Well, in gray-scale it’s much easier to see differences in brightness. So, if we want to check if our four parts have the same brightness we just activate our Hue/Saturation adjustment layer. Adjustment layers are similar to regular layers. So, you can turn them on and off like normal layers to. This way you can easily activate/deactivate a certain effect without changing your original image/texture. Very handy wouldn’t you say? Ok, time for the real work. Let’s do something about the dark part of our texture. Go to your toolset, and look for your Dodge Tool. This tool will lighten up your image. You can do very cool stuff with this. Now, we’re going to handle the dark corner, so you should set Range to “Shadow”, this way you will effect the dark parts of the image most. Set exposure to a low number (going from 10 to 20 max). You have more control this way. Now on the other hand we have the Burn tool. This tool (you’ll never guess) will darken your image. In this case you can set range to Highlights so that it doesn’t affect your darker spaces. NOTE make sure you don’t darken/lighten the outer edges of your canvas, since these are already a perfect match for our texture! This is what I get after some Photoshop work: In the right lower corner you see the original, in the centre the one I changed. It has a general gray colour, which is exactly what we want. (I have some gray spots if I deactivate my Hue/saturation layer, but that’s ok. We’ll give the texture colour with our hue/saturation layer anyway.) There is still a terrible seam visible, I know. That’s next. First, we’ll merge our layers together. I still want my original layers to exist in case I want to change something, so this is what I do: deactivate your Hue/saturation Adjustment layer if you haven’t already. Select all (Ctrl-A), and “copy merged” (Ctrl+Shift+C). Now paste your image again (Ctrl-v). Go back to your toolset, and look for the Clone/Stamp tool. With this tool we can copy a part from our texture, and blend it in somewhere else. How does this work? First, select your Clone Stamp Tool, Alt-click to mark your start point. Now you can click and drag all over your canvas, and do the magic stuff. Remember to stay away from your canvas borders! Remember I told you that there are two condition to make a tileable texture? Well, the Clone Stamp Tool is the perfect tool to remove eye-catching details on you texture that will make it look repeating. There is one big BUT to this great tool. It has the intention to make your image blurry. So, if you see that a section of your image has more blur than another (which could cause repeating textures in the end), just use your Clone Stamp Tool and repaint some of the stuff you don’t like. If you’re ready with your Clone Stamp Tool, then go to Filter>Sharpen>Sharpen. This will remove some of the blur in your image. This is what I have so far. I still have a bright section in the middle of the texture, so I might burn that a little, just to get it plain... Now there’s only one thing left. Test our image and see how it looks. There are several ways to do this. You could do this in Photoshop (just make a new document with 3 times the size of your texture. You could also import your texture into your game-engine of choice, to much work imo, so I usually make a plane in max en render it there. Give’s the best result in my opinion. This is how mine looks so far. It still has some repeating parts here and there, but I’m quite happy with the result. Remember that the vertical lines you see are intended. I could remove that one to if I wanted to, but I want to keep something to break the texture. It will look better in game this way I think. We now have a tileable texture, with no seams and almost no repeating spots… time for part 2. 2. Lighting setup When I’m making textures for a game, then I don’t exaggerate with the effects and options 3dsMax has to offer. It’s very easy to make your texture look very good in 3dsMax, but that doesn’t mean it will look ok in your game. So, for this we will just use 2 omni lights as light source. Although skylights generate a nice ambience in 3dsMax, they will also ruin your normal map. So, no skylights in our scene. As you can see in the above image, I use 2 planes for my renders. One being a wall, the other one a floor. This usually does it for me. Lightning is a bit tricky. First, we’ll set up a blue omni light (RGB 49–163-228), somewhere close to where the two planes connect. This will cast a nice blue “glow” on the edges we create with our normal map. The second one is a very bright one, that will be our main light source (RGB 246-243-225). You can give this one a colour if you like but keep it very bright, because this will affect your texture colour. If you change it to much you will not see your real texture colour. We place the second omni light somewhere like in the image below (it’s also a little to the right of our two planes. Besides the two omni lights, we’ll also set our AA filter to Catmull-rom. That’s it for our render setup. We can now render our texture in our render dialog. But that's rather laborious if we want to make small changes to one of our maps. It would be alot cooler if we could see our texture in real time (and drag the lights all over your texture to see the effect, yes...). And believe it or not, you can do this in max. (I think from max 8 up, i haven't tested this in max 6 or 7). Before we can start we have to make sure that our display drivers support DirectX, therefor, go to Customize->Preferences, go to the Viewport tab, and click Choose Driver. Make sure you pick Direct3D, and you pick DirectX 9.0 from the list. Restart 3dsMax if needed. You can now use directX shaders in your viewport. The only thing left now is to enable them. Go to your material browser, and look under the DirectX Manager tab. Activate "DX Display of Standard Material". Let it proces for a while, and then you should be able to see that the "Show map in viewport"-icon has turned from blue to pink. This means that if you enable it, it will be in realtime with DX. Go ahead and enalbe it. (it take's some time before your texture is loaded, but once loaded all goes smooth) (image of what it looks like after you made a normal and diffuse map, just to show the power...) 3. Make your bump and specular map Time to make it look sexy. Before we start with either bump or spec we first need to do some stuff with our colour map (or diffuse, which is actually a wrong name). It’s still in gray-scale at the moment, and I really liked that yellow concrete. So, I’ll just go to my Hue/Saturation Adjustment layer, select the Colorize option, and set Hue to 54, Saturation to 38 and Brightness to -30. These work for my texture, but they will probably not work for yours. These are things you have to figure out yourself, try some things, see what you like… You may or may not have noticed that there is a Layer mask attached to your Adjustment Layer. For people who don’t know what a layer mask is, a mask is an extra layer, by which you can set transparency. So, if I paint something black on the layer mask, the same pixels in my layer will be fully transparent (100% invisible). If I paint white, then those pixels will be 100% visible. In-between you have 256 degrees of transparency (layer masks only work with gray-scale). This of course is very handy. I told you I had some gray parts in my texture, and I still want to keep the original yellowish look. So, I painted the entire layer mask with gray (rbg 128-128-128), and then used my Dodge and Burn tool to paint the parts I wanted to either way give more colour, or give less colour. Remember to stay away from the canvas edges as much as possible. Here are we at the moment: I notice that there is still a horizontal line, so I’ll change that on my merged layer. Next I’m going to add another Adjustment Layer. The Brightness/Contrast Adjustment Layer. Give your texture a little more contrast, because regular photo’s usually lack contrast. That’s it for the diffuse map. Let’s start with the specular map. First of, what can I do with specular maps? Spercular maps are used to change the amount of reflection of a material. You can’t make anything act like a mirror with specular maps, but you can alter the brightness and the colour you will see when you place a light above it. Now, there is Specular Level. This is the amount of reflection that you will have. White being very reflective (like brushed metal), black being completely dull. There is also Specular Color. This is the colour that you will see when you look at the material when it’s reflecting. Very theoretical explanation for something that isn’t that hard at all. Let me give you an example: What you see are the two maps, first one specular level, second one specular colour. The result is very clear. The white part of the specular level reflects coloured light, and this colour is the same as in the specular coulor map (so, there were no green lights used in this scene!). Now that we know this, time to go back to our texture. Let’s make a new layer group, and place all your layers in that new group. You can call it Diffuse. Now make another new group, and call it Specular. Make sure you have this your specular group selected, and add the Hue/Saturation Adjustment Layer. Set Saturation to -100 (should make your image gray-scale). Now add the Brightness/Contrast Adjustment Layer, give contrast a higher value (65 for example), and Brightness a lower value (-30 fe). Save your image in a new file. This is the "old" way to make specular maps. Nowadays coloured specular are moving up. Color in specular gives a more natural, realistic effect (as real as we can get in games until materials get more advanced gloss that is). Everything reflects light at a different amount and color. Otherwise everything would appear wrapped in plastic. The 180 hue shift technique is the quickest way to the most extreme effect, and is not the end all, beat all for everything. Though it works fantastic for metals. Human flesh would be a very dark purple, gold might look best with a brighter green. It's all about experimenting and testing. Sometimes it's higher contrast, lower saturation, small hue shift or negative hue. This is all info on color alone. A lot of time saving is done by quickly adjusting the diffuse, but in actuality, the best specular is much more customize, even a completely new painted texture. ( Thank you Chris Holden for your input on coloured specular maps.). Now back to 3dsMax. Go to your material editor, and add the specular level to your list of maps. (browse to the file you just saved). Now there’s only one thing left, and that’s our bump map. For this we’re going to use NVIDIA’s normal map tool. Can be found here: http://developer.nvidia.com/object/photoshop_dds_plugins.html We’ll need a height map if we want to use NVIDIA’s dds-plugin. What are height maps? They are just images (gray scale). Everything black will be low, everything white will be high (you can take this literal when you convert height maps to normal maps). But how do we make our height map? Disable our Specular layer group. Make a new layer group, and call it bump. Select all, and copy merged (Shift-Ctrl-C). past in a new layer. Now go to Filter>Noise>Despekle. Do this 2 or 3 times. This will remove the noise in your image. Now to go Filter>Sharpen>Sharpen to make the edges sharper. Add a new Hue/Saturation adjustment layer, and set Saturation to -100. Now add a new Brightness/Contrast adjustment layer, and play with the values. Do you still remember that I wanted a groove in the concrete? Well now’s the time to think about that again. I’ll burn the edges of the images, so that they are “l(fā)ower” on my bumpmap. Time to take a closer look at the nVidia plugin. First set your compression format. There are multiple possibilities, but i found that CxV8U8 Normal works best for 3dsMax (especcialy if you want to use the normal map in game engines like for example Unreal 2.5. After that press "Normal Map Settings..." which will open a new set of options. First, make sure you tick of "Convert to tangent space normal map". This tells the plugin to convert your image to a normal map. Next you have to set your scale. There's not realy a fixed value that you can use. I usualy try some value's, see how they work out. (alot depends on the image you're using. Images with high contrast will have a low scale, and vise versa.) That's about it. You can press "2d preview" to see a 2d preview of your normal map. Press "save" to save your file. Only few things left until we’re finished. Go back go 3dsMax, open your material editor. Look under the maps tab for Bump (set the amount on 100, it’s on 30 standard). Make sure you first select Normal Bump, and then select your *.dds file. If you don’t do it like this it will most likely show up wrong. Here’s a render of my result: That’s it for this tutorial. I hope you guys learned something, and had a good time. cheers couple of days have past now, and i began to realize that the texture isn't as eye-catching as i first thought. So, here are some other textures i made with this exact same method, hoping to convince you of my workflow... This was a quick piece for fun. I was inspired by all of the heavily destroyed cement cover in Gears of War. After posting, information on how it was created was request, so I documented the process. This could all be optimized further, but again, it was a quick fun piece not originally intended for any use or tutorial creation. Base Mesh Block out a simple shape. It's important to keep it all quads of equal size before sculpting to get the best results out of Zbrush or Mudbox. Sculpt With simple sculpting, it's easy to get a rocky organic shape. Start with the largest shapes and slowly reduce your brush shape (note: if it doesn't look right with the large scale details, adding smaller details probably won't help). Finalize with a stencil/stamp detail for the smallest details. Close-Up The high detail mesh is just under 400,000 triangles. Working with a mesh this detailed can be a headache, so it's good to get used to it now. Up close, the mesh is incredibly detailed. Low Poly Build a low poly mesh based closely on the high detail. It may help to copy the high and optimize it. Not for the final low, but to use as a base that isn't such a system hog. A low poly mesh with normal maps needs to be rounder than a regular low poly mesh, and a single smoothing group. This is so that lighting can hit the normal from as many rounded angle as possible. Any hard edges should be on the normal map itself. UV's need to be as seamless as possible with minimal stretching. Diffuse I created a destroyed cement texture in Photoshop by touching up several cement photos. Heal brush the edges where the seams are with the same sections of the overlay to reduce seams. Specular map created by taking the diffuse > contrast +50 > hue +180 Normal map For information on how to generate a normal map in max from a high detail mesh, read this spotlight article http://www.game-artist.net/forums/showthread.php?t=43 I generated a normal map for this using CrazyBump beta. The main site allows you to sign up for the beta, but more info and a download can be found in this thread http://boards.polycount.net/showflat...&Number=148897 Always render out a Height Map. While not used in this example, it can always come in handy. Ambient Occlusion Be sure to: Create > Lights > Skylight In Max, same as rendering a Normal Map but when you get to the Add > NormalsMap step, also Add > LightingMap and finally, render as you would the normal map This process can be done at the same time as normal map rendering also, and this is usually when I do it. This will create a white material with depth and shadows based on the high detail mesh. Multiply this over your diffuse in photoshop (or vise versa), adding an incredible amount of depth and quality to your material. Final Materials As always, with these materials, it's all about testing and looking it over from all angles Final result