From Textures To Materials in Unreal Engine 3, Part 1

In this tutorial, I’ll show you how to get your own textures working inside Unreal Tournament 3 as materials. We’ll be creating a basic—but usable—texture set for a single material in Photoshop, which is then imported and assembled together inside the material editor of UT3Ed. The first part of this tutorial concentrates on Photoshop.

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.

This is a long and in-depth tutorial, be prepared to read a bit. You’ve been warned. And sorry about mistakes and typos in advance, this is a long post, so some might have been accidentally left in. Report them if you see them, thanks.

What Are We Creating?

During this huge tutorial, we will be creating something like this: See the final result for our tutorial.

I hope this tutorial is easy enough to be handled by level developer newbies and intermediates alike. If not, hit me with a comment and I’ll try my best to streamline this one some more.

If you do not wish to create your own textures, but wish to see how materials themselves are created, I’m offering my versions of the textures to download and be used: download the .zip-file containing 4 .bmp-files, ready for import to Unreal Engine (4,45 MB). Please include me in the credits if you manage to find a good use for these textures. Thank you.

Different Types Of Textures

If you know (or are not interested in theory) what textures are, you can skip to the next section. This section goes through what textures are and how they can be used in game development.

In game terminology, the word ‘texture’ most usually means an image which is applied to various surfaces to mimic real life surfaces, such as brick walls, human skin, worn metal of an old barrel, et cetera. Sometimes—as you will notice after reading this for a while—textures can also be called bitmaps or maps too. In the early days, one surface used one texture. Nowadays, surfaces use materials, which are made out of many textures and various expressions. We’ll find out more about UT3 materials in the second part.

A texture is either a grayscale or colorscale image. Some textures might have opacity information applied to them too. The color information in textures can also be used for various things, such as using the red channel of a texture to mask another texture to something else.

In UE3 (and most other game engines) textures must be sized in powers of two. As in: 2×2 pixels, 4×4 pixels, 256×256 pixels, 128×1024 pixels, et cetera. If you try to import an texture into UT3Ed which is not in powers of two, the editor will give you an error message. You can read more about powers of two at Wikipedia.

The most common, and oldest type of textures is the diffuse map. Diffuse maps simulate color on the surface. One can also fake lighting on diffuse maps, which came in handy when creating assets for older engines, which couldn’t use lighting to their full potential on surfaces. You could call engine-generated solid colors diffuse maps too, if you wanted.

Another type of textures are specular maps. They really are not a texture, but kind of a colored maskmap to tell where a surface should shine fake reflected light off, and in which color. If you apply a constant red to a specular channel in an material, it would look like red stuff reflecting off the whole surface of the material. The lighter the pixel, the more shinier the surface gets at that area.

Normal maps add fine detail to materials, and take lighting into account, and applies shadows where needed. The amount of detail is up to the artist. I like to create my normal maps to give medium details about the surface, and add a detail normal map over it to simulate close-distance details, such as small bumps and cracks, visible from a meter at maximum. Normal maps are built out of color information, which tells the surface which way to “offset” pixels. Blue is for up, red and green for the sides. Because the red and green channels modify the angle of the surface, they modify the “up-channel”, blue. This is why most normal maps appear very blue. The less blue there is, the less “up” there is, which would make the surface appear deeper. Sometimes I lessen the blue just a bit to bring out the details some more.

Height maps are used to offset pixels from the surface, determined by the amount of black and white over the pixel. More white means more offset. Height maps are mostly grayscale, and only offset straight up from the surface. Height maps can be used with bump maps, parallax map, relief maps, displacement maps and many more. Some of those words are interchangeable with each other, but all of them are about offsetting pixels from the actual surface geometry. height maps should be for larger details, as small details in heightmaps tend to create unwanted noise on the surface. Make sure not to have too sharp contrast in height maps too, as it is possible to get so called “texture swimming” appear on the surface, which makes nasty looking distoritions and pixel movements appear. UE3 uses height maps for parallax maps.

In this tutorial we will use these four types of textures as 4 .bmp files.

Let’s Get Photoshop Open

I’d like to create a floor with stone/concrete/something tiles. It easy enough, but can be done to look quite cool if you know what you want. Well create a texture set for a floor with 4×4 tiles on each texture block. With a texture block I mean a single piece of the texture, when it is not tiling, or it is not scaled smaller or larger than it normally is.

Create a new empty document, sized 1024×1024. You can go 2048×2048 or 512×512 too, but 1024×1024 is okay unless you need more detail or less detail. Remember to use 72dpi. Background color doesn’t matter, I made mine transparent.

Create a new layer, and group it to a group called “Diffuse” for the sake of organization. In this group we will create the diffuse map or this texture set. Fill the new layer with 50% gray.

Next, show the grid. If your grid is not already in powers of two scale, do so in the options. Mine is at 128 with two subdivisions. We will “draw” the tiles using this grid scale, so it will stay perfectly fit on the powers of two scale.

Create a new layer and select the rectangular marquee tool. Select a square from the top left (or where ever you wish to begin tiling), sized 256×256, or 4 grid spaces. Fill the selection with white (or some other color, doesn’t really matter). See figure 1 to see how it looks on my screen.

