Creating an object with multiple animations in Pixi.JS

[suyashmshephertz]

Is there a way to easily create multiple animations and switch between them through out the game.

Suppose I have this spritesheet

 
And I want to create skeleton containing different animations and I can switch between them depending on user actions.

In short, I am looking for something like I used to do in Flixel.

 

addAnimation("walkRight",[8,9,10,11],10,true);addAnimation("walkLeft",[12,13,14,15],10,true);addAnimation("walkUp",[4,5,6,7],10,true);addAnimation("walkDown",[0,1,2,3],10,true);addAnimation("idle",[0],5,true);play("idle");

[benny!]

I would suggest the following:

• create a child class from PIXI.Movieclip
• Add additional method as needed
• Adjust/overwrite the updateTransform method from parent

[xerver]

I generally extend Sprite, and do my own animation class.

[Sebi]

Take a look at Mozilla Browserquest and how they handle animations / ticks.

 

https://github.com/mozilla/BrowserQuest/blob/master/client/js/animation.js

https://github.com/mozilla/BrowserQuest/blob/master/client/js/sprites.js

https://github.com/mozilla/BrowserQuest/blob/master/client/js/sprite.js

 

Spritesheet:

https://raw.github.com/mozilla/BrowserQuest/master/client/img/1/clotharmor.png

 

Configuration:

https://github.com/mozilla/BrowserQuest/blob/master/client/sprites/clotharmor.json

 

This will at least give you an idea.

[suyashmshephertz]

Thanks guys!!!

I thought, Pixi.Js might be having some in-built feature that I am missing. But now I am clear.

[mwatt]

Pixi can certainly be used to create games, but it's focus is more on being a kick-ass rendering engine - which it is.  Having said that, you will find a lot of the "niceties" of some gaming engines just aren't available in Pixi.js - that's just not its job.

 

I'm thoroughly impressed with Pixi, and would be loathe to recommend anything else for what it does... but in your case you might want to have a look at Phaser.js, which is in fact a full-featured HTML5 gaming engine and probably structured more along the lines of what you are used to.  Please accept my pardon if you already know these things and have deliberately chosen Pixi.js for your project anyway.

[suyashmshephertz]

Pixi can certainly be used to create games, but it's focus is more on being a kick-ass rendering engine - which it is.  Having said that, you will find a lot of the "niceties" of some gaming engines just aren't available in Pixi.js - that's just not its job.

 

I'm thoroughly impressed with Pixi, and would be loathe to recommend anything else for what it does... but in your case you might want to have a look at Phaser.js, which is in fact a full-featured HTML5 gaming engine and probably structured more along the lines of what you are used to.  Please accept my pardon if you already know these things and have deliberately chosen Pixi.js for your project anyway.

 

Thanks for your reply

I have been checking out various game engines for HTML5. Phaser.js is a great engine. But currently I am trying to learn Pixi.Js. So, before writing my own game logic, I wanted to make sure no such feature exists in Pixi.Js. 

[suyashmshephertz]

 

I would suggest the following:

• create a child class from PIXI.Movieclip
• Add additional method as needed
• Adjust/overwrite the updateTransform method from parent

 

 

 

I generally extend Sprite, and do my own animation class.

It will be very helpful, if you guys can give me brief information about extending classes from Pixi.JS. Just a basic example

[xerver]

It will be very helpful, if you guys can give me brief information about extending classes from Pixi.JS. Just a basic example

 

Same way you extend any prototype in JavaScript:

function MySprite() {}MySprite.prototype = Object.create( PIXI.Sprite.prototype );MySprite.prototype.constructor = MySprite;MySprite.prototype.someOtherFunction = function() {};

[suyashmshephertz]

 

Same way you extend any prototype in JavaScript:

function MySprite() {}MySprite.prototype = Object.create( PIXI.Sprite.prototype );MySprite.prototype.constructor = MySprite;MySprite.prototype.someOtherFunction = function() {};

Thanks

[jelofsson]

Are there some documentation somewhere explaining how the movieClip object behavior works?

Like how you add textures and start/stop the animation of the movieClip?

[xerver]

Are there some documentation somewhere explaining how the movieClip object behavior works?

Like how you add textures and start/stop the animation of the movieClip?

 

http://www.goodboydigital.com/pixijs/docs/classes/MovieClip.html

[hubert]

I have been researching this topic by myself. I don't know if this helps but this is how i create a rotating coin like in mario with pixijs

var coin;                                        for(var i = 0; i < 10; i++){                                                var position = i * 46;                        var frame = new PIXI.Texture(PIXI.BaseTexture.fromImage('assets/images/world/objects/coin.png'));                        frame.setFrame(new PIXI.Rectangle( (i * 40), 0, 40, 40));                                                if(i === 0){                                                        coin = new PIXI.Sprite(frame);                            coin.animation = {};                            coin.animation.frameNumber = 10;                            coin.animation.frames = [];                            coin.animation.frameCounter = 0;                        };                                                coin.animation.frames.push(frame);                    };                    coin._id = 'original player '; // + _sockets.io.engine.id;                    coin._class = 'player';                    coin.entity = true;                    coin.notMovable = true;                    coin.anchor = {};                    coin.anchor.x = 0.5;                    coin.anchor.y = 0.5;                    coin.position = {};                    coin.position.x = playerOptions.position.x + 200;                    coin.position.y = playerOptions.position.y + 150;                    coin.width = 30;                    coin.height = 30;                    coin.collision = {};                    coin.collision.mapCollision = false;                    coin.collision.entityCollision = false;                                        coin.animation.looper = setInterval(function(){                                                var texture = coin.animation.frames;                        var counter = coin.animation.frameCounter;                         coin.setTexture(coin.animation.frames[coin.animation.frameCounter]);                        coin.animation.frameCounter++;                                                if(coin.animation.frameCounter === coin.animation.frames.length){                                                        coin.animation.frameCounter = 0;                                                    };                    }, 50);                    _camera.entityCameras[4].addChild(coin);

