DEV Blog #1 - Multiplayer 3d Top Down RPG using Babylon.js & Colyseus

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

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

• 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!