From Textures To Materials in Unreal Engine 3, Part 3

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 and part two of this tutorial. If you’ve read them already, please continue wth part three.

Working With The Unreal Engine

The Unreal Engine has always supported map-specific packages to hold assets such as textures and meshes. In this part of this tutorial we will create dummy level for our material before importing anything. This will create the map package for us to import our textures in. It is advisable for normal Unreal Tournament 3 levels to use the map’s own package to store custom assets used in the map. Mod teams and larger groups on the other hand need to create larger independent packages for various reasons.

Open up the editor and create a new level with just a single room. No need to decorate unless you want to. Take your time.

Then save it, I’m calling mine “DM-TEST-FloorTile_Stone_Material.ut3″. When you saved your level, the engine created the map’s package in the generic browser, where you can now import your own assets.

Importing To Unreal Editor

Open the generic browser of the editor. On the left asset filter list, tick “material” and “texture”. Now we will only see materials and textures in the browser. Our map’s own package isn’t visible yet because we do not have any assets in it yet. Let’s change that.

Open “file” and select “import”. A file browser window opens up. Browse to your diffuse texture you created in part two and open it. A window pops up:

From the package menu, select the name of the level to save this texture into it’s package. Give it a group if you want to, I added “Floors”. Changing the texture name is also optional, I kept it as is. Remember to tick non-alpha compression as we do not have any. After you’re done, click OK.

Look for your map’s package in the sidebar now, visible isn’t it? Open it and view what you just imported. The diffuse texture with red borders around it should be sitting in there.

Time to import the specular. Select import again and search your specular map. Wait for the import dialog. Make sure the package is right and name to your linking. Check non-alpha compression, and in LODGroup, select WorldSpecular, as this is a specular map. Hit OK. Now there should be a specular map and a diffuse map in your map’s package.

Let’s continue: the normal map. Import again and wait for the import window. Check the package and the name. Now tick non-alpha compression, use WorldNormalMap for LODGroup and look at the compression settings: select TC_Normalmap. Hit OK to import.

Next up: the height map. Import again and let’s see if there are any options to change in the import window. Nothing interesting, check names, tick non-alpha and compress as TC_Grayscale. Click OK. Now we’re done importing our texture files. Don’t worry if the preview images look quite different than in Photoshop, they will work as they looked back then.

Creating The Material

This is it folks, time to assemble! With the four textures we imported, we can create a fully functional and somewhat good looking material to be used in UT3 levels.

Click file and select new. Browse to the proper package and give the material a name. I named mine “MAT_FloorTiles_Stone”. Set the factory to “material”. Hit OK. If the editor prompts you to fully load the map’s package, do that. A new image with a green border should appear besides you red bordered textures.

Now we’ve got a so called “empty material”, which displays the default checkerboard of UE3. We need to add textures and expressions in it to make it look like something cool. Open the material editor by right-clicking or double-clicking.

A window comes up. This is called the Material Editor. In this editor you can create all sorts of materials. I’ll be teaching you the basics, which are needed to make this material using our textures.

On the left is the preview viewport, and above it are all sorts of buttons. The geometric shapes resemble the shape you want to see the material on in the preview viewport, and you can toggle grids, use meshes in the preview, et cetera. They’re quite self-explanatory if you hover your cursor over them.

The big gray area is what I call the “node window“, this is where the magic happens. You add texture samples, expressions, connect dots and make things look good. Right clicking will bring up the same menu as the right sidebar is: the expression list. Clicking on one will add it to the node window.

On the bottom are the properties for either the material itself, or the currently selected expression. Here you can insert properties for different things, assuming the selected expression has any.

That was the quick tour through the material editor, now we can get to a game called connect the dots. This is done in the node window by adding things and connecting them in a correct order.

Firstly, add a TextureSample expression to the node window. These expressions are used to bring textures for use by materials. Look at its properties. There is an empty texture parameter. Browse (using the magnifier near the right end) for your diffuse map and insert there. The expression should now show your diffuse map in the node window.

Try connecting it’s black RGB connector to the material’s diffuse connector. What happened? That’s right, your diffuse is now diffusing the material, and became visible in the preview. Look around in the preview window to see from angles.

Add another TextureSample, and use your specular map with it. Connect to specular and see if there are any changes in the preview. If you slowly move around the preview mesh, you should spot something shinig on the surface of the tiles. That’s specular! But it’s awfully brown to be honest. Let’s tone down the color a bit. Right click on the node window, and look for a Desaturation expression. Add it. Now connect the specular map to the desaturation expression and then connect the desaturation to the specular connector of the material. See the difference? No colors. At all. We wanted some color, not none.

