instructions

After reading the book – Learn Pixi.js mentioned in the official tutorial, I am ready to write my thoughts. The content mentioned in the official tutorial is basically the first 4 chapters of the book, so I will start writing from chapter 5.

Animated sprites are sprites created using a series of slightly different images in sequence, which are then played frame by frame to create the illusion of movement.

In other words, use this image

To do that

To animate sprites we need to use PixiJS ‘AnimatedSprite method.

PIXI.extras.AnimatedSprite

Definition:

Method of creating an animation Sprite using a texture array.

Usage:

new PIXI.extras.AnimatedSprite(textures,autoUpdate)
Copy the code

Parameters:

The name of the type The default value describe
textures array Texture array with a series of slightly different images.
autoUpdate boolean true Used to determine whether to usePIXI.ticker.sharedAutomatically update the animation time.

Return value: Returns an object with properties and methods that control the Sprite.

Properties of the return value object:

The name of the type describe
animationSpeed number The playback speed of the animation Sprite. The higher the speed, the lower the speed, the default value is 1
currentFrame Number (read only) The current frame number being displayed
onComplete function whenloopProperties forfalseIs called when an animation Sprite finishes playing
playing Boolean Determines whether the current animation Sprite is playing
onFrameChange function Called when an animation Sprite changes the texture to render
loop boolean Whether the animation Sprite repeats after playing
onLoop function whenloopProperties fortrueIs called when
textures array An array of textures for this animated Sprite
totalFrames Number (read only) Total number of frames in an animation

Methods for returning value objects:

The name of the parameter describe
play Play animated sprites
gotoAndPlay frameNumber, number, the index of the start frame Go to a particular frame and start playing the animation Sprite
stop Stop playing animation sprites
gotoAndStop frameNumber, number type, stop frame index Go to a particular frame and stop playing the animation Sprite

Use the return value of these properties and methods, we can control animated Sprite, such as the animation spirit, set up the speed of the animation, set whether looping, etc., in addition, need to know is the PIXI. Extras. AnimatedSprite methods inherited from PIXI. Sprite method, So sprites can also use normal Sprite properties and methods, such as x, y, width, height, scale, rotation.

All right, so let’s try this out.


      
<html lang="zn">

<head>
    <meta charset="UTF-8">
    <title>Animated Sprite</title>
</head>

<body>
    <div id="px-render"></div>

    <script src="https://www.kkkk1000.com/js/pixi4.8.2.js"></script>
    <script>
        // Some parameters needed to create a Pixi application
        let option = {
            width: 400.height: 300.transparent: true,}// Create a Pixi application
        let app = new PIXI.Application(option);
        // Get the renderer
        let renderer = app.renderer;
        let playground = document.getElementById('px-render');
        // Add the canvas created by Pixi to the page
        playground.appendChild(renderer.view);

        // Set the alias
        let TextureCache = PIXI.utils.TextureCache;
        let Texture = PIXI.Texture;
        let Rectangle = PIXI.Rectangle;
        let AnimatedSprite = PIXI.extras.AnimatedSprite;

        // Address of Sprite image to load (the image server has done cross-domain processing)
        let imgURL = "https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/1/14/16849ce12c0e953a~tplv-t2oaga2asx-image.image";

        // Load the image, and then execute the setup function
        PIXI.loader.add(imgURL).load(setup);

        function setup() {
            // Get the texture
            let base = TextureCache[imgURL];

            // First texture
            let texture0 = new Texture(base);
            texture0.frame = new Rectangle(0.0.80.143);
            // Second texture
            let texture1 = new Texture(base);
            texture1.frame = new Rectangle(80.0.80.143);
            // The third texture
            let texture2 = new Texture(base);
            texture2.frame = new Rectangle(160.0.80.143);
            // The fourth texture
            let texture3 = new Texture(base);
            texture3.frame = new Rectangle(240.0.80.143);

            // Create a texture array
            let textures = [texture0, texture1, texture2, texture3];
            // Create an animation Sprite
            let pixie = new PIXI.extras.AnimatedSprite(textures);
            // Set the speed of the Sprite
            pixie.animationSpeed = 0.1;

            // Add the Sprite to the stage
            app.stage.addChild(pixie);
            // Play the animation Sprite
            pixie.play();
        }
    </script>
</body>

</html>
Copy the code

See the effect

In the example above, creating a texture array seems a bit cumbersome. To solve this problem, we can use a library called SpriteUtilities, which contains many useful functions for creating Pixi sprites and making them easier to use.

Installation:

You can import js files directly with script tags

<script src="https://www.kkkk1000.com/js/spriteUtilities.js"></script>
Copy the code

Once installed, we need to create a new instance as follows

let su = new SpriteUtilities(PIXI);
Copy the code

All methods can then be accessed using su objects.

What we need here is the Filmstrip method of the SU object.

Definition:

The Filmstrip method automatically converts Sprite images into an array of textures that can be used to make sprites

