160 Game Development and Simulation with Unreal Technology
ii. The second way is to find the TextureSample expression in the Palette
on the r ight side of the screen and drag-and-drop it onto the graph.
iii. The third way is to hold down the T key on the keyboard and left-click
on the graph.
iv. The final way to create a TextureSample expr ession is to drag-and-drop
the desired texture from the Content Browser directly o nto the graph
in the Material Editor.
b. For now, we will use the right-click method. If you have n ot alread y created
the Tex ture Sample, Right-click on the graph and search for Texture-
Sample. This adds an empty texture expression onto the graph editor.
(a) (b)
FIGURE 4.32: (a) Details Panel. (b) Brick Texture Assigned.
13. Click to select the new TextureSa m ple expression that you just created. You will
notice th e Details Panel on the left-hand side of the screen has changed to reflect
that you have selected this expression.
14. In the Details Panel, you will notice that there is a box labeled Texture (see
Figure 4.32(a)). We will need to give the expression a texture to refer ence.
15. Go into the Content Browser and select T_Brick_Hewn_Stone_D texture.
16. Return to the Material E ditor and select the arrow next to the box labeled Texture.
This will give the TextureSample expression a texture to reference.
17. Connect th e white connector on the right side of the TextureSam ple expression
(i.e., its output channel) by clicking on it and dragg ing your mouse over to the
BaseColor channel of the Material Node box. Notice how the Preview Window
on th e left side of the editor ch anges to reflect your modificatio ns. Your ma te rial
should look like the one in Figure 4.32(b).
Materials in Unreal Engine 161
18. Save the material and close the material editor.
ADDING THE NORMAL MAP
Notice that you r material does not interac t with the lightin g in any interesting
way. It simply looks bland. It looks just like a flat im age transposed on to a three-
dimensional object. Adding a no rmal map will add additional normal vectors on
the surface of the obje ct to allow for light interactions with the surface of your
material to make the material much more interesting.
19. In the content browser, right-click on the ma te rial you h ave created so far and
select Duplicate. This will create a duplicate of your material. We will use this
duplicate material to add the norma l map.
20. Select th e duplicate material you created in the above step. Press F2 an d rename
the material to Mat_Simple_Normal.
21. Double-click this material to open it in the M aterial Editor.
22. Right-click on the graph and add another TextureSample parameter. From the
Content Browser, select T_Brick_Hewn_Stone_N and set it as the textur e to ref-
erence, just like you did in step 13.
23. Connect the new Tex tureSample with the normal map to the Normal input chan-
nel of the Material Node. Notice how the preview window reflects these changes
(see Fig ure 4.33(b )).
(a) (b)
FIGURE 4.33: (a) The Material without a Normal Map vs. (b) t he Same Material with the
Normal Map Applied.
24. Save the material and close the material editor.
162 Game Development and Simulation with Unreal Technology
MODIFYING THE NORMAL TO ADD MORE DEPTH
Your material already looks a lot better, but it is possible to add some more
depth of detail to it by editing the vectors of your normal m ap.
25. In the content browser, right-click on the Mat_Simple_Normal material and se-
lect Duplicate. This will c reate a duplicate of your material. We will use this
duplicate material to add the norma l map.
26. Select the duplicate material you create d in the above step. Press F2 and rename
the material to Mat_Enhanced_Normal.
27. Double-click the Mat_E nhanced_Normal material to open it in the Material Edi-
tor.
28. Create a Constant3Vector by either right-clicking on the graph editor and
searching for it, or holding the key 3 on y our keyboard and clicking on the graph.
29. In the Details Panel, expand the Constant section if it is not already expanded
by clicking on the small triangle next to it.
30. You will see three floating point numbers labeled R, G, and B. Edit the value of B
to 1.0. This changes the Constant3Vector to be pure blue.
(a) (b) (c)
FIGURE 4.34: (a) The material without a Normal Map vs. (b) the same material with the
Normal Map applied and (c) the material with the enhanced Normal Map as designed by the
network in steps 28–43.
31. Add another Con stant3Vector below the first one.
32. Change the R and G values to 1.0. Leave the B value at 0.0. This will change the
Constant3Vector to yellow.
33. Time to edit th e depth of the normal map. Add a Constant below the second
Constant3Vector, you created above, by either right-clicking on the graph editor
and searchin g for it, or by holding the key 1 on your keyboard and clicking on the
graph.
34. Change the value of the Constant to 2.0 in the D etails Panel.
35. Create a Multiply expression by right-clicking the graph and searching for it.
Note: You can a lso add a Multiply expression by holding the key M on your key-
board and clicking o n the graph.
Materials in Unreal Engine 163
36. Connect the Constant output to the B input of the Multiply exp ression.
37. Connect the yellow Constant3Vector output to the A input of the Multiply ex-
pression. This will incr ease the intensity of the N ormal Map.
38. Create an Add expression further to the right by right-clicking the graph and
searching for it. No te : You can also add an Add expression by holding the key A
on your keyboard and clicking on the graph.
39. Connect the Blue Constan t3Vector output to the A input of the Add expression,
and the Mu ltiply output to the B input. This adds the two vectors together to
complete the normal m ap.
40. Now cr eate another Multiply expre ssion to the right of both the original Texture-
Sample containin g the normal map, and the new Add expression you created
above. Connect the normal map’s TextureSample output to the A inp ut of the
Multiply expression, and the Add output to the B input o f this Mult iply expres-
sion.
41. Finally, create a Normalize expression to the right of th e newest Multiply ex-
pression. To do this, right-click on the graph editor and search for Normaliz e.
42. Connect the output of the Multiply to the input of Normalize. The reason why
this is necessary is bec ause a normal vector must have a magnitude of 1. By nor-
malizing, it brings the magnitude down to 1, and thus ensures th at no undesirable
lighting artifacts occur.
43. Connect the Normalize output to the Normal input channel of the Material Node.
Notice the new changes on the material; the bricks appear to have slightly more
depth than before. This method c an be utilized if a normal map do es not have
enoug h depth (see Figure 4.34(a)–4.34(c)).
COMMENTING THE NETWORK
44. Highlight the 8 expressions that make up your new normal map network by mar-
quee selecting them (Left-click and drag around the ne twork)
45. Right-click on the selectio n on the graph canvas.
46. Click Create Com ment from Selection and name the selection Normal
Network. It is always good practice to keep your material expre ssions organized
by category. Your com ment sho uld look like Figure 4.35.
APPLYING MATERIALS IN THE DEMO ROOM
47. In the co ntent browser, lo ok for a folder called Props and open it.
48. In the Props folder look for an d find a mesh called SM_MatPreviewMesh_02
and drag it into the Display Item you have already placed in the Demo Room.
49. Rotate, scale , and position the mesh so that it faces ou twards from the Display
Item.
50. Alt-Drag the mesh to create two copied of it on the Display Item (see Fig-
ure 4.36). You can alternatively copy and paste the mesh in the editor on the
Display Item.
164 Game Development and Simulation with Unreal Technology
FIGURE 4.35: Normal Map Network is Commented.
51. In the Demo Room select the left mesh in the Demo Display you created in
step 48. Dr ag the Mat_Simple material to its Element 0 material slot.
52. In the Demo Room select the middle mesh in the Demo Display you cre ated
above. Drag the Mat_Simple_N ormal material to its Element 0 material slot.
53. In the Demo Room select th e right mesh in the Demo Display you created above.
Drag the Mat_En hanced_Normal material to its Element 0 material slot.
54. Build the lighting and play the level by pressing Alt+P or clicking on the
Player icon .
55. You material progressions should look like Figure 4.36.
56. Save all your materials and your level so far.
What Happened in TUTORIAL 4.2. . .
You just created your first material in Unreal E ngine 4. In the first step, you
opened (or created) a simple dem o environmen t to deploy the effect. Next, we
took so me simple steps to create the first basic material.
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.