AnimatedSprite

A simple way to display an animation depicted by a list of textures.

I recommend using spritesheets created by TexturePacker (they have a great tutorial on it). If you don’t want to use spritesheets, you can simply just pass in an array of your desired textures.

PIXI.AnimatedSprite description from PixiJS

source

An AnimatedSprite is a simple way to display an animation depicted by a list of textures.

import { AnimatedSprite, Texture } from 'pixi.js';

const alienImages = [
    'image_sequence_01.png',
    'image_sequence_02.png',
    'image_sequence_03.png',
    'image_sequence_04.png',
];
const textureArray = [];

for (let i = 0; i < 4; i++)
{
    const texture = Texture.from(alienImages[i]);
    textureArray.push(texture);
}

const animatedSprite = new AnimatedSprite(textureArray);

The more efficient and simpler way to create an animated sprite is using a {@link Spritesheet} containing the animation definitions:

Usage

<script>
  import * as PIXI from 'pixi.js'
  import { AnimatedSprite } from 'svelte-pixi'
</script>

<AnimatedSprite
  x={360}
  y={200}
  textures={[
    PIXI.Texture.from('adventurer-idle-00.png'),
    PIXI.Texture.from('adventurer-idle-01.png'),
    PIXI.Texture.from('adventurer-idle-02.png'),
  ]}
  playing
  animationSpeed={0.1}
  anchor={0.5}
  scale={3}
/>

<script>
  import * as PIXI from 'pixi.js'
  import { AnimatedSprite } from 'svelte-pixi/svelte-4'
</script>

<AnimatedSprite
  x={360}
  y={200}
  textures={[
    PIXI.Texture.from('adventurer-idle-00.png'),
    PIXI.Texture.from('adventurer-idle-01.png'),
    PIXI.Texture.from('adventurer-idle-02.png'),
  ]}
  playing
  animationSpeed={0.1}
  anchor={0.5}
  scale={3}
/>

Multiple Animations

Svelte 5
Svelte 4 (deprecated)

<script>
  import { AnimatedSprite } from 'svelte-pixi'
  import { Assets } from 'pixi.js'

  // loaded from parent <AssetsLoader />
  const spritesheet = Assets.get('/assets/adventurer-spritesheet.json')
  let textures = spritesheet.animations['adventurer-idle']

  function changeAnimation() {
    // pick an an animation from the spritesheet at random
    const keys = Object.keys(spritesheet.animations)
    const randomIndex = Math.floor(Math.random() * keys.length)
    textures = spritesheet.animations[keys[randomIndex]]
  }
</script>

<AnimatedSprite
  {textures}
  x={360}
  y={200}
  playing
  animationSpeed={0.1}
  anchor={0.5}
  scale={3}
  onloop={changeAnimation}
/>

<script>
  import { AnimatedSprite } from 'svelte-pixi/svelte-4'
  import { Assets } from 'pixi.js'

  // loaded from parent <AssetsLoader />
  const spritesheet = Assets.get('/assets/adventurer-spritesheet.json')
  let textures = spritesheet.animations['adventurer-idle']

  function changeAnimation() {
    // pick an an animation from the spritesheet at random
    const keys = Object.keys(spritesheet.animations)
    const randomIndex = Math.floor(Math.random() * keys.length)
    textures = spritesheet.animations[keys[randomIndex]]
  }
</script>

<AnimatedSprite
  {textures}
  x={360}
  y={200}
  playing
  animationSpeed={0.1}
  anchor={0.5}
  scale={3}
  on:loop={changeAnimation}
/>

API

Svelte 5
Svelte 4 (deprecated)

Props

* denotes required

