Modified screen shaker and camera follow in ImpactJS

ImpactJS has a really cool screen shaker plugin written by Killbot, which I used during the first iterations of this game. The project has now changed quite a bit and the screen shaker was no longer working exactly as I needed it to because the camera follows the player entity as it moves instead of being constantly positioned at 0,0.

The problem was that the screen shaker plugin uses ig.game.screen.x and y to shake the screen. However, in my update function screen.x and y were being set to this every frame, which overwrote the shake:

ig.game.screen.x = ig.game.player.pos.x - ig.system.width / 2;
ig.game.screen.y = ig.game.player.pos.y - ig.system.height / 2;

I ended up throwing together a quick way to get around this (and make camera follow potentially look a little cooler in general). This is still clunky and will need refinement, but at least my camera is still following the player and the screen shake is now visible when the player ship gets damaged. In the update function in main.js I am now doing this:

        if( ig.game.player && this.currentLevel !== LevelFinish ) {
            if (!this.screenShaking) {  
                if (this.screen.x > (this.player.pos.x - ig.system.width / 2) + 20) {
                    this.screen.x -= 15;
                }

                else if (this.screen.x < (this.player.pos.x - ig.system.width / 2) - 20) {
                    this.screen.x += 15;
                }

                else {
                    this.screen.x = this.player.pos.x - ig.system.width / 2;
                }

                if (this.screen.y > (this.player.pos.y - ig.system.height / 2) + 20) {
                    this.screen.y -= 15;
                }

                else if (this.screen.y < (this.player.pos.y - ig.system.height / 2) - 20) {
                    this.screen.y += 15;
                }

                else {
                    this.screen.y = this.player.pos.y - ig.system.height / 2;
                }
            }   
        }

The above makes the camera move toward the player instead of just jumping to it. This isn’t perfect - sometimes you see a little jump where the camera is adjusting itself, which I don’t think is acceptable, but I’ll work on it.

Then in the screen shaker plugin code I set ig.game.screenShaking to true when the shake is triggered and back to false when the shake timer runs out and the shake is finished. This results in a very brief pause in the camera follow when the screen is shaking, and a quick fluid catch-up movement after the shake where the camera moves back to the player after the shaking is over. This works for me because it works with the shake to create a slight interruption-type effect for a split second when the player gets hit, but never lasts long enough to allow the player to lose sight of their ship on the screen. I’ll see how I feel about it down the line.

comments powered by Disqus