onTick

Use onTick to add a callback to the application's ticker. It will automatically remove itself on unmount.

Usage

In PixiJS v8, the ticker callback receives a Ticker instance. Use ticker.deltaTime to get the frame delta:

<script lang="ts" setup>
import { ref } from 'vue'
import { onTick } from 'vue3-pixi'

const x = ref(0)

onTick((ticker) => {
  x.value += ticker.deltaTime
})
</script>

You can also destructure deltaTime directly:

<script lang="ts" setup>
import { ref } from 'vue'
import { onTick } from 'vue3-pixi'

const x = ref(0)

onTick(({ deltaTime }) => {
  x.value += deltaTime
})
</script>

Cleanup

onTick returns a remove function you can call to manually stop the ticker callback before the component unmounts:

const remove = onTick(({ deltaTime }) => {
  // ...
})

// Later, stop the ticker callback manually
remove()