Name	Description
textures*	`PIXI.Texture<PIXI.TextureSource<any>>[]PIXI.FrameObject[]` The array of textures used for this AnimatedSprite.
accessible	`boolean` Flag for if the object is accessible. If true AccessibilityManager will overlay a shadow div with attributes set
accessibleChildren	`boolean` Setting to false will prevent any children inside this container to be accessible. Defaults to true.
accessibleHint	`nullstring` Sets the aria-label attribute of the shadow div
accessiblePointerEvents	`"visible""auto""none""visiblePainted""visibleFill""visibleStroke""painted""fill""stroke""all""inherit"` Specify the pointer-events the accessible div will use Defaults to auto.
accessibleTitle	`nullstring` Sets the title attribute of the shadow div If accessibleTitle AND accessibleHint has not been this will default to 'container [tabIndex]'
accessibleType	`string` Specify the type of div the accessible layer is. Screen readers treat the element differently depending on this type. Defaults to button.
alpha	`number`
anchor	`number[number, number]{ x: number; y: number }PIXI.Point` The anchor sets the origin point of the sprite. The default value is taken from the {@link Texture} and passed to the constructor. The default is `(0,0)`, this means the sprite's origin is the top left. Setting the anchor to `(0.5,0.5)` means the sprite's origin is centered. Setting the anchor to `(1,1)` would mean the sprite's origin point will be the bottom right corner. If you pass only single parameter, it will set both x and y to the same value as shown in the example below.
angle	`number` The angle of the object in degrees. 'rotation' and 'angle' have the same effect on a display object; rotation is in radians, angle is in degrees.
animationSpeed	`number` The speed that the AnimatedSprite will play at. Higher is faster, lower is slower.
autoUpdate	`boolean` Whether to use Ticker.shared to auto update animation time.
blendMode	`"none""inherit""normal""add""multiply""screen""darken""lighten""erase""color-dodge""color-burn""linear-burn""linear-dodge""linear-light""hard-light""soft-light""pin-light""difference""exclusion""overlay""saturation""color""luminosity""normal-npm""add-npm""screen-npm""subtract""divide""vivid-light""hard-mix""negation""min""max"`
boundsArea	`PIXI.Rectangle` An optional bounds area for this container. Setting this rectangle will stop the renderer from recursively measuring the bounds of each children and instead use this single boundArea. This is great for optimisation! If for example you have a 1000 spinning particles and you know they all sit within a specific bounds, then setting it will mean the renderer will not need to measure the 1000 children to find the bounds. Instead it will just use the bounds you set.
cacheAsBitmap	`boolean` Legacy property for backwards compatibility with PixiJS v7 and below. Use `cacheAsTexture` instead.
cacheAsTexture	`PIXI.CacheAsTextureOptionsboolean`
cullable	`boolean` Should this object be rendered if the bounds of this object are out of frame? Culling has no effect on whether updateTransform is called.
cullableChildren	`boolean` Determines if the children to the container can be culled Setting this to false allows PixiJS to bypass a recursive culling function Which can help to optimize very complex scenes
cullArea	`PIXI.Rectangle` If set, this shape is used for culling instead of the bounds of this object. It can improve the culling performance of objects with many children. The culling area is defined in local space.
cursor	`string` The cursor preferred when the mouse pointer is hovering over.
effects	`PIXI.Effect[]`
eventMode	`"auto""none""passive""static""dynamic"` The mode of interaction for this object
filterArea	`PIXI.Rectangle`
filters	`PIXI.FilterPIXI.Filter[]`
height	`number` The height of the Container, setting this will actually modify the scale to achieve the value set.
hitArea	`nullPIXI.IHitArea` The hit-area specifies the area for which pointer events should be captured by this event target.
instance	`T`
interactive	`boolean` Whether this event target should fire UI events.
interactiveChildren	`boolean` Whether this event target has any children that need UI events. This can be used optimize event propagation.
isRenderGroup	`boolean`
label	`string`
loop	`boolean` Whether or not the animate sprite repeats after playing.
mask	`numberPIXI.Container<PIXI.ContainerChild>Partial<PIXI.MaskOptionsAndMask>`
name	`string`
onadded	`() => void` Called when the instance is added to its parent or stage
onclick	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Handler for 'click' event
oncomplete	`() => void` Alias for onComplete
onComplete	`() => void` User-assigned function to call when an AnimatedSprite finishes playing.
oncreate	`(instance: T) => void` Called on creation of the component. You can use this to do any setup on the instance directly
onframechange	`(currentFrame: number) => void` Alias for onFrameChange
onFrameChange	`(currentFrame: number) => void` User-assigned function to call when an AnimatedSprite changes which texture is being rendered.
onglobalmousemove	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Handler for 'globalmousemove' event
onglobalpointermove	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Handler for 'globalpointermove' event
onglobaltouchmove	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Handler for 'globaltouchmove' event
onloop	`() => void` Alias for onLoop
onLoop	`() => void` User-assigned function to call when `loop` is true, and an AnimatedSprite is played and loops around to start again.
onmousedown	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Handler for 'mousedown' event
onmouseenter	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Handler for 'mouseenter' event
onmouseleave	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Handler for 'mouseleave' event
onmousemove	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Handler for 'mousemove' event
onmouseout	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Handler for 'mouseout' event
onmouseover	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Handler for 'mouseover' event
onmouseup	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Handler for 'mouseup' event
onmouseupoutside	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Handler for 'mouseupoutside' event
onpointercancel	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Handler for 'pointercancel' event
onpointerdown	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Handler for 'pointerdown' event
onpointerenter	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Handler for 'pointerenter' event
onpointerleave	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Handler for 'pointerleave' event
onpointermove	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Handler for 'pointermove' event
onpointerout	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Handler for 'pointerout' event
onpointerover	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Handler for 'pointerover' event
onpointertap	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Handler for 'pointertap' event
onpointerup	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Handler for 'pointerup' event
onpointerupoutside	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Handler for 'pointerupoutside' event
onremoved	`() => void` Called when the instance removed from its parent or stage
onrightclick	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Handler for 'rightclick' event
onrightdown	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Handler for 'rightdown' event
onrightup	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Handler for 'rightup' event
onrightupoutside	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Handler for 'rightupoutside' event
ontap	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Handler for 'tap' event
ontouchcancel	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Handler for 'touchcancel' event
ontouchend	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Handler for 'touchend' event
ontouchendoutside	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Handler for 'touchendoutside' event
ontouchmove	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Handler for 'touchmove' event
ontouchstart	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Handler for 'touchstart' event
pivot	`number[number, number]{ x: number; y: number }PIXI.Point` The center of rotation, scaling, and skewing for this display object in its local space. The `position` is the projection of `pivot` in the parent's local space. By default, the pivot is the origin (0, 0).
playing	`boolean` Indicates if the AnimatedSprite is currently playing.
position	`number[number, number]{ x: number; y: number }PIXI.Point` The coordinate of the object relative to the local coordinates of the parent.
renderable	`boolean` Can this object be rendered, if false the object will not be drawn but the transform will still be updated.
rotation	`number` The rotation of the object in radians. 'rotation' and 'angle' have the same effect on a display object; rotation is in radians, angle is in degrees.
roundPixels	`boolean` Whether or not to round the x/y position of the sprite.
scale	`number[number, number]{ x: number; y: number }PIXI.Point` The scale factors of this object along the local coordinate axes. The default scale is (1, 1).
skew	`number[number, number]{ x: number; y: number }PIXI.Point` The skew factor for the object in radians.
sortableChildren	`boolean`
tabIndex	`number`
visible	`boolean` The visibility of the object. If false the object will not be drawn, and the transform will not be updated.
width	`number` The width of the Container, setting this will actually modify the scale to achieve the value set.
x	`number` The position of the container on the x axis relative to the local coordinates of the parent. An alias to position.x
y	`number` The position of the container on the y axis relative to the local coordinates of the parent. An alias to position.y
zIndex	`number`

