How to Design and Animate a Fireball VFX in Unreal Engine 5

Introduction

I'm VoidFX, a 19-year-old Real-Time VFX Artist using Unreal Engine 5 Niagara particle system. I like the idea of cool visual effects that are used in games, so because of that reason, I started doing VFX almost a year ago (when I was eighteen). There is still a lot for me to learn, and I hope to get better and achieve the coolest ideas that are in my head.

As of now, I have mainly focused on making projectiles, energy beams, orbs, etc., but not a VFX attached to a character animation, which I hope to tackle soon. I have not contributed to many projects yet, but I'm looking forward to working on any new projects!

The key points of this article are as follows:

• Why did I choose Unreal Engine 5?
• How the fireball idea began.
• Real-time VFX in Unreal Engine 5.
• Breakdown of the fireball projectile.
• Advice for new real-time VFX Artists.
• Where to find me and my socials.

Well, the fact is, I didn't choose Unreal Engine. I didn't know about many game engines at the time I got interested in VFX. I just knew of Unreal Engine, so I bought a course for it on Udemy. I ended up taking it all, however, after completing it, I realized that UE5 was the better option to invest in, as many game studios are shifting to use Unreal Engine 5, so it seemed to be very beneficial. And I kept on investing in learning it further.

Fireball Idea

Just after completing the course, I wanted to continue my learning, so I tried doing some R&D and made my first VFX, and kept investing in my learning. Later on, I wanted to make something more, which resulted in the fireball projectile effect, which was my very own design.

A few days after its completion, I thought this effect looked cool, and I made some variations of it. One as a dark fireball and the other as a sort of iceball. It took me 5 days for the original fireball, while for the variations it took 2 days, so about a week in total.

Real-time VFX in Unreal Engine mainly comprises the following:

1. Niagara particle simulation using different types of modules.
2. Shader/material animations combined with Niagara particle.
3. Making logics and combining different Niagara systems using Blueprints.

Particle simulation consists mainly of emitting sprites, meshes, or ribbon particles in one or more emitters with different modules such as forces, velocity, shape locations, etc. An example of this would be sparks in my fireball projectile:

Material Animation

Material animations, also known as shader animations in other game engines, are an animation achieved by panning different textures and masking techniques to achieve a desired art style. Here's an example from one of my VFX:

This example consists of a Niagara System spawning sprite and mesh particles with material animations applied to each particle, as shown in the example.

In Unreal Engine 5, Blueprints are a visual scripting system that lets you create gameplay logic, interactions, and systems without writing code in C++. Blueprints can also be used to make logic for the VFX in Unreal Engine 5, such as for sword trails that are connected to a character animation.

It can also be used to shoot off projectiles and make advanced logics for Niagara Systems, for example, using variables. Here's an example of my projectile shooter VFX made with Blueprints logic:

In this example, I'm shooting off a projectile using Blueprint logics such as Projectile Speed, Spawn Location, and the Death of Niagara Systems. There are 3 Niagara systems combined here, as shown in the example. First for the initial burst, second for the main fireball, and third for the impact when the projectile collides.

My fireball projectile mainly consists of a rock, a rock shell, a fireball main shell, fire emission, some sparks, and a material animation designed to be applied to different Niagara Particles. For breaking it down, I'll take my original fireball:

Fireball Animation

Let's go over the material animation first, as the material I made was intended to be a master material and was used in all of the meshes of the fireball projectile by just tweaking some parameters. So for this material, I used the techniques I learned from the Udemy course I mentioned earlier. Here's an overview of the nodes I used:

In this material, I'm using the unlit shading model and additive blend mode. As you can see that the nodes are divided into 4 groups:

