Skip to content
SveltePixi

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 SveltePixi 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, SveltePixi provides a tick utility function that will allow you to achieve similar behaviour. It returns a writable store that updates on every tick with the result of a 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, tick, Graphics, onTick } from 'svelte-pixi'
  import { writable } from 'svelte/store'


  let instance
  let time = 0


  // tick() executes first immediately so instance won't be defined yet,
  // fallback to default values
  let x = tick(() => instance?.x ?? 360)
  let y = tick(() => instance?.y ?? 200)


  onTick((ticker) => {
    time += ticker.deltaTime * 0.02


    // update instance.x directly and $x will be updated on next tick
    instance.x = 360 + Math.cos(time) * 50


    // or update the store directly and instance.y will be updated via prop update
    $y = 200 + Math.sin(time) * 50
  })


 function reset() {
    time = 0
  }
</script>


<Graphics
  bind:instance
  x={$x}
  y={$y}
  pivot={0.5}
  draw={(graphics) => {
    graphics.clear()
    graphics
      .circle(0, 0, 50)
      .fill(0xde3249)
  }}
/>
<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" onclick={reset}>
  Reset
</button>