Creating a multiplayer game with TypeScript, Java and WebSockets

Back at the end of 2020 I created a multiplayer game using the Phaser game engine. Players connect to a Java Tomcat server using WebSockets to communicate.

To start you have to join a lobby. The host (first person to join the lobby) can control parameters such as movement speed, vision radius and round length. In the game a random person is selected to be the chaser in each round. They have to try and catch other players as they run around the map. They get a point for every person they catch. The rounds repeat until each person in the lobby has been chaser once, at which point the person with most points wins.

The host can set various parameters and start the game when ready.

To create the game I created different Scene classes for the different parts of the game (the main menu, loading screen, area players wait for the host to start the game, the actual rounds and the scoreboard). This meant that it was much easier to extend the game by adding additional scenes as I went along, unlike the other game I created with Phaser where everything was in one scene.

Originally I created the server using Node.JS but I switched to using Java with Tomcat because I wanted to practice using Java as I was learning it for my Duke of Edinburgh skills section. I chose to use WebSockets instead of HTTP requests to simplify the system (there’s no need to open a new connection for every message) and to make it faster, as once the connection is established you don’t have to send as many headers with each piece of data.

My first attempt to implement the multiplayer was a big mess. I tried to create it as I went along, which made it overcomplicated and unreliable. I scrapped what I’d done and planned a new protocol for communicating between the clients and the server. They exchange JSON objects and each object has a type code that specifies what data the object contains and what the purpose of the message is. After I designed it properly the multiplayer was much more reliable and more extensible.

I also enjoyed creating the maps for the game. I used ‘Tiled’ to create tilemaps using tilesets from OpenGameArt, which was a new experience for me.

The circular robots must run away from the chaser robot with spinning blades.

To catch the chaser must press space. After being caught, the player becomes a ghost that isn’t visible to other players but can still look around the map and watch other players.

You can see the code for the game on GitHub here.

It was fun to create the game and it also taught me how important it is to plan complex things before trying to implement them. I’m hoping to improve the game with a better user interface and refactor the class structure to simplify it one day. I also want to improve the controls, such as setting it up to catch automatically when a player is less than a certain distance away, instead of having to press space to catch.

Leave a comment

Design a site like this with WordPress.com
Get started