Swapping out animation sheets on state change in ImpactJS

Posted on June 30, 2012 | 3 minute read

I got quite a lot done on my procedural level experiment over the past couple of days, but don’t really want to talk about that part much in great detail. It involves changing terrain and player physics, but that’s as far as I’ll go with the explanation for now.

So instead I’ll talk about handling animations that tie into player states. This is all pretty basic (even for me, who’s a total noob!), but I did notice some people asking questions about animation sheets etc earlier in the Impact forums, so figured I’d write about it anyway.

Let’s say that your player has two states: Healthy and Injured. Let’s say that other than the look of the sprite being different in the two modes, the framecount and speed of animations in the two states don’t change.

Option 1 - Put Healthy and Injured animation frames on one spritesheet

So what you would do is have your regular spritesheet PNG image with Healthy and Injured frames positioned there. Then you’ll just define Healthy and Injured versions of animations in the entity’s init() and switch out the animation when the player becomes injured. An example might be:

animSheet: new ig.AnimationSheet( 'media/player.png', 120, 70 ),

init: function( x, y, settings ) {
    this.parent( x, y, settings );
    this.anims.healthyIdle = new ig.Animation( this.animSheet, 0.2, [0,1,2] );
    this.anims.injuredIdle = new ig.Animation( this.animSheet, 0.2, [3,4,5] );
},

And this is fine while we only have the Idle animation to think about. But what if our player idles, runs, jumps, falls, crouches, attacks, blocks, etc? Each of those would need two versions and that means not only defining quite a few animations, but actually activating these animations individually when the player becomes injured.

I ended up working around this by doing the following (as usual I don’t know if this is the best way. It works, but I could be missing downsides that I just haven’t run into yet):

Option 2 - Define just one set of animations and switch out the animation sheet

Here we would create two spritesheets instead of one - one for Healthy and one for Injured. Then instead of defining the animations in the init(), we make a new function called setAnimations(), call it fromĀ init() when the player entity is spawned and tell it to use our “Healthy” animation sheet (assuming the player is healthy on spawn):

healthyAnimSheet: new ig.AnimationSheet( 'media/player/healthy.png', 120, 70 ),
injuredAnimSheet: new ig.AnimationSheet( 'media/player/injured.png', 120, 70 ),
    init: function( x, y, settings ) {
        this.parent( x, y, settings );
        this.setAnimations(this.healthyAnimSheet);
    },

    setAnimations: function(sheet) {
        this.anims.Idle = new ig.Animation( sheet, 0.2, [0,1] );
        this.anims.Run = new ig.Animation( sheet, 0.2, [2,3,4,5,4,3] );
        this.anims.Jump = new ig.Animation( sheet, 0.2, [6,7] );
        this.anims.Fall = new ig.Animation( sheet, 0.2, [8,9] );
        this.anims.Attack = new ig.Animation( sheet, 0.2, [10,11] );
    },

Then when the condition for the player becoming “Injured” is met, all we have to do is use the setAnimations() function again and pass the Injured sheet into it:

        if (this.injured) {
            this.setAnimations(this.injuredAnimSheet);
        }

This means that you can keep using the same animation names you defined earlier without having to go back and change anything except for swapping out the animation sheet.




Categories:game dev dev games
comments powered by Disqus