getTicker(...) is undefiend

[llPekoll]

Just did npx degit mattjennings/svelte-pixi/examples/vite and i get :
Uncaught TypeError: Cannot destructure property 'ticker' of 'getTicker(...)' as it is undefined. when I am trying to play with onTick

[mattjennings]

@llPekoll are you using onTick() in the example's App.svelte by any chance? If so, it needs to be used in a component that is a child of <Application />.

(the error message should definitely be improved to communicate that)

[llPekoll]

Thanks for your fast reply is this way the right way to do it?

<script>
  import * as PIXI from 'pixi.js'
  import { Application, Sprite, onTick, Text } from 'svelte-pixi'
   let x = 200
  let y = 200

  let count = 0
  onTick((delta) => {
    count += delta * 0.05
    x = 200 + Math.cos(count) * 50
    y = 200 + Math.sin(count) * 50
  })
</script>

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

[mattjennings]

You need to move onTick into a component that is a child of Application. It's a bit inconvenient but it uses a Svelte context that is provided by Application, so if it's called outside, it will fail.

So something like this:

MyText.svelte

<script>
  import * as PIXI from 'pixi.js'
  import {  onTick, Text } from 'svelte-pixi'
  let x = 200
  let y = 200

  let count = 0
  onTick((delta) => {
    count += delta * 0.05
    x = 200 + Math.cos(count) * 50
    y = 200 + Math.sin(count) * 50
  })
</script>

 <Text
    {x}
    {y}
    anchor={0.5}
    text="Hello World"
    style={{ fill: 'white'}}
  />

App.svelte

<script>
  import { Application } from 'svelte-pixi'
  import MyText from './MyText.svelte'

</script>

<Application width={400} height={400} antialias>
  <MyText />
</Application>

[llPekoll]

Thanks a lot for your reactivity, (sorry I was in holiday), Sorry but it still not working is my vite file configured properly?

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svelte()],
  optimizeDeps: {
    include: ['pixi.js'],
  },
})

[mattjennings]

@llPekoll Yes, your config is good. The error is because onTick is being called from a Svelte component that is not a child of <Application />.

Please see this example https://codesandbox.io/s/svelte-pixi-vite-ontick-mfobo7

[llPekoll]

Omg got it to work I might have forgotten to delete the onTick from the Application file Sorry!