fig 1, first block has been laid to our canvas

Figure 1: The first block of our tiles has been laid to the canvas. Click for larger version.

Open the blending options of this white block. We will make it fade nicely into the gray backdrop, creating a beveled looking shape. Open the inner glow tab, change the blending mode to normal, opacity to 100% and color to #808080 (or 50% gray in other words). In the elements section, change softer to precise and the range to 15 pixels. This will create a gutter between tiles, which is easy to add height info and normal detail in. Next open the color overlay tab, and overlay the layer with something around #AAAAAA and #CCCCCC. I used #C0C0C0. Result can be seen in figure 2. You can now close the window and we’ll proceed to the next step.

fig 2, the first block now looks like a beveled shape

Figure 2: The block has been styled to look like a simple beveled shape.

Next we will lay these styled block over the whole canvas, to form the tiles. Select the layer with the block, duplicate, and move it next to the old one using the grid. It should snap nicely into place. Do this to fill the whole canvas and avoid misalignments. See figure 3 for reference if my words were too confusing. Now select all layers which have a block in them and merge the whole thing into one. Rename the new layer to “tiles_base” or something.

fig 3, the blocks have been layed to the canvas to form the tile pattern

Figure 3: All blocks are in place and merged together for further styling. Click for larger version.

This same layer can be used to create our height map, so duplicate it and move it out of the group. Create a new group for it an call it “Height”. Hide it and leave this new group alone for while and we’ll continue creating our diffuse map. Now we’ll add some color to the diffuse. Not too much, because very saturated surfaces are difficult to light properly. A brilliant red wall will not show blue lights properly. This of course depends on the effect you’re after.

Add a new adjustment layer, the hue/saturation kind. A window pops up with sliders. I’m going for a very pale brown for these tiles. Tick colorize, move the hue slider to around 40 and the saturation around 15. Keep the lightness as is. Hit OK. Now we’ve got some color in. Not too complicated yet, but this could be used as is and create other details with normal maps. But let’s have some fun and add fake rivets and bumps to the diffuse too.

Add a new layer over the adjustment layer, fill it with 50% gray. Let’s generate some easy fibers to create a rough looking surface. You can find fibers in the filters menu under render. In the option window, set variance to 64.0 and strenght down to 1.0. You can click randomize a few times if you want. Then hit OK and change the blending mode of this layer to luminosity. It might look a bit too rough, so let’s change the contrast a bit. Open the adjustments and contrast/brightness menu. Lower the contrast to about -80. Then lower the opacity of this layer down to about 67%. Rename the layer to “diffusedetail” or something similar. See figure 4 for our progress so far.

fig 4, the diffuse map has been roughened with some fibers and layer blending

Figure 4: The diffuse map has been roughened with some fibers and layer blending. Click for larger version.

I think we’re done with the diffuse! Great job daring to come this far! Next up is the specular map, which we will create somewhat procedurally to simplify the job. You could make it by hand it too, but I’ve found the procedurally created maps good enough for simple works.

The Specular Map

Duplicate the diffuse group and rename it to “Specular”. Merge the layers together, add a adjustment layer type brightness/contrast. Set it’s brightness down to -50 and contrast up to 75. Now you’ve got a nice dark specular map for the diffuse. Remember that darker speculars create less shininess, which is appropriate for our stone material. Only wet stones shine much. The map looks a bit harsh, so lets blur it a little with a gaussian blur. Select the flattened layer under the adjustment layer and add a blur of 2 pixels to it. Now I think we’re done with the specular map, see figure 5 for the result I got.

fig 4, the outcome of our somewhat procedural specular map

Figure 5: The outcome of our somewhat procedural specular map. Click for larger version.

The Reference Texture For The Normal Map

Next we are going to create the height reference image for our normal map. In xNormal we will take this height reference and turn it into a colored normal map image, which can be edited further if need be.

Remember the height group we hid? Duplicate it and rename it to “Normal Ref” or some such. Then head back to the diffuse group, duplicate the detail layer (which we created using the fibers filter) and move it over the “tiles_base” layer inside the normal group. Change the detail layer’s blending mode to overlay and restore the opacity back up to 100%. You can blur the detail layer a bit, perhaps half a pixel, to tone down sharp edges. Now we’ve got a nicely detailed reference for our normal map.

fig 4, the finished normal height reference image

Figure 5: The finished normal height reference image. Click for larger version.

Saving And Moving On

We’re done with our first textures inside Photoshop. Save the whole thing as a .psd into a location you wish. I have a nice folder with sub-folders and such for my creations, because I like to keep things organized. I saved the .psd as “tilefloor_base.psd”.

Next we’ll take the normal reference and save it as a simple .bmp image. Open the “Norm Ref” group and flatten the contents. Then save the result as “normref.bmp” or something similar, preferrably in the same place you saved your .psd.

This ends part one of this tutorial. In the next part, I will go through using xNormal to generate the normal map from our height reference image. After that we’ll take each texture and save them as .bmp files. The third part will focus on the Unreal Editor part of this tutorial, which includes 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>