Forums » Help » Can't Play Animation

Hi guys,

I've searched around a bit and couldn't find a similar issue, either here or in general.

I'm new to Impact and have been adapting the jump n run demo to something new.

When constructing my checkpoint entity I used the coin as a base. Problem is, whenever I try running an animation on it I get the cyclic error

Uncaught TypeError: this.currentAnim.update is not a function

I thought this was because the coin entity originally avoided this.parent, so included that instead of the update animation call, but that instead tells me that Draw is not a function.

I've reordered the code several times but the basic thing remains - if I try to play animation it breaks.

Can someone point me in the right direction?

Hmm. Code?

It's just that we can't start until you give us your code. Have you done this.addAnim(...) yet?

Sorry, I thought this would be a n00b gotcha. Here's the code so far:

ig.module(
	'game.entities.graveskull'
)
.requires(
	'impact.entity'
)
.defines(function(){
	
EntityGraveskull = ig.Entity.extend({
	size: {x: 16, y: 4},
	offset: {x: 8, y: 28},
	
	type: ig.Entity.TYPE.NONE,
	checkAgainst: ig.Entity.TYPE.A, // Check against friendly
	collides: ig.Entity.COLLIDES.NEVER,
	
	animSheet: new ig.AnimationSheet( 'media/graves.png', 32, 32 ),
	sfxCollect: new ig.Sound( 'media/sounds/coin.*' ),
	
	//internal properties
	status: 0,	//0 = inactive, 1 = active
	burned: 0,	//0= usable, 1 = burned
	
	init: function( x, y, settings ) {
		this.parent( x, y, settings );
		
		this.zIndex = -10; //draw it behind other stuff
		
		this.addAnim( 'inactive', 0.1, [0]);
		this.addAnim( 'activate', 0.1, [1,2], true);
		this.addAnim( 'burn', 0.1, [4,5], true);
	},
	
	
	update: function() 
	{		
		// Do nothing in this update function; don't even call this.parent().
		// The coin just sits there, isn't affected by gravity and doesn't move.
			
		//manage the animations depending on status of the grave
		
		/*
		if (this.status == 0)
			this.currentAnim = this.anims.inactive;
		else if (this.status == 1)
			this.currentAnim = this.anims.activate.rewind;
		else if (this.status == 2)
			this.currentAnim = this.anims.activated;
		else if (this.status == 3)
			this.currentAnim = this.anims.burn;
		else if (this.status == 4)
			this.currentAnim = this.anims.burned;
		else	//its burned and inactive
			this.currentAnim = this.anims.inactiveburned;
		*/
			
		// We still have to update the animation, though. This is normally done
		// in the .parent() update:
		this.currentAnim.update();
		//this.parent();
	},
	
	
	check: function( other ) 
	{
		// The instanceof should always be true, since the player is
		// the only entity with TYPE.A - and we only check against A.
		if (other instanceof EntityPlayer)
		{
			
			//if not burned and the player is injured, restore them
			if ((other.health == 1) && (this.burned == 0) )
			{
				other.health = 3;		//restore player
				this.status = 1;			//activated
				
				this.sfxCollect.play();	//play sfx
				
				/*if( this.currentAnim != this.anims.burn )
					this.currentAnim = this.anims.burn.rewind;*/
					
				
				//other.respawnPoint = this.pos.x, this.pos.y+4;
			}
			/*else 
			{
				if( this.currentAnim != this.anims.burn )
				{
					this.currentAnim = this.anims.burn.rewind;
					this.sfxCollect.play();	//play sfx
				}
				//other.respawnPoint = this.pos.x, this.pos.y+4;
			}*/
		}
		
	}

});

});

It's a bit confusing because there are multiple states for the object, and they're not yet written.

It works as a waypoint and as a way for the player to restore themselves from a damaged state.

Also, right now the script that plays the animation is disabled to avoid the crash.

I haven't figured out the respawn point code yet either, but no worries :)

Thanks in advance!

Hmmm. Give me a minute

Try on update:

console.log(this.currentAnim);

That's interesting.

It logs no animation until I trigger one by playing, at which point it breaks with the same error and some 'not the droids you're looking for' error;

function () {
		this.timer.set();
		this.loopCount = 0;
		this.frame = 0;
		this.tile = this.sequence[0];
		return this;
	}

It does however tell me that the error is originating in entity.js line 101, which is where ImpactJS calls the exact same animation update. Not surprising, I know, but I haven't yet begun digging around in the guts of the system.

So whatever it is I'm provoking is most likely some stupid syntax thing that cripples the engine, or else a similar obvious requirement I've not included...

There's a few places in your code where you incorrectly call rewind

// This:
this.currentAnim = this.anims.burn.rewind;
// Should be:
this.currentAnim = this.anims.burn.rewind();

Calling rewind or any of the animation methods like this would cause the issue, because you're not actually setting this.currentAnim to a valid animation.

Confirmed and fixed.

Thank you!

Is there some sort of debugger or fake compiler I can use for these types of errors?

I doubt I'll be making this particular mistake again, but it's very easy to miss a , or something when writing out large blocks.

It's simply important to note that "methods" or "functions" are called with (). Your code was syntactically valid. It just wasn't what the ImpactJS engine expected you to do.

Edit:

The error makes sense because you were setting this.currentAnim to a function (instead of object with a property called update).

I suppose if you were using something like TypeScript, then a linter could have told you that you set this.currentAnim to an invalid type, however a stable TypeScript version of ImpactJS is not available...