About : Quick and simple introduction to the basic workings of the Material Editor plus explains how to build some of the most standard/widely used shaders.
Target Audience : Unreal Engine users - Very basic skill required
Platform : Unreal Engine 3
Last Update : September 2007
Related links : Material Tutorial 2
Material Tutorial 3
Water Tutorial 1 - Outdoor
Water Tutorial 2 - Indoor
Material Expressions
Introduction
This is a basic introduction to the material editor. It covers the basics and explains how to set up some of the most basic materials. The tutorial will explain what combination of expressions one must use to achieve basic environmental material needs such as an alpha operation, scaling, normal mapping, bloom strength, color modification and so on.
The material editor is the new version of what used to be all the different material windows in Unreal Engine 2. All different material windows are now combined in one big and relatively easy to use editor. The editor is Expression based, similar to Maya's Hypershade. Expression based means that you can place expressions that hold or transform information. The order you place the expressions in will alter the final result.
One of the most important basic things one must understand is that any texture you see in the game is a material and not just texture. Textures can not be assigned to geometry anymore if they are not first assigned to a material. Several other 3D programs take a similar approach, including 3DSMax.
Anyone who wishes to get into the material editor should also understand that math's play a large role in advanced material creation. You don't need to be a math genius if you ever want to become fluent in the material editor, after all I am not one myself either, but some basic understanding of the mathematical functionality is preferred. Please refer to my Material Expressions tutorial for a basic explanation.
The Basics
Lets go over the basics by importing a self-made custom texture/image. Just like in Unreal Engine 2, and almost any other game engine, any imported texture must have a valid resolution. Valid numbers are 1, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048, 4096. Textures can be rectangular. The standard filetype used for importing is TGA, but BMP and similar are also supported.
In the editor open up the Generic Browser (View - Browser Windows) and at the top menu select File -> Import -> select the texture and click OK to all other questions.
After you imported your texture it will show up as a red bordered asset in the Generic Browser. If it does not show up be sure to select "Show All Resource Types" at the top left of the Generic Browser, or refer to the log window (also to be found in the Generic Browser) for a clue why it refuses to accept the file.
A red border means a raw texture, green means a material. What you would wish to do is to turn the red texture into a green material.
In the top menu of the generic browser click New and in the next menu enter a package name, a group (group names are always optionally, leave blank if you have no desire for one), and the name of the material. Note that UED doesn't like spaces or other weird characters in package or asset names, and that unique names should always be preferred.
Next, in the Factory drop down menu, select Material.
The left area (b1) contains the preview cube/sphere/cylinder. The center (b2) is the actual working area where you will be making the connections between the different expressions and the right (b3) is the list of available expressions/expressions. The bottom area (b4) holds the properties of whatever expression selected.
While the material editor window is open select the original red bordered texture in the Generic Browser and then return back to the Material Editor. Next, in the right expression list select "TextureSample" and drag it onto the the middle of the material editor. It has now been placed and your original red squared basic texture has been automatically assigned to it.
Next, click on the little black square (black=RGB channels, red/green/blue=each RGB channel individually, white=alpha channel) on the left side of the TextureSample expression you just placed and drag it to Diffuse on the big End expression. If you did this correctly you now connected the texture to the diffuse input.
Don't forget to manually save the package the texture is in! Generic Browser's top menu -> Save
Also note, if a expression stays black it might have preview disabled. Click on the black/yellow square at the top left corner (left of the word TextureSample) of the expression to enable it. Yellow is enabled, black is disabled.
The Examples
Now all of that is very cool of course but pretty useless if you can't put the potential of this powerful material editor to use. Since examples and practice learn one a whole lot more than boring descriptions of what every expression does I am going to demonstrate how to set up some of the most basic materials.
Simple colors
The Constant Expressions (Constant/Constant1Vector/Constant2Vector/Constant3Vector/Constant4Vector) create simple solid colors. Colors are made by entering values in its properties.
Specularity and Normal Mapping
If you wish to add a normal or specularity map simply repeat the described steps. Make a TextureSample with your normal map and simply connect it to the Normal and/or Specularity input.
Parallax Mapping
Parallax Mapping is kind of similar to Displacement Mapping. It makes a 2D surface appear 3D by seemingly offsetting parts of the texture. Set up the materials as usual but connect an additional BumpOffset expression to the UV input of those textures you would want to offset, and connect a black and white image to the Height input of BumpOffset. The black and white image contains information for the engine on what areas to offset and which to leave untouched. Black is untouched, white is offsetted. While I used a very strange Height texture for the sake of clarity, a regular brick material would do best with near black cement and white bricks..
Please also note that the Height input of the BumpOffset can't handle a RGB input. You must use either the red, green, blue, or white output of the texture you wish to use.
Alpha maps and translucent materials
Want to make glass or some other kind of transparent surface? Place your textures as TextureSamples and connect them as shown on the example screenshot.
Because the material will be set to Unlit (as of the time being, the engine is unable to light translucent materials), so anything you'd normally connect to Diffuse must now be connected to Emissive. Also, in order to force it to be unlit and force alpha rendering the material must be set to BLEND_Translucent and MLM_Unlit.
Masked materials
While translucent materials cannot be lit, masked materials can. Masking should be preferred over Translucent for anything that doesn't necessarily require complex alphas. Plants and trees for example don't and should use Masked instead of Translucency.
Setting up Masking is roughly similar to setting up Translucency, but instead this time use the OpacityMask input and set BlendMode to BLEND_Masked.
Unlit materials
Making textures unlit (=not receiving any lighting - self illuminated - for example a lamp) is really easy. First of all you must connect a expression to the Emissive input on the End expression. Once that's done you can, optionally (increases performance), also set the End expression's LightingModel (in the properties at the bottom) to MLM_Unlit.
Scaling a texture
To scale a texture add a TextureCoordinate expression to the material editor and connect its single output with the UV input of the TextureSample expression. Once that's done select the TextureCoordinate again and in its properties change the number to alter the amount of tiling.
Creating a panning or rotating material
To make a material pan or rotate add either a Panner or Rotator. Or simply both! Connect them as shown in the example screenshot.
Edit the numbers in its properties its to control the speed.
Distortion
Creating a material that distorts what's behind (typical for water, glass, and fire) is easy. Set the material to Unlit and Translucent, as explained before, and connect a TextureSample to the Distortion input. Anything behind the material will be distorted. By connecting a Panner or Rotator, it is possible to animate the Distortion. In my example I multiplied the distortion texture to give it additional strength
Contrast Adjustments
There are various ways of altering the contrast of a texture but the easiest probably is to use Power. Add a Power node and a simple Constant node and connect them as shown. The Constant controls the Exponent, 1.00000 is regular contrast, anything lower will wash the texture out, anything higher will raise the contrast.
Adjusting the color of a texture
What if you really like to use a certain wood texture but unfortunately it's red while you want it to blue? Exporting it to modify its color outside the engine is often a bad idea as it will result in memory and filesize waste. Creating a material setup that modifies the color is usually the fastest way to tackle the problem.
Set up the material as shown below. The Constant connected to the Percent input of the Desaturation expression controls the amount of desaturation. 0.5 will make the result only 50 percent desaturated.
There are many more ways of altering the color of a texture. Adding a color on top or subtracting a color are other options, as is alpha blending.