Multiplayer 3d Top Down RPG - Babylon.js & Colyseus

Hi there,

First of all, great job to all those who made babylon.js, it’s feels great to use, has a great commmunity, it’s constantly evolving and got many tools to achieve your outcome.

After scouring the forum for a while now, there’s clearly a demand for a simple example of how to use Colyseus with Babylon.js and as I’ve been working for the last 2 months (slow progress) on a simple top down rpg and I thought I might aswell share my progress.

Demo here (slow to load) : DEMO LINK

Current progress:

  • fully authorative movement with client side prediction and server reconciliation (server is king)
  • Server controlled collisions (using a navmesh)
  • Simple scene management & switching
  • networked animated characters
  • networked NPC entities
    ** spawning and moving around the world
    ** ability to respawn after death
  • zoning system (ability to teleport to different location)
  • login / character selection/creation scene
  • database persistence
  • global chat

Roadmap

  • entity spawning in a range around a point
  • entity ai (patrol / idle / attack (when in range))
  • performance optimization (only show entities in a range around the player)
  • right hand click camera rotate around player

Source
No reason I should not share it it can help anyone: GitHub - oriongunning/t5c: Building a basic multiplayer 3d top down rpg using babylon.js and colyseus

14 Likes

Yeah man!!!

Damn that was really hard but I managed to implement client side prediction and server reconcilation as explained here: Client-Server Game Architecture - Gabriel Gambetta

Even with a massive ping, client is moving smoothly!

So happy! :slight_smile:

2 Likes

Great work @oriongu! I’m using Colyseus as well, but less ambitiously with a turn-based game. Still early days though and nothing to show publicly.

It’s good to see how others are using Colyseus with Babylon.js.

We also use Colyseus here - https://www.metadojo.io/

3 Likes

Thanks mate, appreciate the comment.

I can’t wait to see what you come up with, hehe!

1 Like

This is amazing @PirateJC we need this somewhere in the doc I believe :slight_smile:

1 Like

impressive work @labris

2 Likes

Can’t agree more!

OK, I managed to get the zones working, so now we can seamlessy jump from zone to zone. SO much fun! It’s hard to showcase, but it’s pretty cool :slightly_smiling_face:

I’ll work next on a global chat, and then maybe we can do a larger scale test with a few more people and see how the server holds up.

2 Likes

Thanks a lot for the sharing. A real nice contribution :heart_eyes: :heart_eyes: that I think can be very helpful knowing just how much effort it is to master all parts of game creation. There’s always so little about these parts (people tend to prefer showing a full-game and focus on design, faen shaders or gameplay). Where this part is certainly one of the most important (and most frustrating) to build. I think this clearly deserves a mention somewhere in the doc. And also deserves a hug :hugs: for your efforts.

2 Likes

appreciate the kind words @mawa ! I must admit it’s not the most gratifying part of the game building process but I want to have a good enough base before rushing into gameplay and level design. :slight_smile: My goal is to be able to handle correctly ~20 people per zone, anything higher is just too much work (in my opinion) for a single person to build.

2 Likes

Hi there,

A global chat was rather easy to add compare to the other stuff

I started experimenting with unity level export to GLB and it’s giving quite good results (size and quality), and I may just stick to unity for my level design.

3 Likes

I finalized a workflow between unity and babylon which works for me, so I quickly did up 2 basics scenes just for the sake of testing my upcoming collisions system (easy to say, much harder to make)

heres a screenshot for the fun

3 Likes

Quick progress update:

I managed to implement simple server controlled collisions to my game, follow the progress forum post here: How to manage networked collisions (babylon and colyseus) - #15 by oriongu

If that doesnt look great, I dont know what does! :stuck_out_tongue:

(I didnt realize, I had music playing on the video, hope you guys like alpha blondy :grinning: )

2 Likes

LOL

love the progress here !!!

1 Like

Hi there,

Just another quick update on character creation / database.

You can now login / registrer, create new character, then click one of the available characters to join the game. Additionnaly, as you move around, your position and zone is saved.

Despite initially wanting to use firebase/similar, I went with SQLite (mysql database in a file) to keep complexity levels low & reducing external services to the minimum.

2 Likes

having fun refining game ui :slight_smile:


1 Like

That’s some incredible progress! Smooth multiplayer is definitely one of the hardest parts of a game

2 Likes

Thanks @carolhmj Appreciate the encouragement!

It seems like every step is hard: the last week, I’ve been mostly integrating a database and it was harder than I expected. You have to make sure 3 states are in sync: the database, the server state, and the client, knowing that each of these are working at different timings (client is in the future, server is in the past, database is in between).

Multiplayer is a whole new level of complex! (I usually code in PHP which is a very different way of thinking)

Anyway, im progressing! Thats whats important :slight_smile:

Next step should be easier: working on a small but decent town & dungeon level

1 Like

Afternnon,

Quick update on the level design i’m working on.

Additionally, I got client side collision working (using a navmesh too, same as server)

Note: how the heck are you supposed to get nice shadows…? I’ve got the light, the shadow generator, i’m adding the player mesh to it, and nothing happens, and I spend ages in the inspector with no satisfying result!



1 Like