FPS Display got error

Phaser 3
1

Dear Samme,

I copied your FPS display ( https://codepen.io/samme/pen/dyXyyMV?editors=0010 ) but when I ran it , i got the following errors below …

I console log the gameContext but it was undefined

I look at WebGLRender but could not find gameContext in the properties / methods …
the code is the same except I changed some coordinates…

Pls help

Thanks

this.game: Game {…}
fpsDisplay.js?f98b:19 renderer: WebGLRenderer {…}
fpsDisplay.js?f98b:21 gamecontext: undefined

fpsDisplay.js?f98b:26 Uncaught TypeError: Cannot set properties of undefined (setting ‘fillStyle’)
at FpsDisplayPlugin.render (fpsDisplay.js?f98b:26:1)
at EventEmitter.emit (phaser.js?d4ef:1908:1)
at Game.step (phaser.js?d4ef:162829:1)
at TimeStep.step (phaser.js?d4ef:89366:1)
at step (phaser.js?d4ef:89613:1)

  render() {
    const { loop, renderer } = this.game;
    console.log("this.game: ", this.game)
    console.log("renderer: ", renderer)
    const { gameContext } = renderer;
    console.log("gamecontext: ", gameContext)
    
    gameContext.fillStyle = "rgba(0,0,0,0.8)";
    gameContext.fillRect(0, 0, 200, 20);
    gameContext.fillStyle = "#ffffff";
    gameContext.font = "26px Arial";
    gameContext.textBaseline = "top";
    gameContext.bringToTop()
    gameContext.setScrollFactor(0)
    // `actualFps` is a moving average
2

Use the Canvas renderer with that plugin.

1 Like