Hostingheaderbarlogoj
Join InMotion Hosting for $3.49/mo & get a year on Tuts+ FREE (worth $180). Start today.
Advertisement

Unreal Development Kit 3 Beginner’s Guide Sample Chapter: Materials

by
Gift

Want a free year on Tuts+ (worth $180)? Start an InMotion Hosting plan for $3.49/mo.

We're continuing our "Unreal Development Kit 3 Beginner’s Guide" giveaway, and giving you a chance to get a sneak peak at some of the content this fantastic book has to offer. Below you'll find a sample chapter which covers working with materials in UDK. If you haven't already entered for your chance to win a copy of the book, find out how after the jump!

Earlier this year Epic Games began releasing the Unreal Development Kit free of charge, making it extremely easy for anyone to get started working with the software. You can find out more information and download the latest build at: UDK.com.



Overview of Unreal Development Kit 3 Beginner’s Guide

A fun, quick, step by step guide to level design and creating your own game world.

  • Full of illustrations, diagrams, and tips for creating your first level and game environment.
  • Clear step-by-step instructions and fun practical examples.
  • Master the essentials of level design and environment creation

Unreal Development Kit 3 Beginner's Guide

UDK offers a fully integrated editing environment through the renowned Unreal Editor. You will learn all of the engine's key tools which are accessible through Unreal Editor. You will learn the basics, from installing to navigating around the editor. You will then start putting together your first level using step-by-step instructions.

You will then learn how to use UDK's real world features, such as dynamic lighting and shadows, particle effects, physics, terrain, item placement, and advanced AI/bot pathing.

Finally, you will learn about UDK's cutting edge high level scripting, adding materials followed by some advanced techniques to boost your skills as a designer, and look beyond UDK with further development into external content, unreal scripting, and modding.


What This Book Covers

Chapter 1, Level Design HQ will explain how to download and install UDK. It will show you how to launch the editor, how to move and rotate around the editor, and finally explain briefly about BSP brushes and static meshes.

Chapter 2, Hello UDK covers the most essential tools and functions you need to know to get started with UDK. You'll be able to quickly jump into UDK and begin feeling comfortable using the most commonly used functions.

Chapter 3, Applying Lighting Effects covers the different types of lighting used in developing and designing an environment in UDK, and how light maps are used on CSG surfaces and static meshes to reflect light off objects.

Chapter 4, Battling the Elements looks at UDK's particle editor (Cascade) works. It will quickly walk you through the interface of the editor and explain how a basic smoke particle, water, height, and fog can be set up.

Chapter 5, Movement with Movers introduces you to the world of animated level geometry in UDK, doors, and elevators, which are activated using InterpActors or triggers.

Chapter 6, Terrain will explain the reader how to set up and modify terrain in UDK.

Chapter 7, Adding Gameplay Elements into your Map explains how to get all of the basic gameplay elements into your map. In this section, we'll set up a Deathmatch map, which is the easiest type to create.

Chapter 8, Complex Event Sequences introduces the reader to UIScenes, for creation of HUD elements, menus, and things like subtitles and titles.

Chapter 9, Materials will explain the basics of creating a mate rial. We'll build some basic (but extremely useful) materials from scratch, and in the process, learn how the material editor works.


SAMPLE CHAPTER

Unreal Development Kit 3 Beginner’s Guide: Chapter 9 - Materials

This chapter will explain the basics of creating a material. We'll build some
basic (but extremely useful) materials from scratch, and in the process learn
how the material editor works.

In this chapter we shall be looking at the following topics:

  • Creating a new material
  • Adding textures to a material
  • Creating a shiny metal surface
  • Adding a normal map
  • Seeing your material in the world
  • Giving a perfect texture to your material
  • Color specular highlight
  • Adding a tint to the diffuse color
  • Making your material easy to read

So let's begin...


What is a material?

A material, in essence, is a small computer program that describes how a surface looks. There's a lot we can do with our surfaces. Look around you; the world isn't just covered with flat paint.

Effects are easy to achieve with the Unreal material system, for instance, here's the material for a metal barrel. You can see in the preview on the left that it has a base color, shiny highlights, and ridges and bumps that bring out details in the surface. The node network in the middle is what describes how the surface looks, and that's what you're going to learn to build.

Time for action – creating a new material

Before you create a new material you'll need a place to test it.

1. Create a new level that's a simple BSP room with a light in it, build lighting, and save it as DM-MaterialTest.udk.

2. Open the generic browser, right-click in the blank gray space of the browser window to the right, and select New Material. Name your new material BasicMaterial and fill in a package name (either create a new package or fill in an existing one). Hit OK.

3. The material editor opens up. We haven't hooked up any nodes yet, so our material preview on the left is black. Let's fix that.

What just happened?

So, we have everything set up to create our first material. Let's start by finding a texture and applying that texture to our material.


Time for action – adding textures to a material

Practically every material you see in UDK gets its look from texture maps. Let's add one now.

1. Leave your Material Editor window open and switch to the generic browser.

