Animated Sprites w/ PIXI v4

This article details various ways you can play with PIXI's Animated Sprites.

What the hell are 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:

  1. Directly loading animation frames straight from images
  2. Using the PIXI Loader
  3. Using 1 spritesheet per unit animation.
  4. Using 1 spritesheet per unit
  5. Using 1 spritesheet for multiple units & animations


Demo # 1: Loading animation frames straight from images.

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);
                        
Articles
  1. @ BitBucket.io

Site Mirrors
  • @ BitBucket.io
  • @ GitHub.io
  • @ GitLab.io