Animation can be called by interval or by some other method during the game loop.

 

 

 

http://www.sevenative.com

[thomfoolery]

 nice hubert
 
I'm new to Pixi, but I've been animating my sprite animations the same way, setFrame on a Texture element and incrementing an index based on time lapsed since the last reqAnimFrame (allows me to speed up and slow down animations).
 
For my purposes it doesn't seem to have much of a negative effect on performance, but I am interested, are there things I should be aware of?
Are there more elegant solutions or optimizations I could be taking advantage of?

[d13]

Just for reference, I wrote a simple function called `addStatePlayer` that adds the following functionality to MovieClip sprites:

 

- fps control

- a `show` method for displaying single frames

- a `playSequence` method for playing any subset of frames inside a single larger frameset.

 

https://gist.github.com/kittykatattack/13a53d0dbc32ce2a0a17

 

Here's how to use it:

//Add the advanced state player to a PIXI.MovieClipaddStatePlayer(movieClipSprite);//Set the frame ratemovieClipSprite.fps = 12;//Play any sequence of frames//(provide a start frame and end frame as a two element array)movieClipSprite.playSequence([startFrameNumber, endFrameNumber]);//Show a specific frame (this is a convenience wrapper for `gotoAndStop`)movieClipSprite.show(anyFrameNumber);

[hubert]

@

 

 nice hubert
 
I'm new to Pixi, but I've been animating my sprite animations the same way, setFrame on a Texture element and incrementing an index based on time lapsed since the last reqAnimFrame (allows me to speed up and slow down animations).
 
For my purposes it doesn't seem to have much of a negative effect on performance, but I am interested, are there things I should be aware of?
Are there more elegant solutions or optimizations I could be taking advantage of?

 

 

Hey!

 

Actually there is another way of creating an array of sprites. This is the code from a recent question about something else. 

var birdIdle = PIXI.BaseTextureCache[GAME.Assets.BIRD_IDLE];var partTexturebirdIdle0 = new PIXI.Texture(birdIdle, new PIXI.Rectangle(0, 0, 470, 470));var partTexturebirdIdle1 = new PIXI.Texture(birdIdle, new PIXI.Rectangle(470, 0, 470, 470));var partTexturebirdIdle2 = new PIXI.Texture(birdIdle, new PIXI.Rectangle(470 * 2, 0, 470, 470));var partTexturebirdIdle3 = new PIXI.Texture(birdIdle, new PIXI.Rectangle(470 * 3, 0, 470, 470));var partTexturebirdIdle4 = new PIXI.Texture(birdIdle, new PIXI.Rectangle(470 * 4, 0, 470, 470));var partTexturebirdIdle5 = new PIXI.Texture(birdIdle, new PIXI.Rectangle(470 * 5, 0, 470, 470));var partTexturebirdIdle6 = new PIXI.Texture(birdIdle, new PIXI.Rectangle(470 * 6, 0, 470, 470));var partTexturebirdIdle7 = new PIXI.Texture(birdIdle, new PIXI.Rectangle(470 * 7, 0, 470, 470));var partTexturebirdIdle8 = new PIXI.Texture(birdIdle, new PIXI.Rectangle(470 * 8, 0, 470, 470));var texturesBirdIdle = [partTexturebirdIdle0, partTexturebirdIdle1, partTexturebirdIdle2,partTexturebirdIdle3, partTexturebirdIdle4, partTexturebirdIdle5,partTexturebirdIdle6, partTexturebirdIdle7, partTexturebirdIdle8];var birdIdleMC_0 = new PIXI.MovieClip(texturesBirdIdle);birdIdleMC_0.play();this.container.addChild(birdIdleMC_0);

The problem is that you can't reuse same spries in different orders with the abouve technique but combining the two elements you get a nifty way to manipulate your sprites animation.

 

I think that this method is even better since the sprite is reduced to only what you need and in my example I was setting a frame. I'm not sure, but I think that frame is not cropping the texture in pixi js memory so I'm going to swich to this method in my project.

 

 

As for the performance question. From what I have found on the web. set interval or timeout are not affecting the performance like they used to so you can go forward with this technique.

 

 

Yeah as for other solutions and techniques iIwas digging into this subject for quite a while.

 

You can do clipping which is a technique that is not natively implemented in pixi js, by setting visible = false to sprites that are outside of you view. TRUST ME THIS SPEEDS THE RENDERING A LOT!

 

below you can fine a example map from my game. It has rain (sprite batch), dynamic map movement, plenty of additional sprites, rich interchangable tiles that are prerendered and dynamic sprite transparency when player is behind an object.

 

AND IT ALL RUNS AT 60fps.

 

https://www.youtube.com/watch?v=K8oGU7XEHHU

 

 

Follow me on my twitter and I'll follow you back, so we can have a private converstion.

 

https://twitter.com/sevenative