Animations adding error in extended Sprite

[ManBoy]

Hi, I'm having a problem adding animation to extended Sprite in 2.0

 

This doesn't work: 

Player = function (game,x,y){	Phaser.Sprite.call(this,game,x,y,'GameAtlas','Player_Idle-0001.png');	game.physics.enable(this, Phaser.Physics.ARCADE);	this.animations.add('Idle',Phaser.Animation.generateFrameNames('Player_Idle-', 1, 18, '.png', 4),6,true);};Player.prototype = Object.create(Phaser.Sprite.prototype);Player.prototype.constructor = Player;player = new Player(game,game.world.centerX,game.world.height - 120);game.add.existing(player);//player.animations.add('Idle',Phaser.Animation.generateFrameNames('Player_Idle-', 1, 18, '.png', 4),6,true);player.animations.play('idle');

This works:

player = game.add.sprite(game.world.centerX,game.world.height-120,'GameAtlas','Player_Idle-0001.png');player.animations.add('Idle',Phaser.Animation.generateFrameNames('Player_Idle-', 1, 18, '.png', 4),6,true);player.animations.play('Idle');

This is the error message:

 

 

1. Uncaught TypeError: Cannot call method 'add' of undefined phaser.js:37547
   1. Phaser.Animationphaser.js:37547
   2. Phaser.AnimationManager.addphaser.js:37082
   3. PlayerGamePlay.js:21
   4. createGameObjectsGamePlay.js:39
   5. GamePlay.createGamePlay.js:13
   6. Phaser.StateManager.loadCompletephaser.js:13673
   7. Phaser.StateManager.preUpdatephaser.js:13542
   8. Phaser.Game.updatephaser.js:18604
   9. Phaser.RequestAnimationFrame.updateRAFphaser.js:32271
   10. _onLoopphaser.js:32257

 

It says the game.onPause and game.onResume are undefined

[Heelio]

I have the same problem with my extended Sprite class (with Phaser 2.0.1). Did you find any way to solve it ? 

[LeonardoDigital]

Hi, I have the same problem. Did u find solution?

Thank you.

[Reisor]

To solve this you only have to put at the top of player file 'use strict'.

 

The code of the first post will be like this:

'use strict'; // without this the animation.add will not workPlayer = function (game,x,y){	Phaser.Sprite.call(this,game,x,y,'GameAtlas','Player_Idle-0001.png');	game.physics.enable(this, Phaser.Physics.ARCADE);	this.animations.add('Idle',Phaser.Animation.generateFrameNames('Player_Idle-', 1, 18, '.png', 4),6,true);};Player.prototype = Object.create(Phaser.Sprite.prototype);Player.prototype.constructor = Player;player = new Player(game,game.world.centerX,game.world.height - 120);game.add.existing(player);//player.animations.add('Idle',Phaser.Animation.generateFrameNames('Player_Idle-', 1, 18, '.png', 4),6,true);player.animations.play('idle');

[lewster32]

Reisor could you explain why this is needed or point us in the direction of an explanation please? It'd be nice to know when strict mode is needed for such seemingly paradoxical functionality to work.

[Heelio]

 

To solve this you only have to put at the top of player file 'use strict'.

 

The code of the first post will be like this:

'use strict'; // without this the animation.add will not workPlayer = function (game,x,y){	Phaser.Sprite.call(this,game,x,y,'GameAtlas','Player_Idle-0001.png');	game.physics.enable(this, Phaser.Physics.ARCADE);	this.animations.add('Idle',Phaser.Animation.generateFrameNames('Player_Idle-', 1, 18, '.png', 4),6,true);};Player.prototype = Object.create(Phaser.Sprite.prototype);Player.prototype.constructor = Player;player = new Player(game,game.world.centerX,game.world.height - 120);game.add.existing(player);//player.animations.add('Idle',Phaser.Animation.generateFrameNames('Player_Idle-', 1, 18, '.png', 4),6,true);player.animations.play('idle');

 

This solution does not work for me. 

Here is my player file : 

