• Register

Unreal Engine 3 is a complete game development framework for next-generation consoles and DirectX9-equipped PCs, providing the vast array of core technologies, content creation tools, and support infrastructure required by top game developers.

Report RSS Basic introduction to the UE3 Material Editor + basic examples

Basic introduction to the new material editor plus examples on how to set up some of the most common materials.

Posted by on - Basic Mapping/Technical

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.


After you've done that you should see the green bordered cube/sphere in the Generic Browser. Open the material editor by double clicking it...

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.


Does the huge list of available expressions scare you? Don't worry, environment wise you will only need a select set for most situations. The majority of these expressions will not be used a lot.

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.


You have now made a very basic material and the material is now ready to be assigned to a piece of geometry.

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.


There are four types of Constants. The first constant (Constant) only has a red channel and only allows one to make types of gray. The second type (Constant2Vector) has a red and green channel and allows one to make simple colors. The third constant (Constant3Vector) has all the RGB channels and allows one to make any color desired. And the fourth (Constant4Vector) has all the RGB colors plus an alpha channel.

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..


Note how all expressions affected by BumpOffset will become purple. 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 LightingMode (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 to control the speed.

Was this tutorial helpful for you? There are five more material tutorials available on my website, as well as several other UE3 tutorials. Hourences.com.

Post comment Comments
longshanksAOC
longshanksAOC

great tutorial, thanks alot

Reply Good karma Bad karma+1 vote
RichardL
RichardL

Thanks for your awesome tutorials :)

Reply Good karma Bad karma+1 vote
ambershee
ambershee

Curse you, I was just in the process of writing such a tutorial!

However, you've certainly got more of a knack for materials than I do - it's a good introduction :)

Reply Good karma Bad karma+1 vote
myles
myles

Nice tutorial, really good for begginers and for more advanced users,
thanks!

Reply Good karma Bad karma+1 vote
Orion
Orion

This is great! Just what I and another on my team was looking for!! Thanks a million! ;)

Reply Good karma Bad karma+1 vote
belzaran
belzaran

Great tutorial, very useful ! Thanks !

Reply Good karma Bad karma+1 vote
Rothschild
Rothschild

nice tutorial, to bad it doesnt work. :(

did everything as explained, et voila doesnt work;
I40.tinypic.com

i somehow get annoyed and very angry if i read tutorials that dont work.
it feels the same a buying expensive math book wich is full of errors and false answers.

Reply Good karma Bad karma+1 vote
PXDar
PXDar

good guide from what i followed

one question .. er bit n00bish

i cant seem to get the content browser up to chose a texture for my TextureSample

help plx ^^

ps be shushed rothschild no one likes a troll :P

Reply Good karma Bad karma+1 vote
Post a comment

Your comment will be anonymous unless you join the community. Or sign in with your social account: