AssetsLoader

Creates and loads assets using PIXI.Assets by creating a bundle from the assets prop.

It contains two slots, loading and the default. The default slot will not render until the loading has completed. You can show progress by using the progress prop from the loading slot.

Usage

<script>
  import { Application, AssetsLoader, Sprite, Text } from 'svelte-pixi'
  import * as PIXI from 'pixi.js'
</script>

<AssetsLoader assets={['/assets/great-success.png']}>
  <slot let:progress slot="loading">
    <Text text={`Loading... ${progress}`} anchor={0.5} />
  </slot>

  <Sprite
    texture={PIXI.Texture.from('/assets/great-success.png')}
    anchor={0.5}
    width={360}
    height={300}
  />
</AssetsLoader>

Assets init options

You may call PIXI.Assets.init() to configure the behaviour of the Assets loader, but you must do it before the first time you render an AssetsLoader component. Note that PIXI.Assets can only be initialized once.

<script>
  import { Application, AssetsLoader, Sprite, Text } from 'svelte-pixi'
  import * as PIXI from 'pixi.js'

  // init is async, so we must await it
  const initPromise = PIXI.Assets.init({
    basePath: '/assets',
  })
</script>

{#await initPromise then}
  <Application>
    <AssetsLoader assets={['/great-success.png']}>
      <Sprite anchor={0.5} texture={PIXI.Texture.from('/great-success.png')} />
    </AssetsLoader>
  </Application>
{/await}

API

Props

Name	Description
assets []	Array<stringPIXI.UnresolvedAssetObject> An array of assets to load. These will get loaded as a bundle.
bundleName	string The name of the bundle for the assets. By default a name is generated for you.
progress 0	number
unload false	boolean Unload the bundle when the component is unmounted, freeing the assets from memory. Default is false

Slots

Name	Props	Fallback
default	{}
loading	{ progress: number }

Events

Name	Type	Detail
complete	dispatched	null
progress	dispatched
start	dispatched	null