Forums » Help » Slight trouble with sprite animations

I have managed to get the game running and control functioning without problem... However, for some reason when the character moves, it still plays the "idle" animation...

Not sure where is the problem...

The sample can be accessed here

main.js

ig.module( 
    'game.main' 
)
.requires(
    'impact.game',
    'impact.font',
    
    'game.entities.player',
    
    'game.levels.test'
    
)
.defines(function(){

MyGame = ig.Game.extend({
    
    gravity: 100,
    // Load a font
    font: new ig.Font( 'media/04b03.font.png' ),
    
    
    init: function() {
        // Bind keys
        ig.input.bind( ig.KEY.LEFT_ARROW, 'left' );
        ig.input.bind( ig.KEY.RIGHT_ARROW, 'right' );
        ig.input.bind( ig.KEY.X, 'jump' );
        
        // Load Level
        this.loadLevel(LevelTest);
        
    },
    
    update: function() {
        // Update all entities and backgroundMaps
        this.parent();
        
        // Add your own, additional update code here
    },
    
    draw: function() {
        // Draw all entities and backgroundMaps
        this.parent();
        
        
        // Add your own drawing code here
        var x = ig.system.width/2,
            y = ig.system.height/2;
        
        this.font.draw( 'It Works!', x, y, ig.Font.ALIGN.CENTER );
    }
});


// Start the Game with 60fps, a resolution of 320x240, scaled
// up by a factor of 2
ig.main( '#canvas', MyGame, 60, 320, 240, 2 );

});

player.js

ig.module(
    'game.entities.player'
)
.requires(
    'impact.entity'
)
.defines(function(){
    EntityPlayer = ig.Entity.extend({
        size: {x: 40, y: 88},
        offset: {x: 17, y: 10},
        
        maxVel: {x: 100, y: 150},
        friction: {x: 600, y: 0},
        flip: false,
        
        animSheet: new ig.AnimationSheet( 'media/player.png', 75, 100 ),
        
        accelGround: 1200,
        accelAir: 600,
        jump: 300,
        
        init: function( x, y, settings ) {
            this.parent( x, y, settings );
            
            // Add the animations
            this.addAnim( 'idle', 1, [15,15,15,15,15,14] );
            this.addAnim( 'run', 0.07, [4,5,11,0,1,2,7,8,9,3] );
            this.addAnim( 'jump', 1, [13] );
            this.addAnim( 'fall', 0.4, [13,12], true ); // stop at the last frame
            //this.addAnim( 'pain', 0.3, [6], true );
            
            ig.game.player = this;
        },
        
        update: function(){
            // Handle user input; move left or right
            var accel = this.standing ? this.accelGround : this.accelAir;
            if( ig.input.state('left') ) {
                this.accel.x = -accel;
                this.flip = true;
            }
            else if( ig.input.state('right') ) {
                this.accel.x = accel;
                this.flip = false;
            }
            else {
                this.accel.x = 0;
            }

            // jump
            if( this.standing && ig.input.pressed('jump') ) {
                this.vel.y = -this.jump;
                //this.sfxJump.play();
            }
            
            this.currentAnim.flip.x = this.flip;
            
            this.parent();
        }
    });
});

Hello,

It doesn't look like you are changing the animation.

I think you will have to add the following to your left and right input state checks to change the the animations:

this.currentAnim = this.anims.run;

And the following in your else block:

this.currentAnim = this.anims.idle;

Hi,

Thanks for the tips. :)

I added the following code right after the "jump" check and it seems to work as well...

            if( this.vel.y < 0 ) {
                this.currentAnim = this.anims.jump;
            }
            else if( this.vel.y > 0 ) {
                if( this.currentAnim != this.anims.fall ) {
                    this.currentAnim = this.anims.fall.rewind();
                }
            }
            else if( this.vel.x != 0 ) {
                this.currentAnim = this.anims.run;
            }
            else {
                this.currentAnim = this.anims.idle;
            }

Just a followup, I added a camera plugin and the follow code in the main.js but the camera seems to have slight jiggling randomly...

The sample is updated. link

    loadLevel: function( data ) {
        // Remember the currently loaded level, so we can reload when
        // the player dies.
        this.currentLevel = data;

        // Call the parent implementation; this creates the background
        // maps and entities.
        this.parent( data );
        
        this.setupCamera();
    },
    
    setupCamera: function() {
        // Set up the camera. The camera's center is at a third of the screen
        // size, i.e. somewhat shift left and up. Damping is set to 3px.        
        this.camera = new ig.Camera( ig.system.width/3, ig.system.height/3, 3 );
        
        // The camera's trap (the dead zone in which the player can move with the
        // camera staying fixed) is set to according to the screen size as well.
        this.camera.trap.size.x = ig.system.width/10;
        this.camera.trap.size.y = ig.system.height/3;
        
        // The lookahead always shifts the camera in walking position; you can 
        // set it to 0 to disable.
        this.camera.lookAhead.x = 0;
        
        // Set camera's screen bounds and reposition the trap on the player
        this.camera.max.x = this.collisionMap.pxWidth - ig.system.width;
        this.camera.max.y = this.collisionMap.pxHeight - ig.system.height;
        this.camera.set( this.player );
    },
    
    update: function() {
        // Update all entities and backgroundMaps
        this.parent();
        
        // Camera follows the player
        this.camera.follow( this.player );
    },