Skip to content
SveltePixi

v7.0.0

SveltePixi v7.0.0 brings support for PixiJS v7.3.0. This is the first major version of SveltePixi and the first to support PixiJS v7. Going forward, the major version of SveltePixi will match the major version of PixiJS.

It is advised to read through the PixiJS v7 Migration Guide to get an overview of the changes in PixiJS. Additionally the release notes for v7.2.0 are helpful to learn about the changes the interaction system.

Features

Breaking Changes

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.