Usage

The Application component will create your PixiJS app and canvas for you.

All Svelte Pixi components should be children of Application.

<script>
  import { Application, Text } from 'svelte-pixi'
</script>

<Application width={400} height={400}>
  <Text
    text="Hello World"
    anchor={0.5}
    x={200}
    y={200}
    style={{
      fill: 'white'
    }}
  />
</Application>

Sprites

Sprite components take a texture, so we’ll use PIXI.Texture.from to load one from a URL.

PixiJS will load the texture in the background and show it when it’s ready - similar to how an img tag works.

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

<Application width={400} height={400}>
  <Sprite
    texture={PIXI.Texture.from('/assets/food/lemonpie.png')}
    anchor={0.5}
    x={200}
    y={200}
    scale={2}
  />
</Application>

Loaders

If you have a bunch of images or other resources, you may wish to show a loading screen until all images have finished loading (rather than have them pop in one after another).

Note: You may want to enable network throttling in your browser dev tools to actually see the loading screen - these are small images!

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

  let images = [
    '/assets/food/lemonpie.png',
    '/assets/food/strawberrycake.png',
    '/assets/food/cheesecake.png',
  ]
</script>

<Application width={400} height={400}>
  <Loader resources={images}>
    <slot slot="loading">
      <Text
        text="Loading..."
        anchor={0.5}
        x={200}
        y={200}
        style={{
          fill: 'white'
        }}
      />
    </slot>

    {#each images as image, i}
      <Sprite
        texture={PIXI.Texture.from(image)}
        anchor={0.5}
        x={150 + i * 50}
        y={200}
        scale={2}
      />
    {/each}
  </Loader>
</Application>

You can have multiple Loader components as well, which could be useful if you wanted to render a fallbacks at a component-level instead.

Ticker

A Ticker runs an update loop for the application. The Application component will create one automatically, which means child components can hook into the loop with onTick.

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

  let x = 200
  let y = 200

  let count = 0
  onTick((delta) => {
    count += delta * 0.05
    x = 200 + Math.cos(count) * 50
    y = 200 + Math.sin(count) * 50
  })
</script>

<Sprite
  texture={PIXI.Texture.from('/assets/food/lemonpie.png')}
  anchor={0.5}
  {x}
  {y}
  scale={2}
/>

Accessing PixiJS Instances

Most Svelte Pixi components have an instance prop that contains the underlying PixiJS instance. It is like the this prop for HTML elements, so you can bind to it if you need to access it.

<script>
  import { onMount } from 'svelte'
  import { Text } from 'svelte-pixi'

  let text

  onMount(() => {
    text.style.fill = 'yellow'
  })
</script>

<Text
  bind:instance={text}
  text="Hello World"
  anchor={0.5}
  x={200}
  y={200}
/>

Using a Custom Instance

The instance prop also lets you pass down a custom PixiJS class that you’ve instantiated yourself. This is particularly useful if you have a custom class (whether that be your own or from a third-party library).

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

  class YellowText extends PIXI.Text {
    constructor(text, style) {
      super(text, style)
      this.style.fill = 'yellow'
    }
  }

  let text = new YellowText()
</script>

<Text
  instance={text}
  text="Hello World"
  anchor={0.5}
  x={200}
  y={200}
/>