A couple of Impactjs plugins for juicing your game. (screen shake and time slowdown)

A couple of Impactjs plugins for juicing your game. (screen shake and time slowdown)
TwitterFacebookGoogle+

If you haven’t seen the Juice it or Lose it talk by Martin Jonasson and Petri Purho you’re really missing out.

It is basically two guys talking about really cool ways you can polish your game to look better, to add life to it, and to make the player feel like she/he is really part of the game world.

Two very big ways that I’m adding juice to my current game is by adding well-timed screen shakes and split-second time slowdowns.  I have made two Impactjs plugins and made them available to anyone else that wants to do the same.

Screen Shake – (source on github)

The first is a Screen Shake.  I feel this doesn’t need a lot of explanation. It shakes the screen as intense as you want, as long as you want. It works like pretending there is a spring on the ig.game.screen.x and ig.game.screen.y values and bounces the screen around according to how a spring would react. You can make the spring stiffer or decay faster, or whatever you want.  One place I use it is whenever a buzzsaw smashes into the ground, adding weight and force to the buzzsaw.

//include in your .requires{} section:
.requires{
    'plugins.screenshaker'
}

//include in your game's init() section somewhere:
myScreenShaker: null,
init: function(){
    this.parent();
    this.myScreenShaker = new ScreenShaker();
}

//include in your game's update() section somewhere:
update: function(){
    this.parent();
    this.myScreenShaker.update();
}

And then to use it just apply a toggling force to the fake spring via the following method. (also note the toggling forces are additive and stack well with eachother!)

    ig.game.myScreenShaker.applyImpulse(300, 500);
    //300 = motion in x direction, 500 = motion in y direction)
    //values can be negative as well.

Time Slowdown – (source on github)

The second juice technique is a time slowdown. I use this for flashing time slowdowns briefly, like when the player dies in a certain way (for example when he gets cut in half by an orbital laser here at 33s into the video. don’t blink or you’ll miss it.)

I also have time slow down momentarily before you reach the end of each level. It’s just a nice simple effect that adds a little juice to the game that i like.  It’s fairly easy to use, and even comes with a SuperTimer class so you can create timers in game that are immune to the slowdown (for example the slowdown’s actual timers are all SuperTimer objects for obvious reasons).

//include in your .requires{} section:
.requires{
    'plugins.timeslower'
}

//include in your game's init() section somewhere:
myTimeSlower: null,
init: function(){
    this.parent();
    this.myTimeSlower = new TimeSlower();
}

//include in your game's update() section somewhere:
update: function(){
    this.parent();
    this.myTimeSlower.update();
}

Then to use it you just call the method below with the four parameters shown:

ig.game.myTimeSlower.setTimeScale(timeScale, x, y, z);
//timeScale => time scale value, between 0 (stopped) and 1 (regular speed)
//x  => gradually go from regular time to timeScale over x seconds (linear slowdown)
//y  => stay at timeScale for y seconds
//z  => gradually go from timeScale time to regular time over z seconds (linear speedup)  

Both of these are freely available to use for whatever reason by anyone, and are licensed via WTFPL.

TwitterFacebookGoogle+