Getting FPS and Draw Calls from Code

Cocos Creator
1

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?

2

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

3

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.

4

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

5

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
6

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)`;