UE4 – Animated texture using a Flip-Book node

Software:
Unreal Engine 4.18

AAA.gif

A ‘Flip Book’ node in UE4 is the way to create an animated texture using a Sprite-Sheet.
Its very simple to use:

  1. Import a Sprite Sheet texture containing the animation frames.
  2. In the UE4 Material, Create a Texture Object node, and set it’s Texture property to be the Sprite Sheet texture you imported.
  3. Create a Flip Book node and connect the Texture Object Node to its  Texture input.
  4. Connect numeric value constants to the Flip Book node’s Number of Rows and Number of Columns inputs to set the layout of the Sprite Sheet.
  5. Connect the outputs of the Flip Book node to the wanted material inputs.

Runner_Atlas

Untitled-1

The following example shows a way to create a custom Flip Book material to animate textures.
Q: Why would you do that???
A:
Well the truth is I created it without knowing there is a built-in option, and found out about the Flip Book node right after I finished my own.. 😀
But it’s also a useful example of locating tile coordinates within a plane..

Untitled-2.jpg

 

 

Sprite Sheet – Storing animation frames in one texture

Runner_Atlas

An efficient way to store 2D animation for games is to layout all the frames withing one texture called a ‘Sprite Sheet’ or ‘Texture Atlas’.
This saves resources by avoiding multiple texture loading operations and only animating the UVs of the shader to display the needed image at each frame.
Sprite Sheets are also used to pack various states of game graphics and textures for multiple objects in one file.

Creating Sprite-Sheets:
Sprite Sheets can be created manually using any image editing software,
For an automated process and more control, a specialized software like Texture Packer can be used.
And it can also be done automatically in Adobe Animate (Flash).
* There are many more solutions / scripts that will do that you can find on the web…

Creating a Sprite Sheet in Animate

Software:
Animate CC 18

To generate a Sprite Sheet (Texture Atlas) in Animate:

  1. Create a new project.
    * the type of the project doesn’t matter.
  2. Drag all your animation frames from into the Library window in Animate.
  3. Select all the frames in the Library window.
  4. RMB Click the selected frames and choose Generate Sprite Sheet.
  5. In the Generate Sprite Sheet window, set the Sprite Sheet settings, output path and press Export.

Untitled-1.jpg

Untitled-2

Untitled-3

Runner_Atlas