Animations in PandaJS 2

[zakhov]

Hi all, I'm currently developing a game with PandaJS 2. I'm currently designing the game's background so that it has a looping animation to it.

 

However in using PandaJS 2.0, some of the methods I tried from the old Panda fiddler and game demos from old versions of PandaJS doesn't work, e.g - MovieClip. The method that works is game.Animation but it only when using game.Texture.fromImage which doesn't work when using reference to game.assets.

For example, in asset loader I'm using:

game.addAsset('assets/images/tree01.png', 'tree01');game.addAsset('assets/images/tree02.png', 'tree02');game.addAsset('assets/images/tree03.png', 'tree03');game.addAsset('assets/images/tree04.png', 'tree04');game.addAsset('assets/images/tree05.png', 'tree05');

but if I use game.Animation with game.Texture.fromImage it can't read the path if I used:

 

this.tree = new game.Animation([            game.Texture.fromImage('tree01'),            game.Texture.fromImage('tree02'),            game.Texture.fromImage('tree03'),            game.Texture.fromImage('tree04'),            game.Texture.fromImage('tree05')            ]);            this.tree.scale.x = this.rightbg.scale.y = 0.7;            this.tree.anchor.set(0.5, 1.0);            this.tree.position.set (760,-10);                        this.tree.play();            this.tree.addTo(this.stage);

But it does work if I use this:

            this.tree = new game.Animation([            game.Texture.fromImage('media/assets/images/tree01.png'),            game.Texture.fromImage('media/assets/images/tree02.png'),            game.Texture.fromImage('media/assets/images/tree03.png'),            game.Texture.fromImage('media/assets/images/tree04.png'),            game.Texture.fromImage('media/assets/images/tree05.png')            ]);            this.tree.scale.x = this.rightbg.scale.y = 0.7;            this.tree.anchor.set(0.5, 1.0);            this.tree.position.set (760,-10);                        this.tree.play();            this.tree.addTo(this.stage);

Any solution to this, because I'd like to remove redundancy in my code structure. 

Another issue I have with game.Animation is that the parameter for animation speed doesn't seem to work. Here's what I'm using

this.tree.animationSpeed = 0.3;

But it doesn't seem to work regardless of what value I use in PandaJS 2. Is it working for anyone else or am I am doing something wrong?

Thanks in advance.

[zakhov]

Solved the first issue by calling the sprites via spritesheet created in TexturePacker.

game.addAsset('spritesheet.json');this.tree = new game.Animation([            game.Texture.fromImage('tree01.png'),            game.Texture.fromImage('tree02.png'),            game.Texture.fromImage('tree03.png'),            game.Texture.fromImage('tree04.png'),            game.Texture.fromImage('tree05.png')            ]);

But the animationSpeed still doesn't change anything for me. Tried setting it lower or higher brings no difference.

[PixelPicoSean]

@zakhov

The Animation API has changed since v2, the Animation itself is more like an animation manager which has some animations defined using "addAnim" method. And you can set speed of each animation definition instead of Animation itself.

this.tree = new game.Animation(['tree01', 'tree02', 'tree03', 'tree04', 'tree05']);this.tree.addAnim('myAnim', [0, 1, 2, 3, 4], {  loop: false,  speed: 5,  onComplete: function() { console.log('Animation is complete'); }});this.tree.scale.x = this.rightbg.scale.y = 0.7;this.tree.anchor.set(0.5, 1.0);this.tree.position.set (760,-10);            // Play the specific animation// If you call play without parameters, it'll play the animation called "default",// which is automatically created using all textures.this.tree.play('myAnim');this.tree.addTo(this.stage);// You can change speed of any animationthis.tree.anims['myAnim'].speed = 10;

Take a look at the "animation" module in "engine" folder for more information of new Animation API, it's very clear and well commented.

[zakhov]

Thanks for the detailed explanation.

It didn't occur to me to look at the engine modules. 

 

If there was a rep system, I would've repped you.

Cheers