Appearance

Getting started ​

Install ​

bash
npm install -D myaku

Add it to your game ​

Load myaku/auto before your game's code, so it sees the canvas context and the game loop from the start. The simplest way is its own script tag in index.html, ahead of the game's:

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

Or make it the first import of your entry file:

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

It's a development tool, so leave it out of production builds.

Read the overlay ​

A small graph appears in the top-right corner. Each bar is a frame, the line is the budget, and red bars are hitches. The header shows frames per second, the 95th-percentile frame time and the number of hitches in the last two seconds.

  • Hover the graph to hold it still.
  • Click a red spike to see its verdict.
  • Alt+M shows or hides the overlay.

Without the overlay ​

Use the API when you want numbers, not a graph:

ts
import { myaku } from "myaku";

const profiler = myaku();
// … play for a while …
console.table(profiler.report().worst.map((v) => ({ cause: v.cause, ms: v.intervalMs, summary: v.summary })));

Measure in the foreground ​

Browsers throttle frames in windows that are hidden, covered or in power-saving mode. Myaku reports those frames as throttled, not as your game's fault, but you still need to play in a visible window to measure real performance.