pixijs-ticker

app.ticker は毎フレーム登録されたコールバックを実行し、UPDATE_PRIORITY.LOW で app.render() を駆動します。各コールバックは Ticker インスタンスを受け取ります。deltaTime をフレームレート非依存の乗数（60fps で約 1.0）として、または deltaMS をリアルタイム計算用として読み込めます。

クイックスタート

app.ticker.add((ticker) => {
  sprite.rotation += 0.01 * ticker.deltaTime;
  sprite.x += (200 / 1000) * ticker.deltaMS;
});

app.ticker.add(
  (ticker) => {
    updatePhysics(ticker.deltaMS);
  },
  undefined,
  UPDATE_PRIORITY.HIGH,
);

app.ticker.maxFPS = 30;
app.ticker.speed = 0.5;

sprite.onRender = () => {
  sprite.scale.x = Math.sin(performance.now() / 500);
};

関連スキル: pixijs-application (Application のセットアップと sharedTicker オプション)、pixijs-performance (フレームレート最適化)、pixijs-migration-v8 (v7 ticker シグネチャの変更)。

コアパターン

時間単位

Ticker は 3 つのタイミング値を公開しており、それぞれ異なるユースケース向けです:

プロパティ	型	speed で調整可能?	minFPS で制限?	ユースケース
deltaTime	無次元（60fps で約 1.0）	はい	はい	フレームレート非依存のアニメーション乗数
deltaMS	ミリ秒	はい	はい	時間ベースの計算（ピクセル/秒）
elapsedMS	ミリ秒	いいえ	いいえ	生の測定、プロファイリング

import { Application } from "pixi.js";

const app = new Application();
await app.init({ width: 800, height: 600 });

app.ticker.add((ticker) => {
  // deltaTime: 無次元スカラー、60fps で約 1.0
  sprite.rotation += 0.1 * ticker.deltaTime;

  // deltaMS: 実際のミリ秒（速度スケーリング適用、制限あり）
  sprite.x += (200 / 1000) * ticker.deltaMS; // 秒あたり 200 ピクセル

  // elapsedMS: 生のミリ秒（スケーリングなし、制限なし）
  console.log(`Raw frame time: ${ticker.elapsedMS}ms`);
});

注意点: deltaTime はミリ秒ではありません。deltaMS * Ticker.targetFPMS であり、targetFPMS は 0.06（つまり 1/16.67）です。正確に 60fps では deltaTime は 1.0 です。30fps では deltaTime は 2.0 です。これを時間値として扱う人が多いです。

優先度順序とコンテキストバインディング

import { Application, UPDATE_PRIORITY } from "pixi.js";

const app = new Application();
await app.init({ width: 800, height: 600 });

// INTERACTION (50) > HIGH (25) > NORMAL (0) > LOW (-25) > UTILITY (-50)
// app.render() は TickerPlugin により LOW で登録される

app.ticker.add(
  (ticker) => {
    // 物理演算は通常優先度のコールバックより前に実行される
    updatePhysics(ticker.deltaMS);
  },
  undefined,
  UPDATE_PRIORITY.HIGH,
);

app.ticker.add((ticker) => {
  // デフォルト優先度（NORMAL = 0）、HIGH の後、レンダー前に実行される
  updateAnimations(ticker.deltaTime);
});

// 第 2 引数として `this` を渡すとクラスメソッドのコンテキストを保持できる
class GameSystem {
  public speed = 5;
  public position = 0;

  public update(ticker: Ticker): void {
    this.position += this.speed * ticker.deltaTime;
  }
}

const system = new GameSystem();
app.ticker.add(system.update, system);
app.ticker.remove(system.update, system); // fn と context の両方を一致させる必要がある

フレームレート制限

import { Ticker } from "pixi.js";

const ticker = new Ticker();

ticker.maxFPS = 30; // 30fps で制限（間隔を保つためフレームをスキップ）
ticker.minFPS = 10; // deltaTime の上限を設定（10fps 相当以下に制限）

// maxFPS < minFPS の場合、minFPS が lowered される
// minFPS > maxFPS の場合、maxFPS が raised される

maxFPS は上限を強制するため更新呼び出しをスキップします。minFPS は大きなフレームドロップが巨大なデルタを生成しないよう deltaTime/deltaMS を制限します（デフォルト minFPS は 10）。

オブジェクト単位の onRender フック

import { Sprite, Assets, Application } from "pixi.js";

const app = new Application();
await app.init({ width: 800, height: 600 });

const texture = await Assets.load("bunny.png");
const sprite = new Sprite(texture);
app.stage.addChild(sprite);

sprite.onRender = (renderer) => {
  sprite.rotation += 0.01;
};

