Jump to content

Animations in PandaJS 2


Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites


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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...