Home

Awesome

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

debug.gameTimeInfo()

Prints values for