Making a Multiplayer WEB RPG - Part 1: Starting the project
Tags: babylonjs, typescript, gamedev, colyseus
Published: 2023-02-05 23:39:38

Good Morning,

As every good story start: Once upon a time, in august 2022, I decided to put in a bit of time every day into making a game with these goals in mind:
- could hold 20-25 people playing simultaneously in multiple zones
- top down rpg similar to diablo but slower paced
- open sourced on github 

Having never done this before, I took a small day of research and settled on: 
- **Babylon.js** because in runs on the browser 
- **Colyseus** because I did not want to build my own socket server and it looked great (I can confirm the latest 0.15 preview version is amazing and a breeze to use)

As you see my research was pretty much nonexistent, but luckily these were both great choices and after a month playing around (with a really steep learning curve), I got started.

> _FYI, I work with mostly PHP, with a fair amount of JS & Node. So, this is not my confort zone at all._

## Links (for the impatient ones)

I doubt the demo server will hold up to you guys, but it's as much as I can provide for the moment.
Demo: https://t5c.onrender.com/
Github: https://github.com/oriongunning/t5c
Progress post: https://forum.babylonjs.com/t/multiplayer-3d-top-down-rpg-babylon-js-colyseus/35733

## Current Progress

![A lovely little island](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/latgg96sd633u15fd0qn.jpeg)

Nearly 400+ commits and 3 months later, I’m starting to have a solid little prototype in place:
- fully authorative movement with client side prediction and server reconciliation
- server & client controlled collisions
- simple scene management & switching
- networked animated characters
- networked NPC entities with basic AI
- health and mana stats
- level & experience
- a basic ui
- 4 working abilities (still working on implementing casting)
- zoning system (ability to teleport to different locations)
- login / character selection/creation scene
- database persistence (using SQLite for simplicity)
- global chat
- and more...

## What I learned on the way

Addionnally, as you all would know, there are alot of things I learnt along the way, like:

- how to format & bundle with webpack & import dependencies to minimize bundle size
- how to setup a workflow for the level design between blender, unity and babylon
- how to prepare & export a navmesh
- how to setup a working demo (updatad with every commit)
- how to organize & structure your code to keep it as dynamic as possible and with the less duplicates possible (probably where I spent the most of my time: in refactoring loops)
- how to code in a networked way and make sure client never decides of anything and if he does, correct it once confirmation come back from the server. Fake it on the client basically :slight_smile:

## Things I struggled with and/or still struggling with

![An early screenshot of my game](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c3k3x8rps21refmotv6x.jpeg)

- Understanding to never trust the client with anything that impacts gameplay
- Timing: One of the hardest thing in multiplayer is dealing with time & latency because everyhting has to be server controlled and reconciled on client. Anyway this point alone could be worth a whole topic on it's own.
- Ennemy AI: Having never done anything like this, it took me a long time to get a basic AI in place. And there is still alot of work to be done there.
- Collisions: Not wanting to run a copy of the world on the server, I decided to use navmeshes, but to get decent way of generating a navmesh that matches my level was alot of slow & hard work. My current workflow is by using unity: generating the navmesh in unity, exporting as GLTF, retouching with blender. I'm happy with that solutions for the moment. 
- Player Movement: Client movement prediction & server reconciliation was a absolute mindf*** to put in place when I started this project but the results is well worth it: now even with 500 latency, the player moves around like butter. This is a must read to understand the magic that is happening: https://gabrielgambetta.com/client-side-prediction-server-reconciliation.html

## Conclusion

So in regards to my initial roadmap, I’ve went a bit further than planned. The result is that I’m feeling much more confident in my abilities that when I started and will continue working on this for the next few months. 

### Here is the tings I would like to add:
- Basic name, logo & branding
- Basic levelling up & experience system
- Improve AI pathfinding & behaviour (spawn and patrol around an area only for ex)
- Better monster and player selection (its a little hit & miss atm)
- UI framework to deal with popups/panels using BABYLON GUI
- Inventory Panel
- Character Stats Panel
- Skills Panel
- Item drops from monsters (the actual items & gold will be on the floor ready for anyone to pickup so be quick)
- Ability for players to pickup to inventory & drop items from inventory
- Items & Spells database ( to be stored in a json file, format to be determined and associated ui tooltip to display information )
- NPC vendors where you can buy spells & items

## Special Thanks

A big thanks to the whole DEV.to community for being great. Even If I have not interacted much, I've found many answers & inspiration here.

Last but not the least, none of this would have been possible without the amazing support of the Babylon.js community and their continuous support & encouragement!