GameCanvas / Renderer

Mon, 01 Jan 0001 00:00:00 +0000

components/game-canvas.tsx は Game からのスナップショットを @shopify/react-native-skia で描画するデモ実装です。エンジンの状態を UI に届ける際のベストプラクティスをまとめます。

初期化フロー#

startGame({ reset: true }) を useEffect で 1 度だけ呼び、GameLoop を開始。
LinearMover のような Entity をインスタンス化して game.addEntity() で登録。
クリーンアップ時に game.removeEntity(entity.id) を忘れない。

レンダリング購読#

useEffect(() => {
 const unsubscribe = game.onRender((payload) => {
 renderPayloadRef.current = payload;
 setRenderPayload(payload); // HUD 用に tick / elapsed / entityCount だけ更新
 });
 return unsubscribe;
}, [game, setRenderPayload]);

GameCanvas は renderPayloadRef に最新スナップショットを保持しつつ、Zustand には HUD で必要な tick/elapsed/entityCount だけを流します。Skia の描画ノードは React ではなく「Entity ID → SharedValue ハンドル」へ直接書き込むため、Game の内部構造を UI から mutate する必要がありません。

Scheduler を使った HUD#

GameCanvas では game.schedule() と game.wait() を使い、定期ログと遅延ログを生成しています。setFunctionLogs で最新 4 件だけ表示する仕組みは、Scheduler の動作確認に最適です。

Renderer on Codigrowa Docs

GameCanvas / Renderer

初期化フロー#

レンダリング購読#

Scheduler を使った HUD#