The ability to add motion to your Materials is a must, especially when you try to recreate effects such as fire, water, or smoke. A very cheap and effective way to do this inside Unreal Engine 4 (UE4) is to use the Panner Material Expression node. The Panner Material Expression node allows you to move the UV coordinates of your Texture in either the U or V direction or in a combination of both.
What is Animating UV Coordinates
Animating UV Coordinates or UV Panning means to move a Texture's UV coordinates either horizontally(U), vertically(V), or a combination of both to give the illusion that complex animation is taking place. In the following example, the Fire Texture is being panned in the U (horizontally) direction, making the fire look like it is moving.
Panner Node Breakdown
Below is what the Panner node looks like after it has been added to the Material Graph. The Panner node takes in two inputs, Coordinates and Time, and outputs the result. You can add Panner Material Expression node to the Material Graph by searching for Panner in the Palette or by pressing the P key on the keyboard when the mouse is inside of the Material Graph window.
| Property | Description |
|---|---|
| Coordinate | Takes in base UV texture coordinates the expression can then modify. |
| Time | Takes in a value used to determine the current panning position. This is usually a Time expression to provide a constant panning effect, but a Constant or Scalar Parameter can be used as well to set a specific offset or to control the panning through Matinee or Blueprints. |
| Property | Description |
|---|---|
| Speed X | Speed to move in the texture coordinates in the horizontal or X direction. |
| Speed Y | Speed to move in the texture coordinates in the vertical or Y direction. |
| Const Coordinate | Only used if Coordinate is not hooked up. |
| Fractional Part | Output only the fractional part of the pan calculation for greater precision. Output is greater than or equal to 0 and less than 1. |
How to Use Animated UV Coordinates in your Material
Setting up a Texture to use UV Panning is something that can be accomplished in the few following steps.
This tutorial will make use of content that can be found if you included the Starter Content with your project. If you have not included the Starter Content in your project, you can look into the Migrating content page for information about how to move content between projects. This way you can add the Starter Content to your project and not have to make a new one.
-
First create a New Material in the Content Browser. To do this, use the mouse to Right-Click in the Content Browser and then select Material from the Create Basic Asset menu and then name it Panner_Material. When completed, you should have something that looks like this in the Content Browser.
-
With the Material now created, open it up by Double-Clicking on it with the Left Mouse Button inside the Content Browser. Once the Material is opened, go back to the Content Browser and click on the Game folder and then use the following search term, T_Fire_Tiled_D, to find the Fire Texture.
- Once the Fire Texture has been located, drag it from the Content Browser into the Material by first selecting it with the Left Mouse Button and then with the Left Mouse Button still held down, drag it into the Material. Once over the Material, release the Left Mouse Button to place the Texture in Material Graph.
-
With the texture now placed in the Material Graph, go to the Palette and search for Panner. Once you find the Panner Material Expression, select it with the Left Mouse Button and then drag it into the Material Graph. Once over the Material Graph, release the Left Mouse Button to place the Panner Material Expression in the Material Graph. Once completed, your Material Graph should look like this.
-
Now with all the required nodes added, it is now time to start connecting everything together. First plug the White Output of the Fire Texture into the Base Color input. Then connect the Output of the Panner to the UVs input on the Fire Texture. When completed, you should have something that looks like this.
-
With everything hooked up, it is now time to make the Fire Texture pan. To do this, first select the Panner Material Expression and then in the Details panel, set the Speed X parameter to 0.1.
- As soon as you set Speed X to 0.1, you should see the Fire Texture begin to move horizontally in the preview window.
- Now the Material is ready to be complied, saved, and used.
Tip & Tricks
Using panning in combination with other Material Expressions is a great way to add some extra control to how the panning will work. In the example below, the Material that was created above was taken one step further by adding controls to help control the speed but also the titling. By increasing the numbers that TexCoord and Time Material Expression are multiplied by, you can adjust the speed and titling of the Fire Texture.
You can also stack Panner Material Expression to make the illusion of movement even more complex. In this example, a copy of the all the original Material Expression nodes was created by first selecting all the Material Expression nodes and pressing CTRL + W on the keyboard. Then the Panning direction on the newly created nodes was changed from Speed X = 0.1 to Speed Y = 0.1 to make the image move vertically instead of horizontally. Next the values that were being multiplied by the Time and TexCoord where increased from 1 to 2. Finally both Textures where Multiplied together to give the end result below.
Conclusion
Animating UV Coordinates is a great way to introduce motion into your Materials. It is also extremely useful for visual effects that require complex motion like smoke or fire. However keep in mind that Animating UV Coordinates works best on objects that have contiguous UV setups. Any deviation in a meshes UV coordinates will show up when the UV Coordinates are animating.