How to display the FPS in PhaserJS

It's quite easy to display the FPS in PhaserJS, you just need to add 2 little things, let's see:

1 - Game constructor

In your PhaserJS game constructor, you should add the render function, if you don't have it already added:

const gameFunctions = {
  render,
  preload: onPreload, 
  create: onCreate, 
  update: onUpdate
};
let myGame = new Phaser.Game(800,600,Phaser.AUTO,"", gameFunctions);

2 - render() function

Create the render function or if you have it already, add the next code to it:

function render() {
  myGame.debug.text(myGame.time.fps, 5, 14, '#00ff00');
}

This will display the FPS at the top left corner with green color, feel free to change it ✍️

👁 Note the myGame variable it's a Phaser.Game

Done!

That's all, very easy isn't?
Leave a comment with your doubt or experiencies 🤙

David Burgos

Read more posts by this author.