Getting FPS and Draw Calls from Code

Hi all!

I am using Cocos Creator version 3.8.3.

When working in the editor and launching the game in the browser, I have access to the “Show FPS” button. But when I build the game (Web-Desktop, Web-Mobile), this button is no longer available. I would like to display some statistics (FPS and Draw Calls).

How can I get these values ​​from the code?

On the build config, you will find an option “Debug”. Check it and build again it should appear

I know about this. But this information is always shown. And it is not always clearly visible (size, color). I want to be able to display FPS and Draw Calls in the location, size and color I need.

You probably can use Game class or Profile class for that. Read a bit deeper the API docs

At the same time, the profiler is generated as a node inside the scene scope, so you can also try to manipulate the elements directly there

You can simply get FPS by deltaTime. In cocos, deltaTime params on update method is time between two update call. So you can get Frame Per Second by let 1 / deltaTime.

Eg: my normal deltaTime is 0.016 so my FPS is 1/0.016 = 120FPS.

1 Like

In this case, FPS may jump. For now I did it like this:

private delta: number = 0;

...

this.delta += (deltaTime - this.delta) * 0.1;

let ms = this.delta * 1000;
let fps = 1 / this.delta;

this.label.string = `${fps.toFixed(0)} (${ms.toFixed(1)} ms)`;