Forums » Code » plugin to shake the screen

Hey dudes here's a quick utility plugin that lets you shake the screen. adds 'juice' to your games.
https://github.com/killbot/Impactjs_screenshaker
(also submitted to pointofimpactjs.com)

Nice plugin!
Testing it on my Paper moon game :-)

I was trying to make it work with my game, but it doesn't shake the screen somehow (though when I place console.log in the plugin code the methods are executed and the applyImpulse is fired).

Anyone tested it in Impact 1.22?

Uh, nevermind. The blog post I was reading was missing one important line:

this.screenShaker.shakeScreen(this.screen);

Now it's working fine.

Where are you putting this line of code?

this.screenShaker.shakeScreen(this.screen);

There is a much simpler way to handle the shaking :
in the draw() part of a game, translate the context randomly in all
directions, prior to calling parent.

      shakeAmplitude : 0,
      draw : function() {

        var ctx = ig.system.context;
        // translate the context if shakeAmplitude not null;
        if (this.shakeAmplitude) {
           ctx.save();
           ctx.translate(this.shakeAmplitude*(Math.random()-0.5) ,
                                 this.shakeAmplitude*(Math.random()-0.5)   );  
        }

        this.parent();         //  or ig.Game.draw.call(this);  

        if (this.shakeAmplitude) {
           ctx.restore();
        }
      
      }

so you have to change this.shakeAmplitude within the update() of the game and the shake will occur.

You might want to shape in/out the shakeAmplitude, or to have less randomness.

Quote from vincentpiel
There is a much simpler way to handle the shaking :
in the draw() part of an entity, translate the context randomly in all
directions, prior to calling parent.

In games where the screen shakes, it's not just the entities, but the entire camera that shakes. Wouldn't this just shake the entities around and not the level?

ho ! my bad : i meant : in the draw part of your game. (i edited).

Glad I looked into all of this -- Vincent, I didn't try your method, because it actually helped me figure out what was wrong with my game, and why this plugin wasn't working.

Somewhere along the line, in my draw() loop I had removed this.parent(), so it wasn't shaking!

I added that back, and all is fine.

Quote from vincentpiel
There is a much simpler way to handle the shaking :
in the draw() part of a game, translate the context randomly in all
directions, prior to calling parent.

      shakeAmplitude : 0,
      draw : function() {

        var ctx = ig.system.context;
        // translate the context if shakeAmplitude not null;
        if (this.shakeAmplitude) {
           ctx.save();
           ctx.translate(this.shakeAmplitude*(Math.random()-0.5) ,
                                 this.shakeAmplitude*(Math.random()-0.5)   );  
        }

        this.parent();         //  or ig.Game.draw.call(this);  

        if (this.shakeAmplitude) {
           ctx.restore();
        }
      
      }

so you have to change this.shakeAmplitude within the update() of the game and the shake will occur.

You might want to shape in/out the shakeAmplitude, or to have less randomness.

+1 for this simple method. Thanks a lot. (I know I'm necro-ing a thread, just thought that people should know it works, and give credit where it's due.)