Phaser >= 3.50 Issue

[realkotob]

Hello I just found this repo and I am using Phaser 3.50.

The readme mentions an error, what is it? I have no other option than to use phaser 3.50 so I would like to help fix it.

[yandeu]

The bug is in Phaser itselfe. The headless mode of Phaser does not work in 3.50.0.

Why don't you use an older version?

You could also use v3.24.1 on the server and 3.50.0 in the client.

---

Two hours ago, v3.50.1 has been released. Maybe it works now. Do you want to check it?

[realkotob]

@yandeu I will do what you said and use 3.24 on the server since that will probably work, or maybe 3.50.1. Thanks for responding!

[yandeu]

Looks like it has been fixed and does now work in v3.51.0

https://github.com/photonstorm/phaser/issues/5468

[yandeu]

Looks like it has been fixed and does now work in v3.51.0

Nope, it does not work. Even v3.52.0 does not work yet.

[photonstorm]

There are no open issues about HEADLESS mode on the Phaser repo, so until someone creates one this is going to remain an issue (whatever it is)

[photonstorm]

Having said that, our example works fine in 3.51 and above: http://labs.phaser.io/view.html?src=src%5Cgame%20config%5Cheadless%20renderer.js so if you've managed to break it in a different way then it definitely needs reporting as an issue.

[yandeu]

The issue is not in the browser. It's on Node.js.

Before v3.50 everything worked great. v3.50 created the issue photonstorm/phaser#5468. But since then, it does not seem to run on Node.js.

I admit I haven't investigated because I thought the huge update to 3.50 would bring some issues anyways and that this would be fixed automatically sooner or later. I was wrong :/

The code below works great in v3.24.1, but not in newer versions.

{
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "@geckos.io/phaser-on-nodejs": "^1.2.3",
    "phaser": "^3.24.1"
  }
}

// index.js
require('@geckos.io/phaser-on-nodejs')
const Phaser = require('phaser')

class MainScene extends Phaser.Scene {
  create() {
    console.log('it works!')
  }
}

const config = {
  type: Phaser.HEADLESS,
  banner: false,
  audio: false,
  scene: [MainScene],
  physics: {
    default: 'arcade',
    arcade: {
      gravity: { y: 300 }
    }
  }
}

new Phaser.Game(config)

@photonstorm Do you know how to run Phaser.js on Node.js?

[tsafs]

I'm successfully running phaser-on-nodejs with the phaser=3.54.0 now.

Perhaps unrelated, I noticed a problem where game.postBoot() was never getting called in the HEADLESS mode, see issue https://github.com/photonstorm/phaser/issues/5689. I created a pull request fixing this bug. You may want to use my fork for now as long as my pull request isn't merged.

Edit:

I noticed another error being thrown with the latest phaser version when calling scene.stop():

Error: Uncaught [TypeError: window.cancelAnimationFrame is not a function]
    at reportException (/usr/app/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:62:24)
    at Timeout.task [as _onTimeout] (/usr/app/node_modules/jsdom/lib/jsdom/browser/Window.js:521:9)
    at listOnTimeout (node:internal/timers:557:17)
    at processTimers (node:internal/timers:500:7) TypeError: window.cancelAnimationFrame is not a function
    at RequestAnimationFrame.stop (/usr/app/node_modules/phaser/src/dom/RequestAnimationFrame.js:189:20)
    at TimeStep.stop (/usr/app/node_modules/phaser/src/core/TimeStep.js:700:18)
    at TimeStep.destroy (/usr/app/node_modules/phaser/src/core/TimeStep.js:714:14)
    at PhaserGame.runDestroy (/usr/app/node_modules/phaser/src/core/Game.js:700:19)
    at PhaserGame.headlessStep (/usr/app/node_modules/phaser/src/core/Game.js:524:25)
    at TimeStep.step (/usr/app/node_modules/phaser/src/core/TimeStep.js:599:14)
    at step (/usr/app/node_modules/phaser/src/dom/RequestAnimationFrame.js:116:19)
    at Window.<anonymous> (/usr/app/node_modules/@geckos.io/phaser-on-nodejs/lib/index.js:31:44)
    at Timeout.task [as _onTimeout] (/usr/app/node_modules/jsdom/lib/jsdom/browser/Window.js:516:19)
    at listOnTimeout (node:internal/timers:557:17)

I'm not sure why this error is thrown, because via a quick search I think jsdom should expose cancelAnimationFrame(). However, I worked around this error by making additional game configurations:

const config = {
  type: Phaser.HEADLESS,
  ...,
  fps: {
    forceSetTimeOut: true,
  },
};

This forces phaser to use timeouts for the main game loop instead of window.requestAnimationFrame. I'm not yet sure how this impacts on performance. If anyone has a clue about this, please enlighten me.

[yandeu]

@sebastianfast Thanks a lot!

I personally wait for another release since I'm fine using an older version for now.

---

I'm successfully running phaser-on-nodejs with the phaser=3.54.0 now.

With your PR or the official 3.54.0 version?

[tsafs]

You're welcome. Made an edit to my original message, unrelated to your question

I'm successfully running phaser-on-nodejs with the phaser=3.54.0 now.

With your PR or the official 3.54.0 version?

Yes and no. I got it working in the first place with the official 3.54.0. Then I stumbled above the bug mentioned in the issue photonstorm/phaser#5689 and issued a PR for the fix. If you do not need to use game.postBoot(), then you will most likely be fine. I think, however, that most people will need this.

[yandeu]

I see. Thanks!

[yandeu]

@sebastianfast Looks like your pull request solved the issue. It now works again. Thanks a lot!