Galaxy Shooter Framework Series / After Image Effect

Objective: Adding an after Image Effect.

While doing some research and letting my mind relax a little bit. I was thinking about different ways I could enhance enemy movement and add some challenge to the player. And it hit me.. even if I add new movement how would I surprise the player or even wow them when the enemy did something different. And it hit me. After Image EFFECT!!!

I was inspired by the effect while growing up and playing Street Fighter Alpha that I wanted to Implement it in my game. But first I had to mentally break down how to do it.

First: The effect basically creates a “Shadow” of an object at the current image or “frame” that it is at.

Second: The image is semi transparent and is used as a trail effect.

Third: It fades out over time.

Fourth: No we are not going to add an extra hit box or attack frame that will copy the players attack.

So with all that in place I got to work.

I started by creating an empty gameObject by taking my player sprite and adding it to the scene. I renamed the object PlayerAfterImage and also scaled the object to the current size of my player. Then I created a prefab out of it.

The idea was to set the sprite of the object to the current sprite of the player.

Next I created some float variables to keep track the afterImageLifeTime and the time between after images. The first float is used as a way to “Destroy” the object after a set time. And the second is used as a counter to balance how many AfterImages we create at any given time.

I first created a method called AfterImageEffect because the bulk of my code will be handled there.

In this method I cached a reference to the instantiated afterImage prefab in a SpriteRenderer variable and called it image. I set the image.sprite to the parent spriteRenderer.sprite. Set the image.color to a afterImage color variable. Set the afterImageCounter to the time between after images and Use the Destroy function to destroy the image game object and set the time to destroy itself to the after image lifetime variable. (looking at my code while writing this I can definitely see a way to refactor this lol).

Moving to my Thrusters method I had to amend the code by adding an “IF” condition to my switch statement.

Last I wanted to clamp the after image life time counter variable. So I used a mathf.clamp function to clamp it between 0 and 100f.

This is how the results came out. Happy Dev’ing.