Ticker

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

PIXI.Ticker description from PixiJS

source

{@link ticker.Ticker |Tickers} provide periodic callbacks based on the system clock. Your game update logic will generally be run in response to a tick once per frame. You can have multiple tickers in use at one time.

import { Ticker } from 'pixi.js';

const callback = (ticker: Ticker) => {
   // do something on the next animation frame
};

// create a ticker
const ticker = new Ticker();

// register the callback and start the ticker
ticker.add(callback);
ticker.start();

You can always use the {@link ticker.Ticker.shared |shared} ticker that Pixi renders with by default.

Ticker.shared.add(callback);

A Ticker class that runs an update loop that other objects listen to.

This class is composed around listeners meant for execution on the next requested animation frame. Animation frames are requested only when necessary, e.g. When the ticker is started and the emitter has listeners.

Usage

Svelte 5

<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>

Svelte 4 (deprecated)

<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

Props

* denotes required

Name	Description
autoStart	boolean Whether or not this ticker should invoke the method {@link ticker.Ticker#start |start} automatically when a listener is added.
instance	T
maxFPS	number Manages the minimum amount of milliseconds required to elapse between invoking {@link ticker.Ticker#update |update}. This will effect the measured value of {@link ticker.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.Ticker#update |update}. This value is used to cap {@link ticker.Ticker#deltaTime |deltaTime}, but does not effect the measured value of {@link ticker.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.Ticker#deltaTime |deltaTime}.

Snippets

Name	Type
children	Snippet<[]>

Svelte 4 (deprecated)

Props

Name	Description
autoStart true	boolean Whether or not this ticker starts automatically
instance	PIXI.Ticker The PIXI.Ticker instance. Can be set or bound to.
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