onRender はシーングラフの走査中、GPU レンダリングの前に呼ばれます。ロジックが特定のディスプレイオブジェクトに結びついている場合、グローバルティッカーコールバックの代わりとなります。

Ticker.shared、Ticker.system、新しい Ticker

import { Ticker, UPDATE_PRIORITY } from "pixi.js";

// Ticker.shared: シングルトン、autoStart=true、destroy() から保護される
const shared = Ticker.shared;

// Ticker.system: エンジンのバックグラウンドタスク用の別インスタンス、
// メインシーンティッカーとは独立している。プレーンな Ticker インスタンス
// （autoStart=true、_protected=true）であり、固有の優先度はなく、
// リスナーは通常、慣例として UTILITY 優先度で追加される
const system = Ticker.system;

// new Ticker(): カスタムインスタンス、autoStart=false、ライフサイクルは自分で管理
const custom = new Ticker();
custom.autoStart = true; // 最初のリスナー追加時に開始
custom.add((ticker) => {
  console.log(ticker.deltaMS);
});

// ワンショットコールバック、発火後に自動削除される
custom.addOnce(() => console.log("fires once"), null, UPDATE_PRIORITY.NORMAL);

// 完了時:
custom.stop();
custom.destroy();

Application はデフォルトで独自の Ticker を作成します。app.init() で sharedTicker: true を設定すると、代わりに Ticker.shared を使用します。Ticker.shared と Ticker.system は両方とも _protected であり、それらに destroy() を呼び出しても実際には破棄されません。ticker.FPS でフレームレートを測定し、ticker.count で現在のリスナー数を読み込めます。

App ライフサイクルとマニュアルレンダリング

import { Application } from "pixi.js";

const app = new Application();
await app.init({ autoStart: false });

// ビルトインレンダループをいつでも一時停止・再開できる
app.start();
app.stop();

// または自分でループを駆動する（ヘッドレス、可視性ゲート、固定タイムステップなど）
function animate() {
  app.ticker.update(); // 登録されたコールバックを発火
  app.render(); // ステージをレンダー
  requestAnimationFrame(animate);
}
animate();

app.start() と app.stop() は TickerPlugin により追加され、ticker.start() / ticker.stop() にマップされます。タブがぼかされたときに一時停止する、固定タイムステップループを実行する、またはオフスクリーンレンダーする必要があるときは、autoStart: false と独自のフレームドライバを使用します。

スピードスケーリング

import { Application } from "pixi.js";

const app = new Application();
await app.init({ width: 800, height: 600 });

app.ticker.speed = 0.5; // 半速（スローモーション）
app.ticker.speed = 2.0; // 二倍速

// speed は deltaTime と deltaMS に影響するが、elapsedMS には影響しない

よくある間違い

[CRITICAL] Ticker コールバックは第 1 引数として delta を期待

間違い:

app.ticker.add((dt) => {
  bunny.rotation += dt;
});

正しい:

app.ticker.add((ticker) => {
  bunny.rotation += ticker.deltaTime;
});

v8 はコールバック引数として delta 数値ではなく Ticker インスタンスを渡します。v7 パターン (dt) => ... はコンパイルされますが、dt は Ticker オブジェクト全体であるため、それに対する算術演算は NaN を生じます。

[HIGH] updateTransform を per-frame ロジックに使用する

間違い:

class MySprite extends Sprite {
  updateTransform() {
    super.updateTransform();
    this.rotation += 0.01;
  }
}

正しい:

class MySprite extends Sprite {
  constructor() {
    super();
    this.onRender = this._onRender.bind(this);
  }
  private _onRender() {
    this.rotation += 0.01;
  }
}

updateTransform は v8 で削除されました。オブジェクト単位の per-frame ロジックには onRender コールバックを使用してください。

[MEDIUM] deltaTime をミリ秒として扱う

間違い:

app.ticker.add((ticker) => {
  // 100px/秒を動かそうとするが、deltaTime は約16.67 ではなく約1.0
  sprite.x += (100 * ticker.deltaTime) / 1000;
});

正しい:

app.ticker.add((ticker) => {
  // deltaMS をリアルタイム移動に使用
  sprite.x += (100 / 1000) * ticker.deltaMS;
  // または deltaTime をフレームレート乗数として使用
  sprite.x += 1.5 * ticker.deltaTime;
});

deltaTime は無次元スカラー（60fps で約 1.0）であり、ミリ秒ではありません。リアルタイム計算には deltaMS を使用してください。60fps での「per frame」動作が必要な場合は、deltaTime をシンプルな乗数として使用してください。

API リファレンス

• Ticker
• TickerPlugin
• TickerPluginOptions