Myaku
脈(Myaku):パルス。 Web ゲームのためのフレームプロファイラーです。
Myaku はゲームが描くフレームをすべて見張っています。プレイヤーが「落ちた」と感じるフレームを見つけて、その理由をわかりやすい言葉で教えてくれます。
Frame 1,204 took 79 ms (budget 9.1 ms). 80 ms was script:
spawnWavein src/enemies.ts:88. This ran inside the game loop. Profile the function in the Performance panel, or spread the work over several frames.
ts
// エントリーファイルの 1 行目に、開発時だけ:
import "myaku/auto";はじめる · 判定の読み方 · CI の予算 · API リファレンス
なぜ Myaku なのか
カクつきは、プレイヤーが真っ先に気づき、開発者が最後に見つけるバグです。ブラウザの Performance パネルでも見つけられますが、それはちょうど記録しているときに起きて、しかもフレームチャート(flame chart)を読めればの話です。ほとんどのヒッチは原因不明のまま「ブラウザのせい」「マシンのせい」にされてしまいます。
Myaku は、ゲームのための問いに答えるように作られています。
- 常に記録中。 直近 10 秒のフレームを保持しています。ヒッチを感じたときには、もう記録されています。
- フレームチャートではなく判定を。 遅いフレームそれぞれに、原因、確信度、次にやることが付きます。
- ゲームにとって大事なものを数えます。 プレイヤーが感じるフレーム時間、フレームのコードにかかった時間、ドローコール、GPU にアップロードしたバイト数、シェーダーのコンパイル、ガベージコレクション。
- どのエンジンでも。 Phaser、PixiJS、three.js、KAPLAY、Excalibur、手書きのループ、そして debuff。ゲームを変更する必要はありません。
- 軽量。 フレームごとのメモリ確保はゼロ。自身のコストも計測して報告します。たいていフレームあたり 0.05〜0.1 ms です。
見つけられるもの
| 原因 | 意味 |
|---|---|
script | コードの実行が長引きました。ブラウザが報告すれば関数名とファイル名も示します |
gc | ガベージコレクション:コードが暇なあいだにヒープが縮みました |
upload | プレイ中にテクスチャやバッファが GPU へ送られました |
compile | プレイ中にシェーダーがコンパイルされました |
layout | スタイルとレイアウトの処理。たいていは canvas の上に重ねた DOM の UI です |
throttled | ゲームではなく、ブラウザがフレームを間引きました(非表示のウィンドウ、省電力) |
hidden | タブがバックグラウンドにありました |
gpu、compositor | GPU か Chrome のコンポジターが時間を使いました。myaku record --trace が必要です |
unknown | コードは速く、時間はほかで使われました。Myaku は推測せず、そう伝えます |
debuff の一部、でもどこでも使えます
Myaku は debuff に依存しない独立したパッケージです。debuff のプロジェクトでは debuff dev が自動で起動し、ゲームの update と render をスパンとして記録します。コーディングエージェントは MCP サーバーの game_profile ツールから読み取れます。