Ticker

Children of this component can use onTick to hook into the update loop.

PIXI.Ticker description from PixiJS

A Ticker class that runs an update loop that other objects listen to. Used for managing animation frames and timing in a PixiJS application.

It provides a way to add listeners that will be called on each frame, allowing for smooth animations and updates.

Time Units

deltaTime: Dimensionless scalar (typically ~1.0 at 60 FPS) for frame-independent animations
deltaMS: Milliseconds elapsed (capped and speed-scaled) for time-based calculations
elapsedMS: Raw milliseconds elapsed (uncapped, unscaled) for measurements
lastTime: Timestamp in milliseconds since epoch (performance.now() format)

Animation frames are requested only when necessary, e.g., when the ticker is started and the emitter has listeners.

Type-Safety Limitation with Subclasses

If you are extending PIXI.Ticker with your own subclass, you MUST provide the instance prop with your custom instance.

Due to TypeScript’s limitations with generic types, if you don’t provide an instance, a base PIXI.Ticker will be created and unsafely cast to your subclass type. This will cause runtime errors when trying to access subclass-specific properties or methods that don’t actually exist on the instance.

Correct Usage with Subclasses:

class MyTicker extends PIXI.Ticker {
  myCustomMethod() { ... }
}

const ticker = new MyTicker()
<Ticker instance={ticker} />

This limitation is documented in issue #49. When using the base PIXI.Ticker type (the default), this is not a concern.

<script>
  import { Ticker, Text } from 'svelte-pixi'

  let delta = $state(0)
  let frame = $state(0)
</script>

<Ticker
  ontick={(ticker) => {
    frame++
    delta = ticker.deltaTime
  }}
>
  <Text
    x={360}
    y={200}
    text={`Frame ${frame}\nDelta: ${delta.toFixed(10)}`}
    style={{ fill: 'white' }}
    anchor={0.5}
  />
</Ticker>

<script>
  import { Ticker, Text } from 'svelte-pixi/svelte-4'

  let delta = 0
  let frame = 0
</script>

<Ticker
  on:tick={(ev) => {
    const ticker = ev.detail
    frame++
    delta = ticker.deltaTime
  }}
>
  <Text
    x={360}
    y={200}
    text={`Frame ${frame}\nDelta: ${delta.toFixed(10)}`}
    style={{ fill: 'white' }}
    anchor={0.5}
  />
</Ticker>

API

Svelte 5
Svelte 4 (deprecated)

Props

* denotes required

Name	Description
autoStart	`boolean` Whether or not this ticker should invoke the method {@link Ticker#start \|start} automatically when a listener is added.
instance	`T` The PIXI.Ticker instance. Can be manually set or bound to. WARNING: Type-safety limitation: If you are using a subclass of PIXI.Ticker, you MUST provide the instance prop with your custom instance. Due to TypeScript's limitations with generic types, if you don't provide an instance, a base PIXI.Ticker will be created and cast to your type, which will cause runtime errors when trying to access subclass-specific properties or methods. Example: `class MyTicker extends PIXI.Ticker { myMethod() { ... } } const ticker = new MyTicker() <!-- Correct: always provide instance for subclasses. --> <Ticker instance={ticker} />`
maxFPS	`number` Manages the minimum amount of milliseconds required to elapse between invoking {@link Ticker#update \|update}. This will effect the measured value of {@link Ticker#FPS \|FPS}. If it is set to `0`, then there is no limit; PixiJS will render as many frames as it can. Otherwise it will be at least `minFPS`
minFPS	`number` Manages the maximum amount of milliseconds allowed to elapse between invoking {@link Ticker#update \|update}. This value is used to cap {@link Ticker#deltaTime \|deltaTime}, but does not effect the measured value of {@link Ticker#FPS \|FPS}. When setting this property it is clamped to a value between `0` and `Ticker.targetFPMS * 1000`.
ontick	`(ticker: T) => void`
priority	`number` The priority for emitting the tick event.
speed	`number` Factor of current {@link Ticker#deltaTime \|deltaTime}. Used to scale time for slow motion or fast-forward effects.

Snippets

Name	Type
children	`Snippet<[]>`

Props

Name	Description
autoStart `true`	`boolean` Whether or not this ticker starts automatically
instance	`PIXI.Ticker` The PIXI.Ticker instance. Can be manually set or bound to. WARNING: Type-safety limitation: If you are using a subclass of PIXI.Ticker, you MUST provide the instance prop with your custom instance. Due to TypeScript's limitations with generic types, if you don't provide an instance, a base PIXI.Ticker will be created and cast to your type, which will cause runtime errors when trying to access subclass-specific properties or methods. Example: `class MyTicker extends PIXI.Ticker { myMethod() { ... } } const ticker = new MyTicker() <!-- Correct: always provide instance for subclasses. --> <Ticker instance={ticker} />`
maxFPS	Manages the minimum amount of milliseconds required to elapse between invoking PIXI.Ticker#update. This will effect the measured value of PIXI.Ticker#FPS. If it is set to 0, then there is no limit; PixiJS will render as many frames as it can. Otherwise it will be at least minFPS
minFPS	Manages the maximum amount of milliseconds allowed to elapse between invoking PIXI.Ticker#update. This value is used to cap PIXI.Ticker#deltaTime, but does not effect the measured value of PIXI.Ticker#FPS. When setting this property it is clamped to a value between 0 and Ticker.targetFPMS * 1000
priority	`PIXI.UPDATE_PRIORITY` Priority of the ticker for on:tick event. Defaults to LOW
speed	Factor of current PIXI.Ticker#deltaTime.

Slots

Name	Props	Fallback
default	`{}`

Events

Name	Type	Detail
tick	`dispatched`