track

Returns a writable store that gets updated during a low-priority tick. If there’s no Ticker, it will run during the PIXI.Renderer’s postrender event.

This is useful for watching a property on a PixiJS instance that is getting updated outside of the component (e.g. a physics system). It can also be used to bind props, as Svelte Pixi components don’t support bind: syntax for instance properties.

<script>
  import { Container, Text, onTick, track } from 'svelte-pixi'

  let instance
  let x = track(() => instance.x, -200)
  let y = track(() => instance.y, 0)

  $: text = $x < -75 ? "I'm on the left!" : "I'm on the right!"

  onTick((delta) => {
    if (instance.x < 100) {
      // modify the instance directly
      instance.x += 1 * delta
    } else {
      instance.x = -200
    }
  })
</script>

<Container bind:instance x={$x} y={$y}>
  <Text {text} style={{ fill: 'white' }} />
</Container>

Type Definition

function track<T>(getter: () => T, initial?: T): Writable<T>