This article details various ways you can play with PIXI's Animated Sprites.
Simply put, "An AnimatedSprite is a simple way to display an animation depicted by a list of textures." - PIXI v4 Documentation.
Basically, that means instead of our 2d sprites being 'static' single-faced entities, PIXI Animated Sprites allows us to display sprites with animations, hence bringing our sprites into life.
There are actually multiple ways we can do it:
Our DEMO # 1 is fairly simple. We load a "CowGirl" sprite, with 10 Idle frames. All of these PNG images are stored in the directory "./game_assets/cowgirl/".
Check out the fully-commented code below about the process.
/*
Get the latest minified PIXI v4
@ http://pixijs.download/dev/pixi.min.js
Coding style note:
- I used 'let' keyword for EcmaScript 6 proper scoping
- @ https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/let
- You can substitute it with 'var' anyways, no problem.
- I've also used template literals for decent string structure
- @ https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals
*/
// container object for first demo.
let DEMO1 = {};
// Initialize automated PIXI garbage collection.
PIXI.GC_MODES.DEFAULT = PIXI.GC_MODES.AUTO;
// Set-up our renderer view.
DEMO1.PIXI_APPLICATION = new PIXI.Application();
DEMO1.PIXI_APPLICATION.renderer = PIXI.autoDetectRenderer(
300,
300,
{
antialias: true,
transparent: false,
resolution: 1,
autoResize: true
}
);
DEMO1.PIXI_APPLICATION.renderer.view.style.border = "1px dashed black";
DEMO1.PIXI_APPLICATION.renderer.backgroundColor = 0x000000;
DEMO1.PIXI_APPLICATION.renderer.view.style.position = "static";
DEMO1.PIXI_APPLICATION.renderer.view.style.display = "block";
let DEMO1_DIV = document.getElementById("DEMO1_DIV");
DEMO1_DIV.appendChild(DEMO1.PIXI_APPLICATION.view);
// Create temporary array to store all 'frame objects'.
let Temp_FrameSet = [];
// Temp var for total number of frames
let maxFrames = 10;
// Iterates from 1 to 10.
// Take note of variable 'i' and 'maxFrames'
for (let i = 1; i <= maxFrames; i++){
// Temporary 'frame object' now created.
// 1.) Its texture is directly loaded from an Image.
// - our sprite model is a cowgirl,
// - with an 'Idle' animation where she just stands comfortably.
// 2.) Take note of the 'time' property,
// - it is length in milliseconds of how long to display the frame.
// - we use 50ms, but you can experiment with higher/lower values.
Temp_Frame = {
texture: PIXI.Texture.fromImage(`./game_assets/cowgirl/Idle (${i}).png`),
time: 50
};
// Temporary 'frame object' now pushed to the Array.
Temp_FrameSet.push(Temp_Frame);
}
// Create a temporary sprite.
let TempSprite = new PIXI.extras.AnimatedSprite(Temp_FrameSet);
// Start its animation!
TempSprite.play();
// Scale it down to fit the 300 x 300 stage (lol)
TempSprite.scale.set(0.5, 0.5);
// Finally, add her to our stage!
DEMO1.PIXI_APPLICATION.stage.addChild(TempSprite);