Skip to content
SveltePixi

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']}>
  {#snippet loading({ progress })}
    <Text x={360} y={200} text={`Loading... ${progress}%`} anchor={0.5} />
  {/snippet}


  <Sprite
    x={360}
    y={200}
    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}

Textures

Starting with Pixi v8, textures must be loaded before use. In most cases, a root-level <AssetsLoader /> component should be used to load all assets used in your app. However you can always use another <AssetsLoader /> when needed to load additional assets.

<AssetsLoader assets={['/my-texture.png']}>
  <Sprite texture={'/my-texture.png'} />
</AssetsLoader>

Other options below would also work:

{#await PIXI.Assets.load("/my-texture.png")}
{:then texture}
  <Sprite {texture} />
{/await}
<AssetsLoader assets={['/my-texture.png']}>
  <Sprite texture={PIXI.Texture.from('/my-texture.png')} />
</AssetsLoader>

API

Props

* denotes required

NameDescription
assets*
(string | PIXI.UnresolvedAsset<any>)[]

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.

oncomplete
() => void

Called when the assets have finished loading

onprogress
(progress: number) => void

Called after each asset has loaded

onstart
() => void

Called when the loading starts

unload
boolean

Unload the bundle when the component is unmounted, freeing the assets from memory.

Default is false

Snippets

NameType
childrenSnippet<[]>
loadingSnippet<[{ progress: number; }]>