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 );
	},