phaser-plugin-advanced-timing

Shows FPS, frame intervals, draw count, and other performance info. Demo

Usage no npm install needed!

<script type="module">
  import phaserPluginAdvancedTiming from 'https://cdn.skypack.dev/phaser-plugin-advanced-timing';
</script>

README

Shows FPS, frame intervals, draw count, and other performance info. Demo

Usage

game.plugins.add(Phaser.Plugin.AdvancedTiming);
// or
game.plugins.add(Phaser.Plugin.AdvancedTiming, {mode: 'graph'});

The display modes are domMeter, domText, graph, meter, and text. The default mode is text.

You can save a reference to switch modes later:

var plugin = game.plugins.add(Phaser.Plugin.AdvancedTiming);
// …
plugin.mode = 'text';

The plugin also provides two debug methods:

game.debug.gameInfo(x, y);
game.debug.gameTimeInfo(x, y);

Beware that debug display can be slow in WebGL.

DOM Text, Text

plugin.mode = 'domText';
plugin.mode = 'text';

Text Mode

Both show FPS, render type, and WebGL draw count.

text is drawn on the game canvas. domText is a separate HTML element.

The domText element can be styled as

.ppat-text {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  font: 16px/1 monospace;
}

DOM Meter

plugin.mode = 'domMeter';

DOM Meter Mode

Shows FPS. It can be styled as

.ppat-fps {
  position: absolute;
  left: 0;
  top: 0;
}

Graph

Graph Mode

plugin.mode = 'graph';

Plots values for the last 60 updates:

Meter

plugin.mode = 'meter';

Meter Mode

Shows FPS (blue), update duration (orange), and render duration (violet).

Debug Methods

game.debug.gameInfo(x, y);
game.debug.gameTimeInfo(x, y);

Example output of debug.gameInfo() and debug.gameTimeInfo()

debug.gameInfo()

Prints values for

  • game.forceSingleUpdate
  • game._lastCount: “how many ‘catch-up’ iterations were used on the logic update last frame”
  • game.lockRender
  • game.renderType
  • game._spiraling: “if the ‘catch-up’ iterations are spiraling out of control, this counter is incremented”
  • game.updatesThisFrame: “number of logic updates expected to occur this render frame; will be 1 unless there are catch-ups required (and allowed)”

debug.gameTimeInfo()

Prints values for