Image Image Image Image Image

© Copyright 2012 Your Company | RSS | Email


Scroll to Top

To Top

HTML5 Development




In HTML5 Development
Useful Tools

By Maxim

How to make screen shake effect in PhaserJS and write CameraShake plugin.

On 12, Сен 2015 | 6 Comments | In HTML5 Development, Useful Tools | By Maxim

Hi guys, today I‘ll show you how to make a simple screen shake effect in PhaserJS!


Trying to solve this problem, I started to look for a solution and and found only one plugin for camera shake in PhaserJS but it doesn’t have all the settings I would like it to have. For a start it will write simple code.

Now let’s try to write a plugin, following an exemplary structure of the plugin mentioned above. The first thing we need is to create a CameraShake.js file and write following code:

Now connect js file in index.html, in example

 Call the plugin is performed so:

Change default plugin properties:

And now shake it!

Thank for reading!


  1. Many thanks for this. Works great out of the box for me.
    I made the camera reset (“, 0)”) optional to work along with scenarios where you’re moving around in a larger world with a following camera.

  2. Thank you James, really in big world you need to record the current position of the camera. I’ve updated the article.

  3. github needs this, also that would be great to change default settings by getting parameters when we call shake()

  4. Pooya, thx for addition, article updated. I’ll think about githab.

  5. what a simple and elegant code you are great man thanks for sharing

    • Shohan thanks, I’m glad what it was useful for you

Submit a Comment