Simple Multiplayer Game with Colyseus

[swkidd]

I was able to get a simple multiplayer game working using colyesus by running LittleJS on the server. The game is hosted at swkidd.github.io. I am using a free glitch.com server to host the backend, so it might not be live at the moment or else may need a minute to wake-up. Just in case, there is a single-player version of the game here: https://swkidd.github.io/tank.html

Still, the relevant parts of the code I used are hosted at github.com/swkidd/swkidd.github.io. The 'TankRoom.ts' file shows how I am using LittleJS on the server while the client game code is in 'game.js'. This might be useful for someone trying to figure out how to connect LittleJS with Colyseus.

Here's how I set up LittleJS to run on the server in case someone finds it helpful. I realize, in the future once there is a headless version available a lot of this will be unnecessary.

I used the 'jsdom' and 'canvas' packages for node to simulate a browser environment.
I hacked together a headless version of LittleJS. Basically I deleted or mocked things that were throwing errors in the node environment (event listeners, browser global variables etc). It didn't take long before I had a working version. From there is was just a matter of splitting the game's EngineObjects between the server and client.

This was my first time using colyseus and I'm not an expert at anything so expect some things can be done better. Either way I hope someone finds it helpful!

[adamfk]

thanks!

[KilledByAPixel]

hey @swkidd awesome work! I just checked in an option to enable headless mode. Let me know if it works ok for you!

df1ca5d

[swkidd]

Thank you so much @KilledByAPixel! I tested out the new headless mode feature and was able to get it working after two small changes.

1. I had to set headlessMode to true in the esm module source code. Otherwise the file initially runs with headlessMode as false after loading and the event listener code throws an error. I was thinking it may be possible to solve this issue by wrapping browser specific (headlessMode false) code in an initialization function that is called conditionally in engineInit. Something like:

function initBrowserSpecificFeatures() {
    if (headlessMode) return;

    // All browser-specific initialization goes here
    // For example:
    document.body.appendChild(mainCanvas = document.createElement('canvas'));
    mainContext = mainCanvas.getContext('2d');
    // ... other browser-specific initializations
}

function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, imageSources = ['tiles.png']) {
    if (!headlessMode) {
        initBrowserSpecificFeatures();
    }

    // Rest of the engineInit function...
}

I am happy to try and create a PR with these changes if you think this is a good solution.

2. My node environment doesn't have the AudioContext class so I had to change the line

let audioContext = new AudioContext

to

let audioContext = headlessMode ? null : new AudioContext;

With these minor changes everything is working well with no additional node libraries. I tested after removing the the node jsom and canvas libraries I mentioned above and there were no issues.

Thank you so much for this awesome project!

[KilledByAPixel]

thanks so much! I just checked in another fix that will hopefully do the trick. no audio context or input events in headless mode.

c32fb32