Binding Props

There are times when the underlying PixiJS instance of a component gets updated externally (e.g, a physics system that applies forces on collision). In such a scenario, it would be helpful to bind our component props to the instance properties so that they are in sync. However, the bind: syntax will have no effect for instance-related properties on Svelte Pixi components (such as x or y) . This is to improve performance as the components would have to sync all props all the time regardless if they are bound, causing a large performance hit.

Instead, Svelte Pixi provides a track utility function that will allow you to achieve similar behaviour. It returns a writable store that updates on every tick with the passed in function. We can use this to grab instance values and pass them back down as props (effectively creating a bind).

<script>
  import * as PIXI from 'pixi.js'
  import { Container, Text, track, Graphics, onTick } from 'svelte-pixi'
  import { writable } from 'svelte/store'

  let instance

  let x = track(() => instance.x, -300)
  let y = track(() => instance.y, -150)

  function reset() {
    $x = -300
    $y = -150
  }

  onTick((delta) => {
    if (instance.x < 200) {
      instance.x += 0.5 * delta
      instance.y += 0.2 * delta
    }
  })
</script>

<Graphics
  bind:instance
  x={$x}
  y={$y}
  pivot={0.5}
  draw={(graphics) => {
    graphics.clear()
    graphics.beginFill(0xde3249)
    graphics.drawCircle(0, 0, 50)
    graphics.endFill()
  }}
/>
<Text
  x={$x}
  y={$y >= 200 ? $y - 75 : $y + 75}
  text={`${Math.round($x)}, ${Math.round($y)}`}
  style={{ fill: 'white' }}
  anchor={0.5}
/>

<button class="font-medium rounded mt-2 w-full cursor-pointer" on:click={reset}>
  Reset
</button>