What Are Death / Enemy Animations?

Death animations are features in a game where when the player dies, there is an animation that plays instead of a simple alert letting the player know that they died. For example, in Minecraft, the player turns red and falls to the side when they are killed. In Mario, he jumps back before falling into the ground when he is killed, etc.

Enemy animations are similar to death animations, but it happens to the enemy instead. For example, the animation in Minecraft where the creeper starts charging up before it explodes and such.

Why Death / Enemy Animations are important

Death animations are important in the game especially with the addition of enemies that the player has to avoid. It will siginify when the player had not completed the goal of avoiding the enemy. In our example, we have a creeper moving that the player has to avoid inorder to get to places in the game. Adding death animations creates and imersive experience for the player and gives a challenge to make the game more engaging.

We do this by first telling the game by checking if the player collides with the sprite. In the previous lesson, we talked about how we created our own Enemy.js file for the enemies in the game. Using this file, we can create specific enemies extending from the main file. In our example, we created a Creeper.js file that’s special to the creeper.

Examples of Death / Enemy Animations

The player exploding

  • This is the example that will be explained in the following lesson. But if you want to create other animations, there are many more options!

The enemy exploding

  • Instead of making the player explode, it may be a better idea for the enemy to explode instead. But then, there would need to be a way to know that the player took damage and died.

Player jump back

  • In games like Mario, there is a small animation where Mario bounces back from the collided enemy before dying. Something like that could be added into the game.

Player turn red

  • Like in the actual Minecraft game, when players are damaged, they turn a shade of red for a moment before returning to moment. This could be another animation that happens when collided with the enemy

Enemy sprite changes

  • While it could be fun to animate the explosion affect on the enemy, there could also be a way for the enemy png to change when collided with the player. For example, the Creeper sprite could change into a png of an explosion when collided with the player.

Player Death Animation

Creation of the actual animation inside of the enemy file

The death animation is made in the Enemy.js file, it runs when collision with an enemy is detected. It is the explode function.

explode(x,y) {
        const shards = 20; // Number of 'shards' particles
        for (let i = 0; i < shards; i++) { // for loop that runs 20 times in order to generate the shards
            const shard = document.createElement('div'); // draws the shards 
            shard.style.position = 'absolute'; // ensures the position of the particles on the screen 
            shard.style.width = '5px'; 
            shard.style.height = '5px'; // size of the particles, 5x5
            shard.style.backgroundColor = 'red'; // color of the shards
            shard.style.left =  `${x}px`; // shards are placed at the center of the explosion 
            shard.style.top = `${this.gameEnv.top+y}px`;
            this.canvas.parentElement.appendChild(shard); // adds shard to the canvas so its actually visible 

            const angle = Math.random() * 2 * Math.PI; // determines direction of the shard movement
            const speed = Math.random() * 5 + 2; // determines how fast the shards are shot out 

            const shardX = Math.cos(angle) * speed; // horizontal movement 
            const shardY = Math.sin(angle) * speed; //vertical movement 

            shard.animate(
                [
                    { transform: 'translate(0, 0)', opacity: 1 },
                    { transform: `translate(${shardX * 20}px, ${shardY * 20}px)`, opacity: 0 }, // the shards begin in the middle of the explosion at full opacity, then shoot out 20 times and fade away ending with opacity 0 
                ],
                {
                    duration: 1000, // the animation lasts a second 
                    easing: 'ease-out', // makes it so the shards move fast when coming out but then slow down 
                    fill: 'forwards', // keeps the position of the animation, even after it ends 
                }
            );

            setTimeout(() => {
                shard.remove(); // removes shards after animation
            }, 1000); // 1000 means that the animation should last one second, the delete the remaining shards and cleans up
        }
    }

This creates the actual animation, but code in the Creeper.js file will make it so it actually runs.

Where and how the animation is played

Similarly to how there is a handleCollisionEvent() in Enemy.js so that the game knows when to restart after the Creeper and the player have collided, there is another handleCollisionEvent() called in Creeper.js in order for the death animation to happen.

handleCollisionEvent() {
        // this.gameEnv.gameObjects is an array that holds all the game objects, and this is looking for the object player and retrieves it when it is found
        var player = this.gameEnv.gameObjects.find(obj => obj instanceof Player);
        // checks if the player.id matches the id of what the creeper collided with .. it should be the same 
        if (player.id = this.collisionData.touchPoints.other.id) {
            
            console.log("Creeper collided with player!");
            
        // stops the enemy, Creeper, to stop moving after the collision 
        this.velocity.x = 0;
        this.velocity.y = 0;

        // this calls the explode function. as seen before, the explode function is created inside of the enemy.js file 
        this.explode(player.position.x, player.position.y);
        // kills the player after this animation is plated 
        player.destroy();
        this.playerDestroyed = true;

        // restarts  level after explosion animation
        setTimeout(() => {
            this.gameEnv.gameControl.restartLevel();
        }, 3000); // the amount of time after the end of the animation until the game restarts, this can be adjusted 
        }
    }