Unreal Engine 4 Materials Tutorial

Creating Material Parameters

Go back to the material editor and make sure you are still in the M_Banana material.

First, you need a node that will change the hue of a texture. You can use the HueShift node for this. Add one to your graph and link it like so:

[spoiler title=”Forgot how to do this?”]

Creating a Material Instance

[/spoiler]

Next, you need to create a Scalar Parameter node. This node holds a single value and will be editable in the material instance. You can create one quickly by holding the S key and left-clicking an empty space in the graph. Once created, connect it to the Hue Shift Percentage (S) pin on the HueShift node.

It’s also a good idea to name your parameters. Select the Scalar Parameter node and then go to the Details panel. Change the Parameter Name to HueShiftPercentage.

You can also convert Constant nodes to Scalar Parameters. Right-click the Constant node you added earlier, and then select Convert to Parameter. Afterwards, rename the parameter to Brightness.

You have now finished parameterizing the base material. Click Apply and then close the material editor.

Next, you will create a material instance.

Go to the Content Browser and make sure you are in the Materials folder. Right-click on M_Banana and select Create Material Instance. Rename the new asset to MI_Banana_Green.

Double-click on MI_Banana_Green to open it. This will open it in the material instance editor.

The material instance editor is composed of three panels:

• Break the connection between the Multiply node and the M_Banana node by holding the Alt key and left-clicking on the wire.
• Right click a blank space in the blueprint, search for the HueShift node, and select it.
• Connect the wires as shown in the diagram above.

1. Details: This is where your parameters and other general settings will appear
2. Instance Parents: Displays a list of the current instance’s parent materials. In this case, the only parent is M_Banana
3. Viewport: Contains a preview mesh that will display your material instance. Rotate the camera by holding left-click and moving your mouse. Zoom by scrolling your mouse wheel.

To see the changes on the banana mesh instead, go to the Details panel and locate the Previewing section. Left-click the drop-down next to Preview Mesh and select SM_Banana. You will now see the banana mesh instead of the sphere.

Next, you will edit the parameters to adjust the banana’s color to green. To make the parameters editable, left-click the checkbox next to each parameter.

Set Brightness to 0.5 and set HueShiftPercentage to 0.2. You will end up with this:

Now that you have created your material instance, it’s time to apply it to some bananas! Close the material instance and go to the Viewport in the main editor.

Applying the Material Instance

Actors that you place into the scene can be individually edited. This means if you change the material for one banana, it won’t affect the others. You can use this behavior to change some of the bananas to green.

Select any banana and then go to the Details panel. In the component list, select the StaticMesh component.

The Details panel will update with the properties of the StaticMesh component. Change the material to MI_Banana_Green.

Repeat this process a few more times to get a better distribution of yellow and green bananas. See if you can create another material instance to make some purple bananas as well!

A Dynamically Changing Material

Materials don’t have to be entirely cosmetic; you can use them to aid in game design as well. Next, you will learn how to dynamically change the color of the cube from white to red as the player collects more bananas.

Before you create the material instance, you will need to setup the cube material.

Make sure you are in the Materials folder and then double-click on M_Cube to open it.

First, you need a way to create colors. You will see a Constant3Vector node connected to the Base Color. These nodes are perfect for picking colors because they have a red, green and blue channel.

Since the red color has already been created, you will create the white color. Add another Constant3Vector node. You can do this quickly by holding the 3 key and left-clicking an empty space in the graph.

Bring up the color picker by double-clicking on the Constant3Vector node.

Set the color to white by either using the sliders or by entering a value of 1.0 into the R, G and B channels. Afterwards, press the OK button.

To change the color from white to red, you need a way to smoothly transition between them. An easy way to do this is to use linear interpolation.

What is Linear Interpolation?

Linear interpolation is a way to find the values between A and B. For example, you can use linear interpolation to find a value that is halfway between 100 and 200.

Linear interpolation becomes even more powerful when you control the alpha. You can think of the alpha as the percentage between A and B. An alpha of 0 will return A while an alpha of 1 will return B.

For example, you can increase the alpha over time to smoothly move an object from point A to point B.

In this tutorial, you will control the alpha by using the amount of bananas collected.

Using the LinearInterpolate node

First, add a LinearInterpolate node. You can do this quickly by holding the L key and left-clicking an empty space in the graph.

Next, create a Scalar Parameter node and name it ColorAlpha. Afterwards, connect your nodes like so (notice how white is now at the top):

Summary: the LinearInterpolate node will output the value of the A input. This is because the initial value of the alpha is 0. As the alpha approaches 1, the output will approach the value of the B input.

The material is now complete. There’s more to do, but to see where you’re at so far, click Apply and then close the material editor. If you press Play, you will see that the cube is now white instead of red.

To make the cube change colors, you need to edit the ColorAlpha parameter. However, there is one problem. You cannot edit parameters on a material instance while the game is running. The solution is to use a dynamic material instance.