2. Find the package labeled HU_Deco, right-click, and fully load it. Look for a texture labeled M_HU_Deco_SM_Vent. Look for it alphabetically, or you can filter by type to make your job easier.

3. Select the texture and switch back to your material editor. What we want to do is create a node representing the texture. In the Material Expressions list on the right, scroll down until l you see Texture Sample. Select it, then click-drag it into the gray viewport to the left , and a Texture Sample node should appear. If the node turns out black, you may not have had the texture selected in the generic browser. Delete it and try again.

4. Now let's hook the texture node up so that it shows up on the surface. The black dot at the top-left of the texture node is the output. If you click-and-drag on that dot, a line will appear; drag a line to the Diffuse input of the big box to the left.

5. The line connects, and you should see a preview of your material on the left. Diffuse is the input that allows a texture to display on a surface. It's the basis for just about every material.

6. If you need to, you can move your Texture Sample node around by ctrl+click+dragging it. Give this a try now.

What just happened?

So, we have now created our first textured material, but at the moment it is looking pretty basic. So what can we do to make our material stand out more? I will now explain some steps to make your material realistic and stand out when used in your environment. Let's start by adding a shiny surface to our material.


Time for action – creating a shiny metal surface

This texture is supposed to represent a metal surface, so let's make the material shiny. There are a couple ways to do it, but let's use this opportunity to learn about a new node type—a Constant.

1. Find the word Constant in the Material Expressions list, and drag it into the editor viewport.

2. Connect the new Constant node to the Specular rendering terminology for shininess input on the left.

3. It didn't seem to have any effect. Right now, the constant has a value of 0, which means no specularity. Select the constant, and then at the bottom of the window, in the properties window, you'll see it has an R value of 0.000000. Change it to 2.000000:

4. Rotate the Preview cube around and you'll see that now it's much shinier.

What just happened?

So, as you can see, we have applied Specular map to our material, which will give the texture a glossy finish, but as you can see in the previous image, it still doesn't look great. So what can we do to improve the quality of the specular map? We will now add a normal map, which will increase the divine characteristics of our texture. Normal mapping is used to bring the best out of your materials, which will make your environment look sharper and more atmospheric.


Time for action – adding a normal map

Right now, lighting affects the surface as if it were completely flat. We can add a normal map to make the material appear to have depth. You've probably noticed that for almost every diffuse texture, there's a pale blue texture with similar sorts of details. Those are normal maps.

1. Go back to the generic browser and search for T_HU_Deco_SM_Vent_N.

2. Select it, go back to your Material Editor, and drag another Texture Sample node into the editor. Hook it up to the Normal input of the box on the left.

3. Now there's a lot more depth to the lighting and reflections.

4. Your node network should now look as shown in the following screenshot:

What just happened?

So, we have now added a normal map to our material, and as you can see from the images, it stands out a lot more than without the normal map. So what does it look like when we import it into our world; why not have a look. Let's now go ahead and apply the material to our map, and see what the results are.


Time for action – seeing your material in the world

1. You'll see that the material's thumbnail in the generic browser has updated.

2. You can apply it to a surface in the world—you can see here that the floor is reflecting the light in the middle of the room.

What just happened?

As you can see from the image above, this is what the material will look like when imported into our level, but it still doesn't look like metal; so how can we improve this? Let's go ahead and add some more maps to create the perfect material.


Time for action – giving a perfect texture to your material

1. So, as you can see from the image above, the material really doesn't look like metal. It's too bright for one thing, but it's also too uniformly shiny. The diffuse texture has lots of darker rusty areas that shouldn't be as shiny. You can hook the diff use texture sample directly into the Specular input, and the color of the texture will control the specularity. Do that now.

The highlight definitely looks better, but now it's probably too subtle. Let's look at how to brighten it up.

We can multiply the colors in the texture by a larger value so that they appear brighter.

2. Find a Multiply node in the Material Expressions list and drag it into the window.

The Material node (as you'd expect) multiplies two numbers together (the inputs A and B) and outputs the result on the left. What do we want for inputs? How about our texture, and that constant with a value of 2 that we created earlier?

3. Connect up your network as follows. You may have to rearrange the nodes (by Ctrl+click+dragging them). Once you hook everything up, you'll see the Specular highlight gets twice as bright.

You can, of course, make it even brighter by selecting the Constant node and typing in a larger number. Change the value to 5.

4. Now, let's look at one more way to change the specularity of the material. Click on the Sphere icon at the top of the window; this changes the preview mesh from a cube to a sphere.

5. As you can see from the image below, we have changed the preview from a cube to a sphere. This will make it easier to see our changes.

That highlight looks a little strange for metal. It's too wide of a spot, which kind of makes it look like a soft plastic surface. We can adjust the sharpness of the highlight by plugging a constant into the SpecularPower input.

6. Create a new Constant node, give it a value of 100, and plug it into SpecularPower. You'll see the highlight gets a lot sharper, though it's just as bright as it used to be.

Play with the number and get a sense for the effect it has. Low numbers make the highlight really wide. High numbers make it sharper. Anything less than 1 looks kind of broken.

7. When you're happy with the results, hit the leftmost green checkmark to apply your changes, and check out your material in the scene.

8. Your network should now look as shown in the following screenshot:

What just happened?

So, as you can see, the material is looking far better than before. How did we do this? As you can see from the image above, we now have 4 different types of mapping. We have the Diffuse map, Specular map, SpecularPower map, and a Normal map, which together have created a more realistic material for our environment, but were not finished yet. We are now going to look at color specular highlights.


Time for action – color specular highlight

Often times, reflections in metal take on a slightly bluish tone. So let's look at a new node type—a Constant3Vector, which is essentially a node that allows us to specify a color.

1. Click-and-drag a Constant3Vector into the Material Editor window. While a Constant has only one value that we can edit, a Constant3Vector has three values, R, G, and B (for red, green, and blue). By combining R, G, and B, we can make any color that your monitor can display.

2. Here you will see a box with R, G, B, and Desc options, and numbers opposite each option:

3. Type in a value of 1 for R; this will make the output of our node pure red. You can click the little black box at the top of the node to get a real-time. preview; notice the box turns yellow when the real-time preview is turned on.

4. Alright, let's hook this up to our specularity. We currently have a Constant multiplied against our texture. Let's replace it with this Constant3Vector.

5. Ok, the highlight is definitely red, but it's pretty dim again. We could add another Multiply node and multiply in the Constant, but instead, we can just change the R value of the Constant3Vector to 5, and we'll get the same result.

6. Now, all we need to do is pick a number for the Constant3Vector that looks good. I found 4, 4.5, or 5 looks good, but play with it yourself and come up with something you like. You can also delete that extra Constant node, since we're not using it anymore.

7. Your network should now look as shown in the following screenshot:

What just happened?

So, as you can see from the images above, the color specular highlight highlights certain areas of our material, making it look even more polished. So are there anymore tweaks that we can do; how about adding a tint to our Diffuse Color map.


Time for action – adding a tint to the diffuse color

Let's go through one more exercise, just to make sure you've got the basics. I won't walk you through it this time, but let's add a tint to the diffuse color.

1. Create a new Multiply node and a Constant3Vector node, and hook them up just like you did for the Specular color. Pick a nice rusty orange color for the tint (1, 2). You should end up with something that looks like the following screenshot:

What just happened?

So, as you can see from the image above, we have added an orange tint diffuse color to our material, which is the finishing touch and now our material is ready to be used in our environment. The final section is to make our material easier to read in the Material Editor. So let's go ahead and polish things up.


Time for action – making your material easy to read

Almost over, but we've got one very important topic to cover—clean-up and commenting. You may be able to read your material just fi ne now, but when you come back in a week, or a month, an organized material with some useful comments will be a lot easier to understand.

1. The first step is good organization. As we've seen, data in the Material Editor flows right to left (the inputs of our nodes are on the right, and the spit out data to the left ). Take some time now and organize your nodes so that there's no backtracking (the Texture and Constant nodes should be on the right, and the Multiply nodes should be to their left ). Also organize things to minimize crisscrossing lines—the nodes controlling Diffuse should go on top, with the ones controlling Specular below. Try to get a network that looks like the following screenshot:

2. The next thing we can do to organize our network is label the nodes. For instance, what if you decided at some point that you didn't like the color of the Specular highlight? It would be a lot easier to figure out what to change, if that Constant3Vector node had a label on it. Select the node, and in the properties at the bottom, fill in the Desc field with a label for the node as Specular Tint.

3. The node now has text floating over it, saying what it does.

4. Label all of your input nodes this way. A good rule is, if it's a node you'd want to tune at some point (such as the Texture inputs and Constant), give it a label. If it's just a functional node (such as the Multiply), don't bother.

5. One more thing we can do is select a bunch of nodes and put a comment box around them. This groups them together in a logical way, and we can remind ourselves of what a whole cluster of nodes is supposed to achieve.

This network isn't really complex enough that comment boxes are critical, but let's add some anyway, so that you know how they work.

Select the Diffuse Tint node and the Multiply node it feeds into (Ctrl+click to select them, and right-click to add a comment box).

6. In the Comment Text window, add some useful text, such as Tint the Diffuse.

7. You now have a box grouping your nodes. If you drag it around, anything inside of it will be dragged along. Add another comment box labeling the Specular Tint nodes, hit the green checkmark, and save your package.

Believe it or not, this is an extremely powerful node network, and in fact does more than you need to produce a full-quality asset.

What just happened?

So, what we have done is added floating text underneath each map to show you what each one does, and that it doesn't get too confusing when you next create a new material.


Summary

We learned a lot in this chapter. Specifically, we covered the following:

  • How to create a material
  • How to add textures to our material
  • How to create a shiny metal surface
  • How to add normal mapping
  • Seeing our material in our world
  • How to use the perfect texture for our material
  • How to create color specular highlights
  • How to add a tint to our diffuse
  • Making the material easy to read

So we have learnt how the Material Editor works, and how to create a material from scratch.



Editor's note: This post was sponsored by Packt Publishing.

Advertisement