Usage

SveltePixi aims to match the PixiJS API as closely as possible without doing anything too magical. If you’re familiar with PixiJS, you should feel right at home.

You can use the Application component to create and render a PixiJS application. All SveltePixi components should be children of Application.

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

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

Most SveltePixi components will correspond to the PixiJS class of the same name (for example the Text component renders a PIXI.Text instance).

Textures / Assets

Some components such as Sprite will take a texture. Textures in PixiJS must be loaded ahead of time before use. You can use the AssetsLoader component to do this for you, or you can manually call PIXI.Assets.load yourself.

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

<Application width={400} height={400} antialias>
  <AssetsLoader assets={['/assets/adventurer.png']}>
    <!-- renders once all assets have completed loading -->
    <Sprite
      x={200}
      y={200}
      texture={PIXI.Texture.from('/assets/adventurer.png')}
      anchor={0.5}
      scale={3}
    />

    <!--
     optionally, you can render a loading screen while assets are loading
    -->
    {#snippet loading({ progress })}
      <Text
        text="Loading..."
        anchor={0.5}
        x={200}
        y={200}
        style={{
          fill: 'white',
        }}
      />
    {/snippet}
  </AssetsLoader>
</Application>

Ticker

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

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

  let x = $state(360)
  let y = $state(200)

  onTick((ticker) => {
    const time = ticker.lastTime / 500
    x = 360 + Math.cos(time) * 50
    y = 200 + Math.sin(time) * 50
  })
</script>

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

You can also use tick to create a Svelte writable store that updates on each tick.

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

  const position = tick(ticker => {
    const time = ticker.lastTime / 500
    return {
      x: 360 + Math.cos(time) * 50,
      y: 200 + Math.sin(time) * 50
    }
  })
</script>

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

Accessing PixiJS Instances

Most SveltePixi components have an instance prop that contains the underlying PixiJS instance. It’s akin to 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(() => {
    // manually set property on the PIXI.Text instance
    text.style.fill = '#00ff00'
  })
</script>

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

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 GreenText extends PIXI.Text {
    constructor(text, style) {
      super(text, style)
      this.style.fill = '#00ff00'
    }
  }

  const instance = new GreenText()
</script>

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