Creating an Explosion effect using VFX graph in Unity

In our last tutorials on VFX graph, we learned the basics of Unity VFX graph and how to create a portal using the inbuilt VFX system. In this tutorial, we are going to create an explosion effect and we will be using a Flipbook animation for this.

A Flipbook is nothing but a sprite sheet. Unity has provided us with multiple free sprite sheets for creating VFX effect. These images are under Creative common 0 license, so you are free to use them in commercial projects.

To follow along, go to Unity blog and download the Flipbooks (not the sequences) under Explosion 00. Extract the zip file and you will have 2 file formats, TGA and EXR. You can import any one of the files in to Unity.

Download explosion flipbook from Unity

Now let’s create a VFX graph that uses the flipbook or sprite sheet to create an explosion effect.

Creating a New VFX graph

Right click on the project window and navigate to Create>Visual Effects> Visual effect graph.

Rename the graph to explosion.

Add a Visual effect game object to your scene and assign the VFX graph to the Asset template parameter of the game object.

Creating a new VFX graph

Double click on the VFX graph to open the graph editor.

Delete all the content inside and press space, to search for an empty particle system.

Spawn Module Settings

Since we are going to use the sprites inside the flipbook and cycle through them one by one to create the explosion effect, we need to spawn only one particle every frame.

Add a Constant spawn Rate block to the spawn module and set the rate to 1.

We need to play the explosion effect once and do not want to loop it. So, select the Spawn module and go to the inspector window.

Set the loop duration and loop count to constant. Come back to the VFX graph editor and set loop duration to 1 and loop count to 0.

Blocks in Spawn module

Initialize Particle module

Under initialize particle module, we need to add a tex index block. This block tells Unity VFX graph, that we are going to use the texture from a sprite sheet.

Blocks in Initialize Particle module

Update Particle Module

The tex index block will spawn the same sprite every frame. To circle through all the sprites inside the sprite sheet, we will use a block called Flipbook Player.

Add the block and set the mode to Constant and the Frame Rate to 25.

Blocks in Update particle module.

Output Particle Quad Module

Set the Uv Mode to Flipbook and the Flipbook layout to Texture 2D.

Under Flip book size set the number of images in the X and Y axis. In our case, the Flipbook has 5 images horizontally and 5 images vertically. So, let’s set the size to 5×5.

Assign the flipbook that we imported earlier to the Main texture.

Add an Orient : Face Camera Position block to make the effect face the camera always. Now you should have a cool explosion effect on your scene.

Blocks in Quad particle output module.

You can use Set size, Color over lifetime blocks to change the scale and color of the explosion.

You can also use a force block to move the effect vertically with explosion.

That’s it, you have created a cool looking explosion effect using Flipbook and VFX graph. Here is how the final effect looks like.

Final explosion effect

If you have any other questions, feel free to leave them in the comment box below.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.