Skip to content
Svelte Pixi

v7.0.0

Loader -> AssetsLoader

PIXI.Loader has been replaced by PIXI.Assets so the Loader component has been replaced by AssetsLoader. It works similarly but has a few notable differences:

  • The resources prop is now assets. It accepts an array of urls or objects matching the PIXI.UnresolvedAssetObject type.
  • getResource() has been removed, use PIXI.Assets.get() instead
  • getLoader() has been removed, use PIXI.Assets instead
  • If you need to call PIXI.Assets.init(config), it should be done before rendering this component for the first time.
<script>
  import { Application, AssetsLoader, Sprite, Text } from 'svelte-pixi'
  import * as PIXI from 'pixi.js'

  // optional - only if you need to set Assets configuration options
  const initPromise = PIXI.Assets.init({
    baseUrl: '/assets',
  })
</script>

{#await initPromise then}
  <AssetsLoader assets={['/sprite.png']}>
    <slot let:progress slot="loading">
      <Text text={`Loading... ${progress}`} x={200} y={200} anchor={0.5} />
    </slot>

    <Sprite
      texture={PIXI.Texture.from('/sprite.png')}
      x={20}
      y={50}
      width={360}
      height={300}
    />
  </AssetsLoader>
{/await}

Interactivity changes

Pixi has replaced the InteractionManager with EventSystem. There are a few changes in behaviour:

  • interactive and interactiveChildren props are now deprecated, please use eventMode which is available on all DisplayObject-based components.

  • eventMode can be set on <Application> or <Renderer> to configure the default setting for components.

  • pointermove, mousemove, and touchmove events have changed to be local to the object. To maintain v6 behaviour, rename them to globalpointermove, globalmousemove, and globaltouchmove.

  • buttonMode prop has been removed, set eventMode and use cursor="pointer" instead.