Animated Texture using Flipbook Node

In this tutorial, I’ll explain how to create an animated texture first inside of Adobe After Effects CC, and then how to import and set-up the Material inside UE4 using the Flipbook node.

Creating the Animated Texture

Let’s begin by creating an animated texture inside Adobe After Effects CC. In this example I’m creating ‘wind lines’, an animated stroke across a spline.

Start with an empty composition and select the pen tool. Set the fill to empty and the stroke colour to your chosen line colour. Using the pen tool, draw the path you want the line to animate along.

windline01

Open up the stroke options inside the shape layer the path has created. Set the line cap to ‘round cap’ and the line join to ‘round join’. Then hit the Add → key next to the contents drop down menu on the shape layer and select ‘Trim Paths’.

windlines02

This will add another sub-menu under the contents tab. To animate the line drawing, the start and end percentages can be key framed for the desired effect. Render out the frames using the following settings.

windlines03

Making the Sprite Sheet

Import the exported .pngs into photoshop using the ‘Load files into Stack’ script
windlines04
Click on browse and select all the files you’ve just exported. Wait until the script has loaded in all the files.

To help with sprite sheet creation, I’ve written a Javascript file that will stack the sprite sheet for you, called ‘stackTilesFlipbook‘. To use, simply download and place somewhere memorable. In Photoshop go to File – Scripts – Browse and navigate to the file location. If you can’t see the script make sure the ‘type’ box (under file name) is set to .js.

When running the custom script ‘stackTilesFlipbook’, make sure no layers are empty, otherwise you will get a error message. If there are blank layers, scribble in a bright colour and remove after the script has run. Also do not use Photoshop while the script is running, otherwise the script will be cancelled. If you wish to cancel the script at any point, hits ‘Esc’ on your keyboard.

When run the script will ask you how many rows and columns you desire in the sprite sheet. For example if you had 38 layers, you could put in 7 rows and 6 columns (giving you space for 42 layers). Remember what the layout is, as you need to know how many rows and columns there are when you set up the Material.

windLines256

You should end up with something laid out like the above image. Save out the texture as .png

Creating the Material in UE4

windlines05

Import the .png into UE4.

First set the Blend Mode to Translucent. Then create a TextureSample Parameter2D node and assign the texture to it. Remember to connect the alpha output to the opacity node. Then create a Flipbook node, and attach the UV output to the Param2D UV input. Use a numeric parameter to assign how many rows and columns are in the sprite sheet.

windlines06

If you find the animation to be played to fast or to slow, the playback speed can be adjusted through multiplying the time node by a constant. 0.5 slows the animation by half, 2 doubles the speed.

Remember to set the Material to double-sided!