Ch020 - Polish: Screen Shake

Polish: Screen Shake

Polish: Screen Shake when Zapped

Rather than just disappearing we can add an animation to the whole screen to give our game player feedback that something bad has happened. We can do this by shaking the screen.

Check the Code: what we need to know and do

Better death here needs us to alter the function called when player and enemy overlaps. Let’s concentrate on animating the enemy, we need to change the sprite animation but also add a delay into the process of restarting the game so we can see the animation play out. So we’ll need the following background knowledge;

• Collision detection using overlap() function- see Adding a Reward

The code for a minimal example of the Shake Screen when Zapped game polish element is shown here - https://add-polish-shake-screen.glitch.me/

Going over the code:

Have a look at an updated hitHazard function - if you have sounds added to your game etc, be sure not to remove those. Just be sure to copy and add the lines in bold;

var hitHazard = function (player, enemy) {
  player.kill();
  splatNoise.play();
  game.camera.shake(0.05, 500);
  game.time.events.add(1000, restart, this);
};

We just need to add a line about shaking the camera position of the whole game into the hitHazard function.

You can see that to make this work effectively in our game we replaced the line calling restart(); in the playState.hitHazard function with a line adding a time event to wait for one second before restarting the game.

Bonus: If you don’t like the way everything shakes here then the shake effect can be done only on limited sprites or groups for a demo of that see here. https://jamm-labs.github.io/ggcp/add-polish-shake-sprites-only/game.js