• Distortion: In the distortion group, I'm applying a noise texture for the main texture UV socket to give it a distorted look.
• Dissolve: For the dissolve group, I'm using another noise texture, which is plugged into the opacity socket in the final output group to make a mask of that noise, which makes the animation interesting by removing the main texture from the black parts of the noise.
• Main Texture: For the main texture group, I'm applying a fire texture and adding the distortion output in the UV to distort it, as I mentioned earlier.
• Final Output: Lastly, in the final output, everything is plugged into their desired sockets and multiplied with a particle color node to make the material's color and alpha editable in the Niagara System. Later on, the main textures's plugged into the emissive color, and dissolution is plugged into the opacity socket alongside a Diamond Gradient mask and a Depth Fade node to hide seams.

For the fireball rock, I downloaded a free Rock mesh from Sketchfab (though using a sphere mesh in this case won't make much of a difference and is recommended because of its lower vertex count and easier UVs setup), and for its shell, I duplicated the Rock Mesh emitter in the Niagara System and applied material animation on it. Here's a visual representation:

Using this rock wasn't the best option in my opinion because I had no idea about the correct UVs at that time, as this was my second VFX. One issue you may notice here is that the material is being cut in the center of the rock shell due to the incorrect UVs, which is not ideal.

A better route that could be taken here is using a sphere mesh instead of this rock one, the difference won't be very noticeable, and it would be better as it's easier to set up a UV for a sphere due to its less complex shape. Here's a brief overview of the emitters used for the rock and its shell in the Niagara system:

The emitters used here have a basic setup. I used a SimpleSpriteBurst preset for the emitter, deleted the scale and color settings, and changed the emitter loop to infinite, so the particles never seem to die until they're overwritten by a logic that says otherwise. Next, I deleted the sprite renderer to add a mesh renderer for the rock mesh.

You may notice that there is an updated mesh orientation module in the rock mesh emitter, which was added for my intention to make the mesh keep rotating in a loop, but in the fireball VFX, it's not very noticeable.

After that, I duplicated the emitter, deleted the mesh orientation module, and changed the rock's mesh material in the duplicated emitter to the material animation. For this material animation, I made a material instance of the main material shown earlier and tweaked its pan and some settings by using the scalar parameters shown in the material nodes graph previously.

Fireball Main Shell

For the fireball main shell, I used a mesh that I made in Blender, keeping my purpose in mind. Here's a visual representation:

Here, I added a default cube mesh, tweaked the vertices a bit, and added a subdivision surface module to have the desired look. While it visually looks very good, this wasn't the best way of making a mesh for this purpose, the UVs of this mesh were not ideal.

Due to that reason, I faced an issue that the material animation was only visible on one side of the mesh, and I duplicated the mesh emitter and changed its orientation to my desire to make the material animation visible on both sides, which is alright, but not the best way to achieve such an effect, as it doesn't give you much flexibility. Here's a visual representation of the issue I faced and the Niagara system emitters I used:

These emitters have the same setup as the rock shell emitter discussed earlier. The only difference is that the "MainShell_02" shown here has a mesh orientation module in the initial particle stage to rotate the mesh to the other side.

For the main shell's material, I made 2 instances of the main material for both of the emitters shown here to have more control over the pan of the textures on both sides of the shell. And to hide the seams, I used the Diamond Gradient mask shown in the material nodes graph earlier.

This technique gives a soft look around the edges of a mesh to hide the seam, which makes the shell visually more appealing.

Fire Emission

This was a fairly easier part for me as compared to the material animation and the meshes. Unlike the meshes, the heavy work for this part was done in the Niagara system using particle simulation.

So for the fire emission, I used a fire SubUV texture, which I downloaded from the Unreal Engine's marketplace as a free asset. I made a simple material for this texture in which I multiplied the Alpha and the RGB channels of the texture to change the opacity and the color of this material in the Niagara system.

I'm using the same shading model and blend mode (unlit and additive) as the main material used for the meshes. Also, I used a Depth Fade node in the opacity so that the fire emission has soft edges when it comes in contact with a mesh.

For the Niagara system emitter, I used a SimpleSpriteBurst emitter preset, added the fire emission material made earlier in the Sprite Renderer Material Socket, and changed the sub image size to 8 by 6, as the fire texture had 8 frames in the first row and 6 frames in the first column, which makes an 8 by 6 texture. And to actually animate the SubUV texture material, I added a SubUVAnimation module.

As for the emitter setup, I tweaked some values in the few existing modules of the SimpleSpriteBurst emitter preset and added some more modules to achieve the desired effect. Here are the modules, tweaked or added in the emitter:

• Emitter State: In this module, I just changed the emitter loop to infinite, just like the mesh emitters shown earlier.
• Spawn Rate: I deleted the SpawnBurstInstantaneous and added a Spawn Rate Module for the particle to spawn per second, and added a random range for randomness.
• Initialize Particle: In the initialize particle module, I changed the lifetime, SpriteSize, and the rotation mode of the sprite particles to random to add even more randomness, and also increased the glow of the particle color to a value of 8.0.
• Add Velocity: I added the Velocity module to give the particles some velocity on the opposite side of the Rock to achieve a Fire trail effect.
• Shape Location: This was another module added to the emitter. Here, I selected a sphere as the shape primitive to control the width of the flame emission.
• Scale Sprite Size: This module was added to add more details to the flame emission. I added a curve to give the particles a smaller size on the spawn & death, and a bigger size in the middle of the lifetime.
• Scale Color: Lastly, in this emitter, I just tweaked the alpha curve to make the particles spawn fading in and die fading out, to give them a smooth animation.

Fireball Sparks

This part was very similar to the fire emission. Both of the emitters were added as SimpleSpriteBurst emitter presets, and the same as before, their emitter loop was changed to infinite. The main difference was that there was no custom material created for this part. The Default Sprite Material given in Unreal Engine was sufficient in this case.

Similar to the fire emission, not most but all of the work for the fireball sparks was done in the Niagara System emitters. I used two emitters for the sparks setup. One is named Front Sparks, and the other is named Spark Trail.

The emitter's setup for the spark trail is very similar to the fire emission emitter we discussed earlier. The key modules used in this emitter are the same as the fire emission emitter, just some values were tweaked to achieve a better sense of the sparks.

The only main differences of this emitter are: the sprite size mode uses random non-uniform, unlike random uniform in the previous emitter. Curl noise force is added to give the particles random motion. And there is no scale sprite size module, as the simulation already looked good enough, so there was no need for it.

For the front sparks, the emitter was also very similar to the previous one. The major differences of this emitter are that the particles had a much smaller life span, and the curl noise force was increased to give it more random motion. Here's a brief overview of the Niagara System emitters:

As mentioned before, I created two variations of this VFX later on. One as the dark fireball and the other as a sort of iceball.

• Dark Fireball: This variation was a type of dark elemental magic. For this, I just changed the fire emission color to black and the other emitters to a purplish color. And made sure that the main fireball shell was rendered above the black flame.

• Iceball/Frozen Fireball: In this variation, I changed the color scheme to a light bluish color, increased the width of the flame and the fireball's main shell. And decreased the velocity a bit to give it an icy look.

Conclusion

I love creating VFX, and sharing this breakdown is my way of giving back to the community that inspired me. If even one part of this workflow helps another artist improve or try something new, then this project was worth it.  I look forward to continuing to contribute more effects and breakdowns in the future.

My advice for a new real-time VFX Artist is this: Real-time VFX is all about creativity and the R&D (Research and Development) done to achieve your ideas. Just make it first, you can make it better later.

If sometimes you can't achieve something, don't beat yourself over it. Just take a break, relax, and return. I'm sure you'll be better than before. If you're a beginner or have specific questions about this effect or workflow, feel free to reach out. I'm happy to share tips and guidance for serious learners.

Feel free to DM me on my Instagram or email. Here are some of my social appearances and contact info:

• Instagram
• Email
• YouTube
• Reddit

Void FX, VFX Artist

Interview conducted by Gloria Levine