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.

Spritesheet

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

<Loader resources={['/assets/adventurer-spritesheet.json']}>
  <AnimatedSprite
    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}
    x={200}
    y={200}
    anchor={0.5}
    scale={2}
  />
</Loader>

Multiple Animations from Spritesheet

<script>
  import { AnimatedSprite, Loader, getResource } from 'svelte-pixi'

  // loaded from parent <Loader />
  const { spritesheet } = getResource('/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}
  playing
  animationSpeed={0.1}
  x={200}
  y={200}
  anchor={0.5}
  scale={2}
  on:loop={changeAnimation}
/>

Component API

Props

Name	Type	Default	Description
anchor	`PointLike`		The anchor sets the origin point of the text.
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
blendMode			The blend mode to be applied to the sprite. Apply a value of PIXI.BLEND_MODES.NORMAL to reset the blend mode.
instance	`PIXI.AnimatedSprite`		The PIXI.AnimatedSprite instance. Can be set or bound to.
loop	`boolean`	`true`	Whether or not the animate sprite repeats after playing.
playing	`boolean`	`true`	Plays the animation according to the textures
pluginName	`string`		Plugin that is responsible for rendering this element.
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`
create	`forwarded`
frameChange	`dispatched`
loop	`dispatched`
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`

Next Application