Skip to main content

Create an Effect with Flipbook

In this tutorial, you will learn how to use the Flipbook feature to create an effect in the Visual Effects (VFX) Editor!

demo

Set Up Your VFX Environment​

After you've created a new project in Effect House, you will need to set up a VFX environment. You can utilize one of the two methods outlined below. For more information on the VFX Editor, check out the VFX Editor Overview.

Method 1​

method 1
  1. Go to the Hierarchy panel
  2. Click the Add object button [+]
  3. Go to Visual Effects
  4. Select Basic Particles

Method 2​

method 2
  1. Go to the Hierarchy panel
  2. Right click on the panel to view the menu popup window
  3. Navigate to Add object
  4. Go to Visual Effects
  5. Select Basic Particles

Once you've added the Basic Particles object, you will see the Visual Effect Graph. You should also notice white particles moving in the Preview panel.

tip

To see your changes immediately as you make them, enable the Auto Compile option by clicking the Auto Compile button. If this option is not enabled, you’ll need to manually click the Compile button after each update to view your changes.

vfx graph

Import a sprite sheet image​

In order to use the Flipbook feature, you will need a sprite sheet image. Download the following zip file to obtain the image:

↓ sprite_sheet.zip

vfx graph
  1. Go to the Assets panel
  2. Click the Add asset button [+]
  3. Go to Import
  4. Select From Computer
  5. Select the sprite sheet image to import into Effect House
vfx graph

Set up the Flipbook function​

The Flipbook function requires 3 block nodes.

  1. In the Update node:
    1. Add the Flipbook Player node and set Frame Rate: 20. This node will increase the texture index of those particles within a specified frame rate. The frame rate determines the number of textures played in one second; in this case, it would be 20 images per second.
  2. In the Output node:
    1. Remove the Set Main Texture node
    2. Add the Flipbook Blend node and replace the image with the sprite sheet imported earlier. This node will blend between the two closest frames for each particle.
    3. Add the Set Flipbook Size node and set x: 6, y: 6. The sprite sheet contains images in a 6x6 grid. By setting these properties, you can properly display one image at a time.
vfx graph

After making those changes, you will now see the animated Effect House logo instead of the default white, circular particles.

vfx graph

Add a floating effect​

By default, the particles spawn from the center of the screen, spread out, and disappear after 6 seconds. Make the following changes, to make it appear as if the particles are floating around the screen.

  1. In the Spawn node:
    1. Set Spawn Rate: 2,000, so that all 2,000 particles are spawned at the beginning of the effect.
  2. In the Init node:
    1. In the Capacity node, set Capacity: 2,000, which defines the maximum allowed particles in the simulation.
    2. Remove Set Random Velocity
    3. In the Set Lifetime node, set Lifetime: 6, so that the particles will disappear after 6 seconds.
    4. Add a Position: Box node and set Scale: (300, 300, 100)
      • This will maintain the particle's spawn location within a box shaped area.
      • Setting the scale to (300, 300, 100) creates an invisible, vertically aligned rectangular box where particles will be spawned within.
vfx graph
  1. In the Update node:
    1. Add an Add Turbulence node and set Scale: (3, 3, 3) and Drag: 2. This node will add a turbulent force on the particles, allowing each particle to move irregularly.
vfx graph

You now have an effect with the floating animated Effect House logo!

vfx graph

Completed Project File​

↓ vfx_flipbook_effect.zip

BONUS - More effects using Flipbook​

If you are interested in exploring more usages of Flipbook, check out the zip files below.

image-0
image-1

Hearts with Portrait Segmentation

Sparkles with color sampling