Flipbook tutorial

What is the flipbook visual effect?

Flipbook is a technique used to play a sequence of images (frames) quickly one after another, to create the appearance of motion, like an old school paper flipbook animation.

In VFX, this usually means a single texture sheet (called a flipbook texture or sprite sheet) that contains multiple frames of an animation arranged in a grid. For example, a fire animation might have eight rows and eight columns, creating 64 frames in total.

When the particle system or material cycles through these frames over time, it looks like a smooth, animated effect—such as fire, smoke, explosions, or magic glows—without requiring complex 3D simulations. The flipbook VFX tutorial is also available in video format below, where we create a campfire.

Hology Engine VFX Tutorial 3 - Create Fire with FlipbookYouTube

Import flipbook texture file

Drag and drop your flipbook texture (eg. PNG file) directly into the Hology Engine asset browser.

You may use our example campfire texture from our video tutorial: Click Here

Create a new visual effect material

1. In the asset browser, select → Add New → select Visual Effect.

1. Name it using your preferred convention, e.g., FX_Stylized_Fire (from video tutorial).

2. Click the Create button, and you will enter the VFX editor in a new tab.

Add and set up an emitter in the VFX editor

1. In the VFX editor, click Add Emitter (top-right corner).

1. Name the emitter (for example, Fire).

2. Set Loop to Continuous.

3. Leave Time empty (do NOT enter 0).

4. Scroll down to the Output section.

5. Next to Texture, click the empty slot and select your imported flipbook texture.

Enable the flipbook animation

1. Under the Output section, find the Flipbook category, and select YES

2. Underneath the Flipbook category, enter the correct layout for your texture. For example:

• Columns: 8

• Rows: 8 (This corresponds to a total of 64 frames.)

1. Press Play to preview the animation.

Adjust the scale

This is an optional step specifically for using our example texture campfire

1. Go to the Initializers section, press the + button on the right, and select Scale.

2. Increase the scale to your desired value (e.g., 10) so the effect is properly visible.

Correct the color channel

This is an optional step, specifically for using our example texture campfire.

Go to the Output Section, find the Opacity Channel category, and change it from Alpha to Red to match the intended color behavior.

Fix looping and playback speed

This is an optional step, specifically for using our example texture campfire.

1. Go to the Initializer Section, under Lifetime, adjust the duration value slightly to prevent clipping.

2. Change the total time from 1.0 seconds to approximately 1.066 seconds.

3. Press Play again to confirm it loops smoothly.

Adjust the spawn position height

This is an optional step, specifically for using our example texture campfire.

1. Go to the Initializers Section, press the + button, and select Position Point

2. Increase the height value to raise the effect above the grid (e.g., 3.5).

Save your effect

1. Press Ctrl + S to save your visual effect.

2. This step ensures the flipbook will appear properly in the asset browser.

Place the effect in the scene

1. Drag the saved VFX from the asset browser into the scene.

2. You now have a looping, stylized fire created with a flipbook in Hology Engine.