Firecracker Teemo Alternative Recall Animation (2025)
Made Using: Unreal Engine 5: Niagara, Blueprints, Shader Graph

Goal

The aim of this project was to explore the use of fireworks as a character-driven visual effect. My inspiration stemmed from the recent firework event in Infinity Nikki, which left a strong impression on me. During the conceptual phase, I envisioned an alternative recall animation for Firecracker Teemo. For reference, here is the original: Firecracker Teemo (2024 ASU) Skin Spotlight – League of Legends.

In the current recall animation, the primary visual emphasis is placed on the coin. In contrast, I wanted to reimagine the sequence with a stronger focus on fireworks, aligning more closely with the celebratory theme of League of Legends’ Firecracker skin line. I was also drawn to the fact that recall animations in League are precisely eight seconds long, providing a clear time constraint and defined scope for the project.

I created 11 different Niagara systems, 3 blueprints, and 8 materials (including material instances) for this project. The Niagara systems include all of the fireworks, the anticipation glow, the coin ribbon/trail, and the two dust clouds. Due to the use of the sequencer, each of these elements’ timings can be readjusted and fine-tuned to the artist’s/animator’s liking.

Breakdown of all the elements in this piece

Niagara elements

  1. Classic Firework (x1)

This effect consists of 4 parts: the rocket, the rocket trail, the flower, and the flower trail. Each of these parts make use of the Generate Location Event, Generate Death Event, Receive Location Event, and/or Receive Death Event so that they spawn in a cause & effect manner. When the rocket dies, it spawns 50 new particles that have a velocity module applied to create the flower. The rocket trail follows the rocket’s location event and the flower trail follows the flower’s location event.

User Parameters available to the user.

2. Spiral Fireworks (x3)

This system has 5 parts: rocket, rocket trail, rocket sparks, rocket explosion (the flower), and the flower trail. I wanted the rocket to move in a spiral shape before exploding into the firework. To do that, I used a mixture of Rotate Around Point and Point Attraction Force. The Rotate Around Point on its own was limiting because it made the ‘spring’ too short and tight. Using the Point Attraction Force allowed me to manipulate the spring’s shape making it easy to adjust the rocket’s height. The rocket trail and sparks follow the rocket’s location. I applied a Jitter to the sparks to make them move constantly. Lastly, the flower is a repetition of the Classic Firework’s flower set up.

User Parameters available to the user.

3. Brocade Firework (x1)

This firework distinguishing feature is that it has two colors (red and green here). Once the red flower has cooled down, the green points have a second, chain explosion. Since this one is the biggest and more showy firework, I left it for the end of the animation as the ‘finale’.

User Parameters available to the user.

4. Dissolve Sparks

These are small fireworks that appear on Teemo’s mesh as he disappears at the end of the recall. I created this effect using a Scratch Pad module:

This module attaches particles to a skeletal mesh’s surface then randomly distributes particles across the mesh using world-space triangle data. It also allows for offsetting and scaling adjustments as user parameters. The particle points that the Scratch Pad module generates determines the firework flower’s location.

5. Dust Cloud (x2)

I created two different dust clouds - both are very similar. One (left image) is for the pillow/Teemo returning to the ground and the other (right image) is for the staff hitting the ground. There were simple, 1 emitter systems that used a torus shape location and point attraction force to create the shape. I also used a scale color module to make its alpha disappear over time on a curve.

6. Anticipation Glow

This is a simple pulsing particle that holds an emissive material, one of the 5 materials I created for this project. It is attached to a socket I created on Teemo’s skeleton. This way, it follows the staff’s movements.

7. Coin Trail

A simple ribbon renderer system that is attached to a socket on the coin. It has a user parameter to change the trail’s color.

8. Recall Circle (Simplified Version)

The recall circle includes an emissive material with a simple circle shape as a texture. This is the material (broken into 2 instances) responsible for the outer circle, inner circles, and the moving rings. This effect is broken down into 7 parts: the outer circle, inner circles, ‘echo’ circles, tunnel/beam, floating beams, floating particles, and moving rings.

Blueprints

  1. Easy Scale

All of the fireworks have a blueprint assigned to them called ‘Easy Scale’. This blueprint makes it easy for me/the user to rescale the effect in local scale without breaking the overall Niagara effect because it keeps the ratio between the ribbon width and sprite size fixed:

This was especially useful to me because I created the fireworks before deciding on my project scope/idea. When it came down to rescaling the fireworks in relation to Teemo, my Niagara systems did not scale correctly.

2. Dissolve

To achieve the control I wanted in making Teemo dissolve, I wanted to be able to use a separate mesh (in this case, a sphere), that I could move/rescale as I needed. So I created a blueprint that uses the object’s (that is assigned the correct material) absolute world position, location, and bounds, updated at every tick and stored in a Material Parameter Collection, hence allowing for real-time effects. That data is then used in the material (M_DissolveSparkle) to create a falloff effect and emissive glow around the edges of the shape. I created material instances for each of the 4 textures used in Teemo’s mesh, making them all disappear when interacted with the sphere. For each of the material instances, the user is able to adjust parameters like BaseColor Texture, UV/TextureCoord params, the dissolve bias, bounds, edge falloff, power, and color.

Dissolve Blueprint

The shader work responsible for the effect.

The User Parameters available.

3. Recall/Level Blueprint

In order to imitate LoL’s recall keyboard input (B) to trigger the recall animation, I edited the Level Blueprint to play the animation sequence when the B key is pressed. Once it is over, it will reset the animation to frame 0.