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, AssetsLoader } from 'svelte-pixi'
</script>

<AssetsLoader assets={['/assets/adventurer-spritesheet.json']}>
  <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}
  />
</AssetsLoader>

Multiple Animations

<script>
  import { AnimatedSprite, AssetsLoader } 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}
  on:loop={changeAnimation}
/>

API

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	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 true	boolean Whether or not the animate sprite repeats after playing.
playing true	boolean 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	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