Advanced Timing Plugin: FPS graph, meter, text

[samme]

Source & Docs / Demo / NPM

Free bunny screensaver included.

[WiLD11]

Wow, amazing!

[Francisco]

thanks samme great plugin

how can I use your plugin on my game?

 

It's Done thanks works great

Edited December 12, 2016 by Francisco
Found the solution

[samme]

Oops, it’s in https://github.com/samme/phaser-plugin-advanced-timing#readme.

[WombatTurkey]

Really cool stuff, thank you samme!

[samme]

I'm working on two new display modes, domMeter and domText, which will skip Phaser rendering entirely.

Also will show WebGL drawCount.

[ForgeableSum]

Showing the webgl draw count ... you have no idea how long i've searched for a plugin or extension that does that.

[samme]

I'm probably going to show the updateLogic and updateRender intervals instead of elapsed and elapsedMS in the graph and meter displays. Opinions?

[samme]

Big update, I'm excited. 

• Two new display modes, domMeter and domText, skip Phaser rendering entirely.
• The graph and meter displays now show the actual updateLogic and updateRender durations (ms).
• The text displays now show Phaser's renderer type and WebGL draw count.

NPM: phaser-plugin-advanced-timing

GitHub: samme/phaser-plugin-advanced-timing

[samme]

 

[samme]

Should work with CommonJS/webpack now but I'd appreciate if someone could check.  

[samme]

@photonstorm Check out the new features! 

 

[Fenopiù]

Good morning @samme!

I don't understand how to install your plugin.

I've Phaser 2.6.2, if I write on my code:

game.plugins.add(Phaser.Plugin.AdvancedTiming);

Visual studio 2017 said "AdvancedTiming" does not exist in Phaser.Plugin.

Even if I put your files in my project folder and call theme in the head of my index.html it doesn't see the AdvancedTiming.

Otherwise:

game.time.advancedTiming = true;

will correctly work but I cannot use the AdvancedTiming methods.

[samme]

@Fenopiù it's because the plugin has no type definitions. You may be able to add some.

[samme]

@Fenopiù it would be something like this. I'm not sure sure how best to add them to your project though.

declare module Phaser {
  module Plugin {
    class AdvancedTiming extends Phaser.Plugin {
      mode: string;
      constructor(game: Phaser.Game, parent: Phaser.PluginManager, options: any);
    }
  }
  module Utils {
    class Debug {
      gameInfo(x: number, y: number): void;
      gameTimeInfo(x: number, y: number): void;
    }
  }
}