From Textures To Materials in Unreal Engine 3, Part 2

This is part two of the tutorial “From Textures To Materials In Unreal Engine 3″, in which we will create a new material in UT3 which uses textures we’ve created from scratch in Photoshop. The second part of this tutorial concentrates on xNormal and saving individual .bmp files of our textures.

Note to reader: This tutorial uses Unreal Tournament 3, Photoshop and xNormal to generate normal maps. The workflow might very similar in other Unreal Engine 3 games, and you can do the same things in GIMP or another equivalent that you can do in Photoshop. You can download xNormal for free, or use other software (such as CrazyBump) you’re familiar with. Within this post, UE3 means Unreal Engine 3, PS mean Photoshop, UT3 means Unreal Tournament 3 and UT3Ed means Unreal Tournament 3 Editor. I expect you to know the basic functions of UT3Ed and Photoshop. If not, you can Google for tutorials on both.

If you haven’t already, go and see part one of this tutorial, which concentrates on creating the basis for our textures. If you’ve already read it, please continue with part two.

Looking Back At Part One

In part one we created four textures which we will use in Unreal Engine 3: the diffuse map, the specular map, the height map and the normal height reference map. In part two, we will use xNormal to generate a proper normal map from the height reference and get it back to Photoshop. Then we will get each texture and save them as .bmp files. This will result in four textures which can be imported to the Unreal Editor.

Generating The Normal Map In xNormal

If you haven’t already downloaded and installed xNormal, do so now.

Open the application. It has a funky/scary interface, yes, but you’ll get used to it quite quickly. Click on the tools section in the sidebar and select “height map to normal map”. A window with two viewports and a bunch of options appear. On the left is the viewport of the height reference, and on the right is the normal map generator.

Right click on the height map viewport, an option to load a height map should be available. Load the height reference map we made earlier. Set the height source source to gray and make sure bias in not ticked and there is no need to normalize image colors.

Before generating the normal map, let’s look at the options on the right. Under the right viewport there is smooth and method. Smooth is the amount of smoothing applied on the generated normal map and method is the type of generation used. I’m not certain as to what method does exactly what, but I’ve noticed that bigger numbers mean stronger maps. Set smoothing to 0.5 and method to SO_3×3. After that are two options, “allows tiling” and “puts height in alpha”. Enable tiling, as this material will most likely span over a large area. Disable the alpha option, as we’ll be creating our own, simpler height map in Photoshop after we’ve sorted out this xNormal business.

Under them are some dropdown lists, with options for ±X, ±Y and ±Z. Here’s a small catch: either Unreal Engine 3 or xNormal flips around the Y-coordinates. Therefore we must use +X, -Y and +Z to get the right result.

That’s it, no more options. Right-click on the generator viewport and select “generate”. A blue normal map should appear. To “look at the image properly”, imagine that there is a blue room, with a green light coming from the bottom and a red light coming from the right. You can see my results in figure 1.

fig 1, the generated normal map in generator viewport

Figure 1: The generated normal map in the generator viewport. Proper options for this texture are also visible. Click for larger version.

If you’re happy with the result, right-click on the right viewport again and select “save normal map”. I saved it as “floortile_stone_N.tga”. This one can be then overwritten after we’re finished in Photoshop.

Finishing The Height Map

Open up Photoshop again, and load our base .psd we created in part one. It should have four groups for diffuse, specular, height and normal reference. Open up the height group and select the layer which resides there. It should be like the “tiles_base” layer we created in the very beginning of part one. We’re going to modify it a bit.

Take the wand selection tool and set tolerance to 1. Select every light gray box with a single click (with additive selections of course). Then in the select menu, contract it by 25—35 pixels and feather with the same amount. After that, create a new layer and render clouds from the filters menu. Set the layer to overlay with an opacity of around 65%. Now the tiles’ surfaces have a bit more variation than a flat face.

Let’s add some contrast. Make a new adjustment layer, the brightness/contrast kind. Set brightness to -50 and contrast to 15. After that, flatten the group into one layer. See figure 2 for my results.

fig 2, the finished height map

Figure 2: The finished height map. Not too boring, not too complicated. Click for larger version.

Saving Each Texture As A .bmp File

Create a new layer and group it into “Normal” or something similar. Now open the generated normal map into a new document, select all and paste onto the new layer in our complex .psd. If everything went right, you should see the blue normal map inside the old .psd.

Flatten everything inside each group, so we will have four (five if we count the normal height reference image) single images, which can be saved as individual files. Everything flattened and looking good? Great. Instructions:

  • Make the diffuse map visible and save as “floortile_stone_D.bmp” or similar.
  • Make the specular map visible and save as “floortile_stone_S.bmp” or similar.
  • Make the normal map visible and save as “floortile_stone_N.bmp” or similar.
  • Make the height map visible and save as “floortile_stone_H.bmp” or similar.

Now we’ve got ourselves four .bmp files, all ready to import.

Finishing Up In Photoshop

That’s it for part two, we generated the normal map in xNormal and saved the textures as individual files in Photoshop. Now we have four import-ready texture files waiting on our hard drives. Part three is all about Unreal Tournament 3 Editor: importing, assembling and using.

Leave a Reply

You can use these XHTML tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>