DEV Community

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

Posted on • Updated on

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.
Progress post:

Current Progress

A lovely little island

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

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


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

Top comments (1)

orion3d profile image
Orion3D • Edited

After a big fight, I've managed to correctly implement casting and cooldowns that works even with bad latency. Now to implement auto attacking system... Fun! :)

Hard to showcase casting, but here is what happens when you die now!
Image description