Usage:

su.filmstrip("anyTilesetImage.png", frameWidth, frameHeight, optionalPadding);
Copy the code

Parameters:

The name of the type describe
anyTilesetImage string Sprite map path
frameWidth number Width per frame in pixels
frameHeight number Height per frame (in pixels)
optionalPadding number The amount of padding around each frame (optional, in pixels)

The return value:

Returns an array of textures that can be used to animate sprites.

Now let’s rewrite the example code using SpriteUtilities.


      
<html lang="zn">

<head>
    <meta charset="UTF-8">
    <title>Animated Sprite</title>
</head>

<body>
    <div id="px-render"></div>

    <script src="https://www.kkkk1000.com/js/pixi4.8.2.js"></script>
    <script src="https://www.kkkk1000.com/js/spriteUtilities.js"></script>
    <script>
        // Some parameters needed to create a Pixi application
        let option = {
            width: 400.height: 300.transparent: true,}// Create a Pixi application
        let app = new PIXI.Application(option);
        // Get the renderer
        let renderer = app.renderer;
        let playground = document.getElementById('px-render');
        // Add the canvas created by Pixi to the page
        playground.appendChild(renderer.view);

        let su = new SpriteUtilities(PIXI);
        // Address of Sprite image to load (the image server has done cross-domain processing)
        let imgURL = "https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/1/14/16849ce12c0e953a~tplv-t2oaga2asx-image.image";
        PIXI.loader.add(imgURL).load(setup);

        function setup() {
            // Create a texture array
            let frames = su.filmstrip(imgURL, 80.143);
            // Create an animation Sprite
            let pixie = new PIXI.extras.AnimatedSprite(frames);
            // Set the speed of the Sprite
            pixie.animationSpeed = 0.1;

            // Add the Sprite to the stage
            app.stage.addChild(pixie);
            // Play the animation Sprite
            pixie.play();
        }
    </script>
</body>

</html>
Copy the code

See the effect

The Filmstrip method automatically converts the entire Sprite image into an array of textures that can be used to animate sprites. But what if we only want to use some of the frames in the Sprite image? This is where the frames method comes in.

Definition:

The Frames method uses a set of subframes from the Sprite image to create a texture array.

Usage:

su.frames(source, coordinates, frameWidth, frameHeight)
Copy the code

Parameters:

The name of the type describe
source string Sprite map path
coordinates array A two-dimensional array containing the X and y coordinates of each frame
frameWidth number Width per frame in pixels
frameHeight number Per frame and height (in pixels)

Return value: Returns an array of textures that can be used to animate sprites.

Sample code:


      
<html lang="zn">

<head>
    <meta charset="UTF-8">
    <title>Animated Sprite</title>
</head>

<body>
    <div id="px-render"></div>

    <script src="https://www.kkkk1000.com/js/pixi4.8.2.js"></script>
    <script src="https://www.kkkk1000.com/js/spriteUtilities.js"></script>
    <script>
        // Some parameters needed to create a Pixi application
        let option = {
            width: 400.height: 300.transparent: true,}// Create a Pixi application
        let app = new PIXI.Application(option);
        // Get the renderer
        let renderer = app.renderer;
        let playground = document.getElementById('px-render');
        // Add the canvas created by Pixi to the page
        playground.appendChild(renderer.view);

        let su = new SpriteUtilities(PIXI);
        // Address of Sprite image to load (the image server has done cross-domain processing)
        let imgURL = "https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/1/14/16849ce12c0e953a~tplv-t2oaga2asx-image.image";

        PIXI.loader.add(imgURL).load(setup);
        function setup() {
            // Create a texture array
            let frames = su.frames(imgURL, [[0.0], [80.0], [160.0], [240.0]], 80.143);
            // Create an animation Sprite
            let pixie = new PIXI.extras.AnimatedSprite(frames);
            // Set the speed of the Sprite
            pixie.animationSpeed = 0.1;

            // Add the Sprite to the stage
            app.stage.addChild(pixie);
            // Play the animation Sprite
            pixie.play();
        }
    </script>
</body>

</html>
Copy the code

See the effect

In addition to the methods mentioned above, you can also create animated sprites using texture stickers.

Use stick atlas texture to create animated Sprite, it is first through json file, load all the texture, and then put the need of texture in an array, finally, when the array parameters to PIXI. Extras. AnimatedSprite method, to create animated Sprite.

Code:


      
<html lang="zn">

<head>
    <meta charset="UTF-8">
    <title>Animated Sprite</title>
</head>

