PIXI.AnimatedSprite
class AnimatedSprite extends PIXI.Sprite
An AnimatedSprite is a simple way to display an animation depicted by a list of textures.
let alienImages = ["image_sequence_01.png","image_sequence_02.png","image_sequence_03.png","image_sequence_04.png"];
let textureArray = [];
for (let i=0; i < 4; i++)
{
let texture = PIXI.Texture.from(alienImages[i]);
textureArray.push(texture);
};
let animatedSprite = new PIXI.AnimatedSprite(textureArray);
The more efficient and simpler way to create an animated sprite is using a PIXI.Spritesheet containing the animation definitions:
PIXI.Loader.shared.add("assets/spritesheet.json").load(setup);
function setup() {
let sheet = PIXI.Loader.shared.resources["assets/spritesheet.json"].spritesheet;
animatedSprite = new PIXI.AnimatedSprite(sheet.animations["image_sequence"]);
...
}
Constructor
new PIXI.AnimatedSprite(textures: PIXI.Texture[] | PIXI.AnimatedSprite.FrameObject[], autoUpdate: boolean) → {}
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
textures | PIXI.Texture[] | PIXI.AnimatedSprite.FrameObject[] |
An array of PIXI.Texture or frame objects that make up the animation. |
||
autoUpdate | boolean |
<optional> |
true |
Whether to use PIXI.Ticker.shared to auto update animation time. |
Summary
Properties from AnimatedSprite
number |
|
boolean |
Whether to use PIXI.Ticker.shared to auto update animation time. |
number |
|
boolean |
|
() => void |
|
(currentFrame: number) => void |
|
() => void |
|
boolean |
|
PIXI.Texture[] | PIXI.AnimatedSprite.FrameObject[] |
The array of textures used for this AnimatedSprite. |
number |
|
boolean |
Update anchor to Texture's defaultAnchor when frame changes. |
Methods from AnimatedSprite
PIXI.AnimatedSprite |
|
PIXI.AnimatedSprite |
|
void |
|
void |
|
void |
|
void |
Plays the AnimatedSprite. |
void |
Stops the AnimatedSprite. |
void |
|
Properties inherited from Sprite
PIXI.ObservablePoint |
|
PIXI.BLEND_MODES |
|
number |
The height of the sprite, setting this will actually modify the scale to achieve the value set. |
boolean |
|
string |
|
boolean |
If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. |
PIXI.Texture |
The texture that the sprite is using. |
number |
The tint applied to the sprite. This is a hex value. |
number |
The width of the sprite, setting this will actually modify the scale to achieve the value set. |
PIXI.ObservablePoint |
|
number |
|
number |
|
HTMLCanvasElement |
|
number |
|
Float32Array |
|
Float32Array |
|
Properties inherited from Container
T[] |
|
boolean |
|
boolean |
|
boolean |
Should children be sorted by zIndex at the next updateTransform call. |
Properties inherited from DisplayObject
Methods inherited from Sprite
void |
Calculates worldTransform * vertices for a non texture with a trim. store it in vertexTrimmedData. |
void |
Calculates worldTransform * vertices, store it in vertexData. |
boolean |
|
PIXI.Rectangle |
|
void |
Updates the bounds of the sprite. |
void |
When the texture is updated, this event will fire to update the scale and frame. |
void |
|
Methods inherited from Container
Methods inherited from DisplayObject
Inherited Events from Container
Inherited Events from DisplayObject
|
|
|
|
|
|
Capture phase equivalent of |
|
|
|
|
|
Capture phase equivalent of |
|
Fired when the mouse pointer is moved over a DisplayObject and its descendant's hit testing boundaries. |
|
Capture phase equivalent of |
|
Fired when the mouse pointer exits a DisplayObject and its descendants. |
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
Fired when the pointer is moved over a DisplayObject and its descendant's hit testing boundaries. |
|
Capture phase equivalent of |
|
Fired when the pointer leaves the hit testing boundaries of a DisplayObject and its descendants. |
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
|
|
|
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
|
|
Capture phase equivalent of |
|
PIXI.FederatedWheelEvent |
Fired when a the user scrolls with the mouse cursor over a DisplayObject. |
PIXI.FederatedWheelEvent |
Capture phase equivalent of |
Public Properties
animationSpeed: number = 1
The speed that the AnimatedSprite will play at. Higher is faster, lower is slower.
autoUpdate: boolean
Whether to use PIXI.Ticker.shared to auto update animation time.
loop: boolean = true
Whether or not the animate sprite repeats after playing.
onComplete: () => void
User-assigned function to call when an AnimatedSprite finishes playing.
animation.onComplete = function () {
// finished!
};
onFrameChange: (currentFrame: number) => void
User-assigned function to call when an AnimatedSprite changes which texture is being rendered.
animation.onFrameChange = function () {
// updated!
};
onLoop: () => void
User-assigned function to call when loop
is true, and an AnimatedSprite is played and
loops around to start again.
animation.onLoop = function () {
// looped!
};
playing: boolean
Indicates if the AnimatedSprite is currently playing.
textures: PIXI.Texture[] | PIXI.AnimatedSprite.FrameObject[]
The array of textures used for this AnimatedSprite.
totalFrames: number = 0
The total number of frames in the AnimatedSprite. This is the same as number of textures assigned to the AnimatedSprite.
updateAnchor: boolean = false
Update anchor to Texture's defaultAnchor when frame changes.
Useful with sprite sheet animations created with tools. Changing anchor for each frame allows to pin sprite origin to certain moving feature of the frame (e.g. left foot).
Note: Enabling this will override any previously set anchor
on each frame change.
Public Methods
static fromFrames(frames: string[]) → {PIXI.AnimatedSprite}
A short hand way of creating an AnimatedSprite from an array of frame ids.
Name | Type | Description |
---|---|---|
frames | string[] |
The array of frames ids the AnimatedSprite will use as its texture frames. |
Type | Description |
---|---|
PIXI.AnimatedSprite |
|
static fromImages(images: string[]) → {PIXI.AnimatedSprite}
A short hand way of creating an AnimatedSprite from an array of image ids.
Name | Type | Description |
---|---|---|
images | string[] |
The array of image urls the AnimatedSprite will use as its texture frames. |
Type | Description |
---|---|
PIXI.AnimatedSprite |
The new animate sprite with the specified images as frames. |
destroy(options: object | boolean) → {void}
Stops the AnimatedSprite and destroys it.
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
options | object | boolean |
<optional> |
Options parameter. A boolean will act as if all options have been set to that value. |
|
options.children | boolean |
<optional> |
false |
If set to true, all the children will have their destroy method called as well. 'options' will be passed on to those calls. |
options.texture | boolean |
<optional> |
false |
Should it destroy the current texture of the sprite as well. |
options.baseTexture | boolean |
<optional> |
false |
Should it destroy the base texture of the sprite as well. |
Type | Description |
---|---|
void |
gotoAndPlay(frameNumber: number) → {void}
Goes to a specific frame and begins playing the AnimatedSprite.
Name | Type | Description |
---|---|---|
frameNumber | number |
Frame index to start at. |
Type | Description |
---|---|
void |
gotoAndStop(frameNumber: number) → {void}
Stops the AnimatedSprite and goes to a specific frame.
Name | Type | Description |
---|---|---|
frameNumber | number |
Frame index to stop at. |
Type | Description |
---|---|
void |
update(deltaTime: number) → {void}
Updates the object transform for rendering.
Name | Type | Description |
---|---|---|
deltaTime | number |
Time since last tick. |
Type | Description |
---|---|
void |