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 codeParameters:
| 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 codeSee 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 codeOnce installed, we need to create a new instance as follows
let su = new SpriteUtilities(PIXI);
Copy the codeAll 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 codeParameters:
| 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 codeSee 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 codeParameters:
| 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 codeSee 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 codeSee 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 codeParameters:
| 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 codeThe 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 codeSee 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