Using PIXI AnimatedSprite

 

Using PIXI Animated Sprite

 

In this tutorial we will go over how use PIXI’s built in Animated Sprite functionality.

What we will cover:

To note I am using TypeScript for this project, however it should conform easily to regular written javascript as well.I am also using a custom PIXI project that I use for personal use, so some syntax may need to be adjusted to work for how your project is set up.

Setting Up Our Loader:

  • We start by loading our asset in preload- Please note once again this is being done in my specific build which has a state system and a preload state. if you are following with a typical PIXI project you will need to use PIXI.loaders.Load()

preload() {
this.loader.add('explosionCandy', './assets/png/size2/explosion.json');
this.loader.load();

}

For this example I am using assets found at https://opengameart.org/content/candy-pack-1 and using their explosion png’s.

Lets Break This Down:

  • Here we start by loading our json file of the images we want to use for the animation.

Creating Our Animation:
In this section we will set some values to our previously defined variables.

//Create a function to house your explosion functionality


explosion() {
let explosionTextures: Array<PIXI.Texture> = [];
for (let i = 0; i < 5; i++) {

let texture: PIXI.Texture = PIXI.Texture.fromFrame('explosionred' + (i + 1) + '.png'); explosionTextures.push(texture);

}

// create an explosion AnimatedSprite

let explosion = new PIXI.extras.AnimatedSprite(explosionTextures);
explosion.x = this.game.width * 0.5;

explosion.y = this.game.height * 0.5;

explosion.anchor.set(0.5);

explosion.loop = false;

explosion.animationSpeed = 0.30;

this.addChild(explosion);

explosion.play();

explosion.onComplete = () => {

explosion.destroy();

};

}

Let’s Break This Down:

  • First of all we define a variable to hold our texture array. Since I am using TypeScript this is type declared as an array of PIXI.Texture;
  • Next we create a for loop to loop through our preloaded json file, we add a texture for each object in the json file.we then push these textures to our array. The key ‘explosionred’ is the frame name inside the json atlas, then we add (i + 1) to increase the frame we are creating, and the ‘.png’ since they are all png files.
  • We then create our actual explosion by creating a variable which contains a PIXI Animated Sprite, we then pass our textures housed by our array
  • We set both x and y values for our explosion to the center of our game. We also set the anchor of the explosion to be at center.
  • We continue by setting the looping functionality to false, however if you want your animation to loop simply set to true. We also set the animation speed of our Animated Sprite.
  • We then add our explosion to our game stage(the syntax for this may look differently if you are using a project setup that is similar to the PIXi examples).Afterwards we set our animation to play.
  • I have added an onComplete function, once the animation has played once it will be destroyed.

Adding The Explosion Function To Game:


Create() {

this.explosion();

}

Let’s Break This Down:

  • All we have done here is called the explosion function inside our create function in our game state. When the game runs the explosion function will be called in the create and the animation will run.

Thats all there is to it!

Conclusion:

  • We learned how to setup and use PIXI AnimatedSprite from a JSON atlas.
  • We played the animation inside our game state.

Thank you very much for reading. Please stay tuned for upcoming tutorials.