本文へスキップ

Myaku ​

脈(Myaku):パルス。 Web ゲームのためのフレームプロファイラーです。

Myaku はゲームが描くフレームをすべて見張っています。プレイヤーが「落ちた」と感じるフレームを見つけて、その理由をわかりやすい言葉で教えてくれます。

Frame 1,204 took 79 ms (budget 9.1 ms). 80 ms was script: spawnWave in 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、compositorGPU か Chrome のコンポジターが時間を使いました。myaku record --trace が必要です
unknownコードは速く、時間はほかで使われました。Myaku は推測せず、そう伝えます

原因それぞれの詳細 →

debuff の一部、でもどこでも使えます ​

Myaku は debuff に依存しない独立したパッケージです。debuff のプロジェクトでは debuff dev が自動で起動し、ゲームの update と render をスパンとして記録します。コーディングエージェントは MCP サーバーの game_profile ツールから読み取れます。