No worries, we’ll plug a Constant to the percent connector of the desaturation expression to control the amount of desaturation. Add the Constant, and in the properties change its value to 0.5. Then connect it to the percent connector. The values accepted by this connector range from 0.0 to 1.0. Let’s view the material so far:

Looks okay, but still a but Qukae 1-ish to be honest. Next we will add detail our normal map, and a close detail additive normal map if need be.

Add another TextureSample, browse for our normal map and connect it to the normal map connector. See the difference? Lighting! Normal maps do give a huge boost to the believability of the material. Although we could pump it up some more. Remember when in the first part I told about toning down the blue channel to bring out the details some more. Let’s do that.

Next to the normal map texture, add a Multiply expression and a Constant3Vector expression. Multiply multiplies two inputs together and with Constant3Vectors you can create solid colors with red, greed and blue values. Connect the normal map texture and the constant to the multiply. Give the constant a value of 1,1,1 to create a solid white. Now connect the multiply expression to the normal map connector of the material. It isthe same as before yes, because we multiplied with one, meaning there is no change.

Now insert a value of 0.5 to the blue slot in the Constant3Vector. See the change? The normal map now really pops out of the material.

Let’s try adding a detail normal map. This is to add detail when the material is viewed from a close distance. Open your generic browser, and seach for a package called “UN_DetailTex” in the left sidebar list. Right-click and select “fully load” to see all its contents. I’d suggest trying “UN_DetailTex_Crackle3_N” for our detail normal. Add it to our floor material, besides the old normal map texture.

It needs to be scaled down, or it will become a large detail normal map. We need small details now. Add a TextureCoordinate expression behind it and connect it to the UVs connecter of the detail normal map. In TexCoord’s properties, type in 8 and 8. That should be small enough. Now we need to add it to our old normal map texture, before connecting to the material connector. Insert an Add expression. Connect the texture sample and the multiply to it. The normals washed out a little, didn’t they? To fix this, multiply the new detail normal map with a Constant3Vector too! Try a very, very low value for the blue channel, such as 0.1. It worked for me. I then added the multiplied texture samples together and connected to the normal map connector, like this:

Okay, normal maps are done, now we’re going to add some parallax mapping with our height map.

Add a texture sample using it, and take a bit further back than the TexCoord expression is. Before it, create a BumpOffset expression. Connect the height map’s red, or green or blue channel to it’s height connector. Add another BumpOffset, nearer to the TexCoord expression, as we’ll draw the coordinate input from it to this BumpOffset. Connect the height map to this expression too, and then connect the TexCoord to its coordinate connector.

Now the magic happens: connect the first BumpOffset to the UVs connectors of each texture sample, except the small detail normal map. Then connect the coordinated BumpOffset to the small detail normal map. Take a view on the preview. nothing too dandy, something visible, but only a little.

Now open the properties of both BumpOffset expressions, and change the HeightRatio from 0.035 to 0.075. The larger the number, the more it bumps. You can also play around the ReferencePlane slot. I set mine to 0.25. The lower the number, the higher the offset seems to appear. Don’t panic when some expressions turn pink, it is normal behaviour.

Here’s the material setup so far:

We’re almost done in the Material Editor, only things we need to change are the properties of the material itself. Most importantly the physical material and a fallback material. To create a fall back material easily and painlessly, just click on the middle green checkmark on the top menu of the material editor. This creates a fallback material to the same package, next to your ordinary one. Fallback materials are used for older graphics cards, which cannot sometimes run along the engine and have to reduce the amount of data turned in by materials, or when their technology is too old to display certain features of the material.

In the generic browser find this fall back material (usually suffixed as “_fallback”) and assign it to the fallback material slot of the proper material, unless it already is.

Physical materials tell the material what physical properties it has. This affects things like shooting at the material and moving on it. To assign a physical material, you need to find one and assign it to the materials PhysMaterial slot. Remember to tick the correct checkbox in the asset filter area of the generic browser. There are physical materials over at the package called “PhysicalMaterials” (tada!). I chose stone, but you can choose any which you wish.

Remember the save the material when prompted, or by clicking the leftmost green checkmark on the toolbar. Our work within the material eidotr is done. Congratulations, you’ve just created a working material!

Using Your Brand New Spanking Material In UT3 Levels

Using your new material is like using any other retail material. Select from browser and apply to surface, mesh, or anything. I made a small test using my material and got this:

What Now?

I glad you managed through that typohell all the way here. I hope you learned even something about the material system whch UE3 uses and what is needed to create a material.

Feedback can be left here with comments, or through means found at the about page. I can bet my ass this tutorial is riddled with mistakes and typos, so any pointers will be greatly appreciated. Thanks.