var Player = function(game, x, y){        Phaser.Sprite.call(this, game, x, y, 'chicken');        this.game.physics.enable(this, Phaser.Physics.ARCADE);    this.maxVelocityX = 200;    this.maxVelocityY = 600;    this.minHealth = 1;    this.health = 10;    this.hittingEnemy = false;        this.smoothed = false;    this.body.gravity.y = 978;    this.body.collideWorldBounds = true;    this.anchor.setTo(0.5,0.5);    this.body.setSize(64, 100, 25, 6);        this.animations.add('stand', [13,14,15,16,17,18,17,16,15,14], 6, true);    this.animations.add('walk', [0,1,2,3,4,3,2,1,0,13,5,6,7,8,9,8,7,6,5,13], 24, true);    this.animations.add('jump', [10,11,12,11], 24, true);        this.game.add.existing(this);    };Player.prototype = Object.create(Phaser.Sprite.prototype);Player.prototype.constructor = Player;

Still have this strange "Uncaught TypeError: Cannot read property 'add' of undefined" error, except when I comment lines 18 to 20. Any ideas ? 

 

Thanks

[lewster32]

Which version of Phaser?

[Heelio]

Which version of Phaser?

 

I tried several versions, from 2.0 to 2.1.1. I remember that "this.animations.add" worked well in version 1.6, but I need v2+ for the rest of my code. 

[lewster32]

Hmm. I've just tried copying and pasting your code into one of my projects using 2.1.1 and it's working as expected - or at least the AnimationManager object is available on this.animations, though it errors because the asset is missing and so it can't create the frames. Whereabout are you trying to instantiate the Player object? I can only assume you're trying to do it at a point where Phaser hasn't finished booting maybe?

[LeonardoDigital]

Hi @lewster32 I am getting the same error. 

How or when would be the correct time to instantiate the objec?

In my index file I have this:

 <!DOCTYPE HTML><html> <head><title>HypoTrip</title><script src="phaser.min.js"></script><script src="Boot.js"></script><script src="Preloader.js"></script><script src="MainMenu.js"></script>     <script src="Bird.js"></script> <script src="Game.js"></script></head><body><body style="background:#000000"><div id="gameContainer"></div><div id="orientation"></div>    <script type="text/javascript">(function () {// Create your Phaser game and inject it into the game div.// We did it in a window.onload event, but you can do it anywhere (requireJS load, anonymous function, jQuery dom ready, - whatever floats your boat)// We're using a game size of 1024 x 768 here, but you can use whatever you feel makes sense for your game of course.var game = new Phaser.Game(480, 320, Phaser.AUTO, 'gameContainer');// Add the States your game has.// You don't have to do this in the html, it could be done in your Boot state too, but for simplicity I'll keep it here.game.state.add('Boot', BasicGame.Boot);    game.state.add('Preloader', BasicGame.Preloader);    game.state.add('MainMenu', BasicGame.MainMenu);       game.state.add('Game', BasicGame.Game);        game.state.start('Boot');})();</script></body></html> 

and then when I try to instatiate the object Bird I get the error.

I thought all the assets where already loaded in the preloader state...

 

Thank you.

[lewster32]

The assets aren't the problem - can you show me the piece of code where you actually call new Bird() please?

[LeonardoDigital]

Sure. Sorry I couldnt answer sooner.

This is the code I use for the extended sprite:

Bird = function (game, x, y, frame) {Phaser.Sprite.call(this, game, x, y, 'bird',frame);this.animations.add('fly');this.animations.play('fly',12, true);};Bird.prototype = Object.create(Phaser.Sprite.prototype);Bird.prototype.constructor = Bird;

This how it is instantiated:

this.bird1 = new Bird(this, 100, 300);this.bird1.anchor.setTo(0.5, 0.5);this.add.existing(this.bird1);

[lewster32]

You're passing 'this' to the bird as the first parameter - it should be 'this.game'.

[tomph]

I'm having the exact same problem.  Anyone found a solution to this yet?

[elennaro]

lewster32 solution solves it for me. I nave had the same problem. Thank you!

[elennaro]

You're passing 'this' to the bird as the first parameter - it should be 'this.game'.

This solved the issue for me. Have had the same issue! Thanks lewster32!

[ForgeableSum]

I encountered the error "Uncaught TypeError: Cannot call method 'add' of undefined" when using a Pixi.Texture to create a sprite as opposed to a key. I wonder if this is an actual bug?