Snippets

Name	Type
children	`Snippet<[instance: T]>`

Props

Name	Description
anchor	`PointLike` The anchor sets the origin point of the text.
animationSpeed `1`	`number` 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
blendMode `'normal'`	`string` The blend mode to be applied to the sprite. Apply a value of 'normal' to reset the blend mode.
instance	`PIXI.AnimatedSprite` The PIXI.AnimatedSprite instance. Can be set or bound to.
loop `true`	`boolean` Whether or not the animate sprite repeats after playing.
playing `true`	`boolean` Plays the animation according to the textures
roundPixels	`boolean` If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. Advantages can include sharper image quality (like text) and faster rendering on canvas. The main disadvantage is movement of objects may appear less smooth.
textures `[]`	`PIXI.Texture<PIXI.Resource>[]PIXI.FrameObject[]` The array of textures to use

Additional props are passed on to Container

Slots

Name	Props	Fallback
default	`{}`

Events

Name	Type	Detail
added	`forwarded`
click	`forwarded`
complete	`dispatched`	`null`
create	`forwarded`
frameChange	`dispatched`	`null`
globalmousemove	`forwarded`
globalpointermove	`forwarded`
globaltouchmove	`forwarded`
loop	`dispatched`	`null`
mousedown	`forwarded`
mousemove	`forwarded`
mouseout	`forwarded`
mouseover	`forwarded`
mouseup	`forwarded`
mouseupoutside	`forwarded`
pointercancel	`forwarded`
pointerdown	`forwarded`
pointermove	`forwarded`
pointerout	`forwarded`
pointerover	`forwarded`
pointertap	`forwarded`
pointerup	`forwarded`
pointerupoutside	`forwarded`
removed	`forwarded`
removedFrom	`forwarded`
rightclick	`forwarded`
rightdown	`forwarded`
rightup	`forwarded`
rightupoutside	`forwarded`
tap	`forwarded`
touchcancel	`forwarded`
touchend	`forwarded`
touchendoutside	`forwarded`
touchmove	`forwarded`
touchstart	`forwarded`