Camera Shaking Plugin for your use

[CodeToWin]

The question of how to shake the camera in action games has come up a few times. I wanted to learn how to create plugins for Phaser, so I made a camera shaking plugin.

 

You can see it in action here

 

You can find the code here

 

 

Modes allowed:

 

shake up and down 

shake left to right

shake both up/down, left/right with a fixed amplitude

shake both up/down, left/right with a random amplitude (up to +/- a maximum)

 

 

You can also combine increasing or decreasing amplitude with the above camera shaking modes.

 

 

This is free for you to use, abuse, or modify at your whim. Let me know what you think

[drhayes]

Here's mine:

'use strict';function ScreenShake(game, parent) {  Phaser.Plugin.call(this, game, parent);  this.game.shaker = this;  this.shaking = false;  this.shakeDurationMs = 0;  this.shakeStrength = 0;}ScreenShake.prototype = Object.create(Phaser.Plugin.prototype);ScreenShake.prototype.constructor = ScreenShake;ScreenShake.prototype.update = function() {  if (this.shaking) {    this.shakeDurationMs = Math.max(0, this.shakeDurationMs - this.game.time.physicsElapsedMS);    if (this.deltaX) {      this.game.camera.x -= this.deltaX;    }    if (this.deltaY) {      this.game.camera.y -= this.deltaY;    }    this.deltaX = this.game.rnd.integerInRange(-this.shakeStrength, this.shakeStrength);    this.deltaY = this.game.rnd.integerInRange(-this.shakeStrength, this.shakeStrength);    this.game.camera.x += this.deltaX;    this.game.camera.y += this.deltaY;    if (this.shakeDurationMs == 0) {      this.shaking = false;      // Reset the world and camera bounds.      this.game.world.setBounds(this.boundsCache.x, this.boundsCache.y, this.boundsCache.width, this.boundsCache.height);    }  }};ScreenShake.prototype.start = function(durationMs, strength) {  this.shaking = true;  this.shakeDurationMs = durationMs || 2000;  this.shakeStrength = strength || 5;  this.boundsCache = Phaser.Utils.extend(false, {}, this.game.world.bounds);  this.game.world.setBounds(    this.boundsCache.x - this.shakeStrength, this.boundsCache.y - this.shakeStrength,    this.boundsCache.width + this.shakeStrength, this.boundsCache.height + this.shakeStrength);};module.exports = ScreenShake;

It's built using CommonJS (hence the module.exports). One thing I really like about it is it keeps the shake centered on where the camera is supposed to be instead of drifting away over time. It also changes world bounds to accommodate the shake, if needed.

 

I'll be writing tutorials soon.

[rich]

@CodeToWin: Just to say that all the articles on your site throw a nginx 400 error.

[drhayes]

Mine has this weird bug. If the camera is following a sprite and the sprite gets close to the corners of the world then there's not a lot of room to shake. Even though it expands the world bounds the camera just eats the space back up. Not sure how I'm gonna fix it yet.

[CodeToWin]

@rich thanks for the heads up! It *should* be fixed now.

 

It's funny, the links always worked for me on my desktop and the wife's laptop, so I had no idea there was an issue. Again, thanks!

[rich]

I'm afraid not, I get a 400 Bad Gateway error from http://codetowin.io/%topics%/screen-shake-plugin-is-available/ (anyone else see this?)

[CodeToWin]

Just now i updated the link in the text above to the correct permalink structure (without the % symbols). 

[rich]

If I go to http://codetowin.io/?p=144 it redirects me to http://codetowin.io/%topics%/screen-shake-plugin-is-available/ (with the % in) and breaks on that. If I remove the % I get a 404

[CodeToWin]

that's just bizarre... I had a buddy test it and it worked for him as well. To be safe I cleared the site cache. Maybe try clearing yours?

[CodeToWin]

would someone else be so kind as to check the link to see if it is working for them? 

[drhayes]

http://codetowin.io/?p=144  works for me with no redirect that I can see.