Phaser on Node.js (new version)

Phaser on Node.js

Allows you to run Phaser 3 Games (including Phaser’s physics engines) on Node.js.

It has been a while since I released @geckos.io/phaser-on-nodejs, but I have now finally added the possibility to set a custom frame rate and to load images and json files (TileMaps) directly into your server side Phaser Games.

phaser-with-nodejs

Custom Frame Rate

// set the fps you need
const FPS = 30
global.phaserOnNodeFPS = FPS

// prepare the config for Phaser
const config = {
  type: Phaser.HEADLESS,
  scene: [MainScene],
  fps: {
    target: FPS,
  },
  ...
}

Loader

preload() {
  // use a relative path instead an absolute
  this.load.spritesheet('dude', '../assets/dude.png', {
    frameWidth: 32,
    frameHeight: 48,
  })
}
4 Likes

Hi, I had a look and tested your games examples and looks working really nice, good work!
I’m just curious on this, don’t get me wrong, but I don’t get the point of why running it on Node.js or what’s the main idea behind this…
Which are the use cases? testing? checking untrusty clients? simply play with it?
Thanks for sharing it!

1 Like

If you are making a multiplayer game which uses physics, you can’t calculate the physics on the client side. Each player would see a different world.

In this case, you have to run your physic on the server and send a snapshot of the world to each client.

Hope this clarifies it :slight_smile:

3 Likes

I followed the tutorial and I get a phaser not being defined server-side. Does that have to do with jsdom and canvas? I haven’t used either before so am a little confused. Any help would be appreciated.

You have to install Phaser as usual npm i phaser :slight_smile:

I just added a basic setup example to the [README.md].(https://www.npmjs.com/package/@geckos.io/phaser-on-nodejs#basic-setup)

Hey Yannick. I appreciate the fast response. Yeah I didn’t require phaser so that make sense. It’s up and running, thank you very much.

1 Like

Hey Yannick. I had another question I was hoping you could help me on. I’m trying to understand general authoritative server architecture when it comes to phaser. Right now I have my client sending player input to the server, but there’s no way to keep the server authoritative since the physics are not running on it. I have phaser-on-node.js running on my server now, but my question is how do I implement my existing code so that I can do say, setVelocity for playerId when player sends movement input? Do I copy and paste the code over to the server? I hope my question makes sense, just having trouble conceptualizing how the headless authoritative server displays client actions on the client’s screen. Thank you.

  • The server runs all the physics.
  • The client does not run physics at all. He just receives the positions of the images and renders them on the screen.

Basically, the client send the inputs > the server adds the velocity to the player and updates the physics > the server send the new position of the player to the client > the client renders it.

I once made a very basic example. Hope it helps :slight_smile:


There are also some more complex techniques to apply like “Snapshot Interpolation”, “Client-Side Prediction and Server Reconciliation” and “Lag Compensation”. But these are advanced and not needed in most multiplayer games. See this video for more information.

1 Like

I’ve always appreciated your insight and contributions. I was wondering if you’ve seen what others are doing with Networked Physics??

1 Like

Thanks :slight_smile:

Yes, I’m familiar with it. This is Glenn’s Website. The same guy as in the video I posted above.

1 Like

how to use with multiple active phases?

Just use multiple new Phaser.Game(config)

the project is very good, but I can’t import using directories
class MainScene extends Phaser.Scene { constructor() { super('MainScene') } preload(){ this.load.image('sky', './public/assets/sky.png'); //error this.load.image('sky', 'public/assets/sky.png') // error }

error /
C:\Users\name\Desktop\server\node_modules@geckos.io\phaser-on-nodejs\lib\fakeXMLHttpRequest.js:21
throw err;
^

[Error: ENOENT: no such file or directory, open ‘C:\Users\name\Desktop\server\node_modules@geckos.io\phaser-on-nodejs\lib\public\assets\sky.png’] {
errno: -4058,
code: ‘ENOENT’,
syscall: ‘open’,
path: ‘C:\Users\name\Desktop\server\node_modules\@geckos.io\phaser-on-nodejs\lib\public\assets\sky.png’
}

use path to resolve the the correct path.

const path = require('path')

// check if one of them gives you the right path
console.log(path.resolve(__dirname, '../public/assets/sky.png'))
console.log(path.resolve(__dirname, 'public/assets/sky.png'))
1 Like

work

I just made an example repository

First off, thanks for creating this! Super handy, and easy to setup exactly what I needed.

I’m actually making use of the tilemap functionality, but it seems my collisions are at slightly different locations on the client / server. Does this seem like it could be due to an implementation bug, or any ideas?

I opened a thread here Collisions on client, versus server occur at different locations, thanks!

Although I added support for tilemap, I have never used one. I read you thread and suggest to debug your server
side physics using electron. See this example: Phaser 3 - Real-Time Multiplayer Game with Physics #2

You can code your server side game in an isomorphic way to be able to run it on electron (debug) or node.js (production).

1 Like

Hi @yannick . It was a big contribution that made phaser work on the server. If you don’t mind, I would like some advice from you about what you made here.

  • Each new map is a new phaser instance? or each new player? I don’t get this part. (I still haven’t seen the code in detail due to being traveling at the moment)
  • Are you making a stress test to see how connections geckos.io work without any problem?
  • Do you think that this structure that you made supports an action ORPG? I’ve been made a job to convert some flash games in html5, and I need convert a ORPG game, i would like to have some help from you, about answer me that questions

ps: I think it would be awesome you made a FAQ, but you must n’t have much time to do this.