Geek Culture
Published in

Geek Culture

Creating Enemy Explosions

Take them out in style

What is better than exterminating your enemy? to watch them explode upon elimination.

Special Effects give a game that special eye-candy that many desire. Here, we are going to make our enemies explode in a ball of fire when they get destroyed.

To attach the sprite animation of the explosion to our enemy, we must first select our Enemy prefab and open the prefab.

Open Enemy Prefab

Now we will create a new Animation called Enemy_Destroyed_Anim. Find the Enemy_Explode_Sequence in the Assets.

In the Animation window, Create a new Animation. Select the Animations folder, and name it Enemy_Destroyed_anim.

Creating new animation

We now select the record button in the Animation window, select the entire sprite sequence of the explosion, and drag it onto the Animator. Hit Play to see the animation, and then the record button once again to stop recording.

Importing animation sprites

We don’t want this sequence to loop, since the Enemy object is destroyed after the explosion. So, in the Animations folder in our Project window, select the Enemy_Destroyed_anim and in the Inspector, deselect Loop Time.

Stop animation from looping

If we play our game, we notice that our enemies are exploding as soon as they are being spawned. This is because the animation we just created is being played right from the start.

To see what is going on, we must open the Animator View of our Animation. In the Animations folder of our Project, double-click on the Enemy controler (above the Enemy_Destroyed_anim).

Opening the Enemy Destroyed Controler panel

We can see that the Animation object is orange, meaning that it is played automatically.

In order to prevent this from happening, we have to place an Empty State object between the Entry and the Enemy_Destroyed_anim object.

Right-click on the Base Layer canvas and select Create State > Empty. Rename it to Empty.

Creating an Empty state object

We now need the Entry object to point at our Empty object and not the Enemy_Destroyed_anim object.

Right-click on the Empty object and choose Select as Layer Default State.

Now, the arrow is pointing at the new Empty object(now orange) instead of the Enemy_Destroyed_anim abject (now gray).

To continue with the flow of things, we now need to connect our Empty object to the Enemy_Destroyed_anim object. Otherwise it will never play.

Right-click on the Empty object and select Make Transition, then select the Enemy_Destroyed_anim button.

There is now a connection between these two objects.

If we play the game, we notice we are right back to the Enemy being destroyed upon entry, just with a slight delay. The delay is due to the fact that the Empty object is being played first.

In order to control when the animation is played, there are two things we need to do.

  1. Create a Parameter set to Trigger
  2. Use code to control when the Trigger is activated.

In the Animator panel, select Parameters. Here, there is a + button with a downarrow. If you select the down, we see that we can create four types of parameters: float, int, bool and trigger.

We need to create a Trigger parameter in order to activate the animation.

Select Parameters, Trigger from the dropdown list, rename it to OnEnemyDeath.

Creating a Trigger parameter

We now need to add this parameter to the conditions of the transition between the Empty and Enemy_Destroyed_anim objects.

Select the transition between these two objects (the arrow itself), and notice that in the Inspector window, it has a Conditions section. Selct the + key and from the dropdown list, select OnEnemyDeath.

Now, we need to be able to activate this trigger through code.

This code will be placed in the Enemy script, as it is the Enemy that is going to explode in a big ball of fire.

Open the Enemy.cs script and add a new variable of type Animator.

In the Start() method, we need to assign the component to _anim.

We will want to trigger the OnEnemyDeath animation in the OnTriggerEnter2D method, which is where the Enemy object is destroyed if hit by either a laser or player object.

Just before we destroy the Enemy object, insert the code to Trigger the animation.

If we run this, we notice that the animation isn’t played upon enemy death. This is because the Enemy object is being Destroyed too fast, not letting the animation play.

This can be remedied by adding a delay to the destruction of the Enemy object. This delay is placed after the Destroy(this.gameObject) using a “,” as a separator.

Delaying the Destruction of an object

The value of 2.8f is about the length of time it takes to play the animation of the explosion.

By playng our game now, we notice a lag between when the enemy is hit and the explosion animation. This is because the Empty object is being played until the end before the explosion gets to be played.

To solve this, select the transtion arrow between the Empty and Enemy_Destroyed_anim objects. In the Inspector, deselect the Has Exit Time, and in Settings, set Transition Duration to 0 (zero).

Now it looks good, but there is one problem. When the enemy is blowing up, if the Player is anywhere near it, they get damaged and loose a life.

What we need to do here is stop the enemy when it gets hit. We can do this by setting the enemy speed to 0 (zero) when they are hit.

Setting Enemy speed to 0 when hit

Now that’s a lot better. The enemy gets destroyed but doesn’t affect the Player, and the animation is amazing.

Hope you enjoyed this brief tutorial. See you in the next one.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store