はじめる

インストール

npm install -D myaku

ゲームに追加する

myaku/auto はゲームのコードより前に読み込んでください。そうすれば最初から canvas コンテキストとゲームループを捉えられます。いちばん簡単なのは、index.html でゲームのスクリプトより前に専用の script タグを置く方法です。

<script type="module">import "myaku/auto";</script>
<script type="module" src="/src/main.ts"></script>

または、エントリーファイルの最初の import にします。

// main.ts
import "myaku/auto";
import { Game } from "./game";

開発用ツールなので、本番ビルドには含めないでください。

オーバーレイを読む

右上の隅に小さなグラフが出ます。バー 1 本が 1 フレーム、線が予算、赤いバーがヒッチです。ヘッダーには FPS、95 パーセンタイルのフレーム時間、直近 2 秒のヒッチ数が表示されます。

• グラフにホバーすると止まります。
• 赤いスパイクをクリックすると判定が見られます。
• Alt+M でオーバーレイの表示・非表示を切り替えます。

オーバーレイなしで使う

グラフではなく数値がほしいときは API を使います。

import { myaku } from "myaku";

const profiler = myaku();
// … しばらく遊ぶ …
console.table(profiler.report().worst.map((v) => ({ cause: v.cause, ms: v.intervalMs, summary: v.summary })));

フォアグラウンドで計測する

ブラウザは、非表示のウィンドウ、ほかのウィンドウに隠れたウィンドウ、省電力モードのウィンドウでフレームを間引きます。Myaku はそうしたフレームをゲームのせいではなく throttled として報告しますが、本当のパフォーマンスを測るには、見えているウィンドウで遊ぶ必要があります。