Do you use stats.js, etc.?

Phaser 3
1

Hello

Do you use stats.js with Phaser ?

And if “yes”, what is the best way to use it ?
I didn’t find any example.

BTW, are there other tools to monitor perfs, etc.?

Thanks in advance!

2

Yes! I use stats mostly to measure the render time and also to keep an eye in the memory consumption.

// Instantiate Stats js 
const _stats = new Stats();

// Instantiate phaser game
const game = new Phaser.Game(GAME_CONFIG);

// Add listener to these events
game.events.on(Phaser.Core.Events.PRE_STEP, () => {
	_stats.begin();
});

game.events.on(Phaser.Core.Events.POST_RENDER, () => {
	_stats.end();
});

Those events where the earliest and latest events I could find to get the most out of the inner working of phaser’s internal update loop.

A simple fps monitor can be made adding a text gameobject and calculating the fps in the update() of the scene

update(time, delta) {
		if(DEBUG.DBG_DISPLAY_FPS) {
			this._dbg_fpsTxt.setText(Math.floor(1 / delta * 1000));
		}
	}

A more complex way is to use Chrome Dev Tools, Performance and Memory tabs can be useful.

I can’t remember the name now but I know there is a tool made in JS to monitor WebGL stats, I’ve use it a couple of times with threeJS. I’ll try to find it. Another option that’s growing fast on me is Safari’s Canvas Debugger, to monitor WebGL and canvas calls. =)

2 Likes
3

Wonderful, BIG thank you !

Did you mean gstatsjs ?

4

I didn’t knew that one, gstats, I’ll try it out sometime :).

I’ve found them, they were WebGL Inspector (but doesnt work anymore) and the other one was https://github.com/spite/rstats :wink: But I don’t know if they can be used with Phaser3.

1 Like
5

Hi @jackfreak
I just find another and EASY way :star_struck:
In chrome click on :

  • the menu (3 vertical dots) on the top-right side
  • “more tools”
  • “rendering”
  • “FPS meter” on the bottom

Enjoy

2 Likes
6

Yeah there’s also the FPS meter of chrome dev tools :slight_smile:

I forgot about it, I don’t use it often cause I need to test my games on different devices so stats.js or the text gameobject updated in scene.update() are easy enough ways to always have an fps meter visible to compare fps in cross-device testing. But if you are testing on desktop that one it’s just a click away :wink:

1 Like