Loader

Creates a PIXI.Loader

Preloads the assets (textures, audio, etc) used by your components. It contains two slots, loading and the default. The default slot will not render until the Loader has finished.

You can show progress by using the progress prop from the loading slot.

Usage

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

<Application width={400} height={400} antialias backgroundColor={0xffffff}>
  <Loader let:progress resources={['/assets/great-success.png']}>
    <slot slot="loading">
      <Text text={`Loading... ${progress}`} x={200} y={200} anchor={0.5} />
    </slot>

    <Sprite
      texture={PIXI.Texture.from('/assets/great-success.png')}
      x={20}
      y={50}
      width={360}
      height={300}
    />
  </Loader>
</Application>

Component API

Props

Name Type Default Description
baseUrl string '' The base url for all resources loaded by this loader.
concurrency number 10 The number of resources to load concurrently.
instance PIXI.Loader The PIXI.Loader instance. Can be set or bound to.
resources string[] Array<[string, string, PIXI.IAddOptions, () => any]> [] An array of urls or arguments to be passed into PIXI.Loader's add() function

Slots

Name Props Fallback
default
loading

Events

Name Type Detail
complete dispatched
error dispatched
load dispatched
progress dispatched
start dispatched