<body>
    <div id="px-render"></div>

    <script src="https://www.kkkk1000.com/js/pixi4.8.2.js"></script>
    <script>
        // Some parameters needed to create a Pixi application
        let option = {
            width: 400.height: 300.transparent: true,}// Create a Pixi application
        let app = new PIXI.Application(option);
        // Get the renderer
        let renderer = app.renderer;
        let playground = document.getElementById('px-render');
        // Add the canvas created by Pixi to the page
        playground.appendChild(renderer.view);

        // The address of the texture patch atlas to load
        let textureURL = "https://www.kkkk1000.com/images/learnPixiJS-AnimatedSprite/dnf.json";

        // Load the texture map set and execute the setup function after loading
        PIXI.loader.add(textureURL).load(setup);

        function setup() {
            let id = PIXI.loader.resources[textureURL].textures;

            // Create a texture array
            let frames = [
                id["dnf0.png"],
                id["dnf1.png"],
                id["dnf2.png"],
                id["dnf3.png"]].// Create an animation Sprite
            let pixie = new PIXI.extras.AnimatedSprite(frames);
            // Set the speed of the Sprite
            pixie.animationSpeed = 0.1;

            // Add the Sprite to the stage
            app.stage.addChild(pixie);
            // Play the animation Sprite
            pixie.play();
        }
    </script>
</body>

</html>
Copy the code

See the effect

The above code creates an array of textures by placing them one by one in the array. If there are fewer textures, it is fine. If there are more textures, what is more? What if there were 100? One by one is too much trouble, so instead we can use the frameSeries method provided in the SpriteUtilities library.

Definition:

The frameSeries method creates an animation Sprite using a series of numbered frame ids from a loaded texture patch atlas.

Usage:

su.frameSeries(startNumber, endNumber, baseName, extension)
Copy the code

Parameters:

The name of the type describe
startNumber number Start frame sequence number (default is 0)
endNumber number End frame sequence number (default is 1)
baseName string Optional base file name
extension string Optional file extension

Return value: Returns an array of textures that can be used to animate sprites.

Note: When using the frameSeries method, make sure that the name of each frame is defined in order in the JSON file, such as frame0.png frame1.png frame2.png. Because the source code for the frameSeries method is written like this

 frameSeries(startNumber = 0, endNumber = 1, baseName = "", extension = "") {
   // Create an array to store the frame names
   let frames = [];

   for (let i = startNumber; i < endNumber + 1; i++) {
     let frame = this.TextureCache[`${baseName + i + extension}`];
     frames.push(frame);
   }
   return frames;
 }
Copy the code

The source code actually uses the for loop to concatenate frame names. So make sure the frame names are in order, otherwise you won’t get them.

So let’s try the frameSeries method.


      
<html lang="zn">

<head>
    <meta charset="UTF-8">
    <title>Animated Sprite</title>
</head>

<body>
    <div id="px-render"></div>

    <script src="https://www.kkkk1000.com/js/pixi4.8.2.js"></script>
    <script src="https://www.kkkk1000.com/js/spriteUtilities.js"></script>
    <script>
        // Some parameters needed to create a Pixi application
        let option = {
            width: 400.height: 300.transparent: true,}// Create a Pixi application
        let app = new PIXI.Application(option);
        // Get the renderer
        let renderer = app.renderer;
        let playground = document.getElementById('px-render');
        // Add the canvas created by Pixi to the page
        playground.appendChild(renderer.view);

        let su = new SpriteUtilities(PIXI);
        // The address of the texture patch atlas to load
        let textureURL = "https://www.kkkk1000.com/images/learnPixiJS-AnimatedSprite/dnf.json";

        PIXI.loader.add(textureURL).load(setup);
        function setup() {
            // Create a texture array
            debugger;
            let frames = su.frameSeries(0.7."dnf".".png");
            // Create an animation Sprite
            let pixie = new PIXI.extras.AnimatedSprite(frames);
            // Set the speed of the Sprite
            pixie.animationSpeed = 0.1;

            // Add the Sprite to the stage
            app.stage.addChild(pixie);
            // Play the animation Sprite
            pixie.play();
        }
    </script>
</body>

</html>
Copy the code

See the effect

Note version issues: 1, PIXI. Extras. AnimatedSprite this method call PIXI. So extras. MovieClip, is in the modified version 2, in this paper, using PixiJS version is 4.8.2 example code, so there is no problem, If you found in the use process call PIXI extras. AnimatedSprite this method has a problem, you can check the version is correct.

SpriteUtilities supports PixiJS version 3.0.11. SpriteUtilities uses pixi.extras.movieclip methods, so if you use a higher version of PixiJS, You need to modify the method alias in SpriteUtilities.

In spriteUtilities. Js file need to renderingEngine. Extras. MovieClip to renderingEngine. Extras. AnimatedSprite, The renderingEngine. ParticleContainer to PIXI. Particles. ParticleContainer.

This spriteutilities.js is the modified version.

You can also use a lower version of PixiJS without having to change the spriteutilities.js code.

conclusion

Animation sprites are frame-by-frame animations that play images frame by frame to create the illusion of motion.

This article discusses some ways to create animated sprites and how to use them.

If there are mistakes in the article, please also point out small partners, thank you very much.

Next, learn about PixiJS – Sprite states