Babylon.js Browser 3D MMO - Devlog

Hello,
I would like to share with You my first steps with babylon.js, typescript and in general with game development.
As You can see ‘MMO’ in the topic name aspirations are big :smiley:

I’m working on MMO game with similar gameplay to the mu online, diablo 2 etc. I decided to write server from scratch. I’ll implement whole game engine with collisions, combat, loot etc. From tech stack what I can share for now from UI side is TypeScript with Babylonjs. On the server side it will be mostly java, spring and also micronaut. Maybe in future some nodejs(to learn about it a little bit). Regarding databases I’m not sure yet if sql or nosql will be better choice.
Network communication is handled by socket.io but I’ll switch to raw Websocket’s. I also used redis pub/sub for communication inside server infrastructure.

I decided that I’ll document my journey since very beginning and I started recording Vlogs and I’m publishing them in the YT. My presentation skills are close to zero and I know that quality of my speaking and explaining is extremely low.
But improving my speaking and presentation skills are also purpose of my project.
And We will see how far I will go with them and with the game :stuck_out_tongue:

Root of the game is authoritative game engine, clients are responsible only for sending input, receiving state from the server and displaying it on the UI.
So far on my devlog I showed how I created prototype implementation, which can handle logging in multiple players, simple players movement, global chat and monsters which for now only chase players and very simple implementation(prove of concept) of player attacks.
Still there’s not much to share from the babylon.js side, just few meshes and ground but…
I want to show journey not the final result.

Recently I totally redesigned UI and server code and hopefully next episodes will be more interesting :stuck_out_tongue:
Especially for this occasion I’m sharing some insight from current state of the game:

link to the video:
https://youtu.be/UmN4pCFGXDM?si=ZKaR61XGjMpXRquB

This is link to my YT channel:
https://www.youtube.com/@MaiuDevLog
and link to the most recent video(at this moment):
https://youtu.be/HRGel_JegvE

Also You can find me on dev.to
https://dev.to/maiu

Hope You’ll like it :slight_smile: or at least not hate it :stuck_out_tongue:

9 Likes

This is a very cool project! You already did some pretty impressive stuff and I hope to see more updates in the future :smiley: You might be interested in @oriongu 's project as they’re also doing a MMO! [OPEN SOURCE] Multiplayer 3D RPG Using Colyseus - Demos and projects - Babylon.js (babylonjs.com)

1 Like

Thanks @carolhmj
For now I’m focusing mostly on general architecture to prepare solid foundation to keep mess in ‘smaller boxes’ this will allow me to iterate over more efficient logic implementations without refactoring all the stuff each time. And then I’m planning start adding new features like equipment, some combat, experience etc.
Regarding Oriongu project I saw it before and to be honest it inspired me to use babylonjs. I was thinking for some time about some game but I didn’t want to learn C++/C# :stuck_out_tongue: I was considering some java library or sth in Rust.
But opportunity of having game in the browser(which is much simpler to share with online audience) and learning TypeScript finally convinced me :slight_smile:

1 Like

There is OpenMU project - c# server for MU online. I have tested it with my test web client which communicated with the server through the ws-tcp proxy.

So maybe it is a good idea to implement only client side first to reduce the scope of work.

Anyway good luck!

1 Like

@Alexander_Sosnovskiy
I didn’t know about it. Thanks :slight_smile: Idea of the project is to learn mechanics etc also on the server side so I’ll stick to my implementation (at least for now). But I think this OpenMU project will be great source of knowledge. For sure I’ll investigate it a little bit.

Regarding progress, today I managed to implement entity interpolation. Even with 3 syncs/sec from the server other players movements looks very good. Next topic is client prediction and some collisions/or some kind of navmesh. Soon I’ll share some more info - I need to catch up with recording. I’m few episodes behind my current progress.

Hi there!
I recorded new episode for my devlog.
Episode is about new UI screens (login, registration etc.) and how I’m managing transitions between them :slight_smile:

link to the episode:

Some spoiler from current work. I managed to implement client/server clocks synchronization and client side player movement prediction. I added few meshes to the map and in the next days/weeks I’ll be working on implementing collisions (SAT 2D).

This is how game looks right now:

used assets: Quaternius • Free Game Assets

Hello,
Short update from my side. I didn’t abandon project permanently. I was spending my whole free time for other personal goals and I think I’ll be able to work on the project again.

Since last post for the whole February I was rewriting client side prediction, entity interpolation, clock synchronization etc. from mechanism based on time to ticks.
I totally rewrote and simplified server side architecture.
I was able to implement spatial hashing and SAT 2D collisions detection with quite good effects.
Code got messier, it was harder to add new things and after some research I started implementing simple ECS framework just for purpose of simplifying adding new things. And it stopped there.

Few days ago i decided that rewriting server and client side will be the best option. I have a lot of code to reuse so it should be fast. And with much more knowledge then before I should end up with the code much easier to maintain.

Yesterday I setup new repos and work started. I’m working on simple ECS api interface and integrating it with babylonjs code. And I choosed name for my ‘game’ :slight_smile:

1 Like

Nice update, glad you are starting back

1 Like

Very dumb ECS-draft on server and client side is on place. I was able to integrate it and send msg from client to the server to join zone and load character after receiving response.
On client side I prepared worker thread to handle networking and other stuff in the future.
Main thread will be responsible mainly for rendering, interpolating entities and handling player inputs. Will see if I over complicated it or it’d good decision…
For sure I solved one issue with not binding physics loop to the requestAnimationframe() from the browser and I think it was worth at least because of it.

Right now I’ll work on integrating user inputs and sending them to the server - probably ‘walk’ command.
btw: fps significantly dropped :smiley:

1 Like

Short break from implementing logic. Added nicer grass, sky and water around the map:

2 Likes

Hello,

Here’s another brief update on the progress. I’ve been considering different movement types for the game: go-to-click, WASD, 8-way WASD, or something else. While go-to-click is easy to implement, it often feels clumsy and makes the gameplay static. WASD, like in WoW, is a good option but not quite what I’m aiming for.

I’ve decided that an 8-way WASD setup would be the best fit. It’s more dynamic and provides a gameplay feel similar to Diablo. It might end up being a hybrid with go-to-click, but we’ll see how it evolves. :slight_smile:

The implementation is not perfect yet and has some bugs, but I think it’s sufficient for now. :slight_smile: The jittering you see is due to the lack of client-side prediction. I plan to add that in the near future :slight_smile:

Short demo:

2 Likes

Hello,
Here is a next brief update from me.
Bad weather means more progress :slight_smile:

Players can now see other players, including their position and rotation changes. Additionally, running animations are now being played.

In the chat, which is currently read-only, a message is sent to all online players whenever someone joins the game.

What’s next?
I will work on hiding entities when someone leaves the game. I will also introduce a spatial hash algorithm to calculate nearby entities, which will be used for ensuring that only information about those entities which are nearby is sent to the players.

Best regards

2 Likes

Hello!
For the last 2 days I was working on synchronizing entering/leaving game and on spatial hash grid based area of interest. Also I added small enhancements on the UI. which are entity selection mark and target status panel with target entity. Fixed few bugs and probably create few new ones.
I’m still struggling with the name plates. I dont know understand yet, why I see them in the mirror reflection :man_shrugging: but I’ll try to fight with it.
In general I’m really happy from the progress. I almost rewritten half of my code. And it give me hope that it will be better quality this time.

Soon I’ll need to finish part of ECS framework on the client side, because is not yet finish and because of it I’m fighting with spagetti code :pie:

What’s next?
Right now I’m thinking about adding some combat and hp for the players. I want to handle more messages types before I’ll dive into ECS like thing. It should be easier to create decent interfaces.

Below two videos with current status:

1 Like

Looking good @Maiu :+1:

What library did you use for the spatial hashing? Do you mind giving some more details as this is really new to me? :grin:

For the nameplates, I struggled a fair amount too (BJS GUI was just too slow with many entities), you can check the solution I came up with here, performance is great and it’s all dynamically sized:

Hopefully it’s not too messy for you to understand :slight_smile:

1 Like

Check it Spatial hash demo

What will you use for ECS?

2 Likes

Hi @oriongu Glad You like it :slight_smile:

What library did you use for the spatial hashing? Do you mind giving some more details as this is really new to me?

I’m using spatial hash grid implemented in similar manner like is done here. I just slightly tailored it to my needs and I rewrote implementation to java.

I have 3 versions of this algorith:

  • brute force (iterating over each entity and comparing power^2 of distance - to not calculate roots)
  • implementation based on maps
  • implementations based on tables

This are results from performance testing. Zone size is 1000x1000 and time refers to 10k calls of the method:

SPATIAL_HASH_ON_MAP
10[ms] - addEntity
300[ms] - findNearIds - from coordinates
134[ms] - findNearEntities
7[ms] - updateEntity
304[ms] - findNearIds-from entity
7[ms] - add + remove

BRUTE_FORCE
2[ms] - addEntity
914[ms] - findNearIds - from coordinates
659[ms] - findNearEntities
1[ms] - updateEntity
1262[ms] - findNearIds-from entity
2[ms] - add + remove

SPATIAL_HASH_ON_LIST
3[ms] - addEntity
127[ms] - findNearIds - from coordinates
51[ms] - findNearEntities
2[ms] - updateEntity
123[ms] - findNearIds-from entity
4[ms] - add + remove

My engine is performing spatial grid update each 1second. And sends updates to the clients.

@oriongu Thanks for the info about name plates :hearts:. For sure I’ll take a look :slight_smile: But for now I’m not focused on UI performance(presentation also) too much. My goal is have something which will display needed info like focusMark/target status bar. And later I’ll iterate over the slowest things and try to optimise it.

@Alexander_Sosnovskiy

What will you use for ECS?

I’ll implement it by myself for now. Still not sure about full architecture on the client side. It will work on top of babylonJS code anyway and I believe there’s no performance gains. So I can go with simple implementation, keeping in mind only separation of concerns (entity, component, system)

3 Likes

Hello again,
Next day next update, but don’t get used to it to much :smiley:

Today I was working on the UI. I fixed player name text (it’s not mirror reflected anymore). I added tooltip with name and class while hoovering over players. And added ability panel for skills and some actions like character stats, inventory etc.

2 Likes

Hello,
Last few day i spent on refactoring server code and redesigning architecture on client side for ECS like, but to be honest most of it is event based approach.
Anyway it feels much more better than before when i reached code complexity critical point and further development wasn’t possible. Right now adding new things is much easier, still there’s a lot of to improve and optimize but i think it’s possible to work with current architecture without much hassle and this was the main goal.

On the video I’m presenting few new things:

  • server info on the intro screen (it’s being refreshed each 5s)
  • added HP component to the entities
  • added first melee attack.
  • added system handling animations (in this case attack)

Melee attack is taking between 1-3 dmg, atack is possible when closer than 5 units and for now. When entity hp falls below 1 it reset to the full. Death it’s not planned yet :smiley: As You can see hp information is nicely refreshed in the target and player panels.

Next on the board I think is displaying validation information about skill range, wrong facing on player etc. And after that I think I’ll work on tick synchronization between client and server. It might be tricky because networking is handled by worker thread but we will see…
After having sync tick clock I will be able to work on entity interpolation and client side prediction. It will add smoothness to the player and entities movement

2 Likes

Hello,
This time I was upgrading combat mechanics. I worked on syncing animations between clients, showing combat text and playing sounds. Also I added pseudo precast animation before response from the server is received that attack was successful.
After adding combat text, performance dropped very significantly and my old notebook doesn’t handle it good :frowning:

Next on the plate is small refactor on the client side. I want to make one service responsible for event messaging generic, this way I will avoid future mistakes. And also i have one thing to optimize in my ECS engine it wont change much but code will be cleaner.
And for next steps I need to work on combat text performance because now it’s terrible…

Hope You like it!

2 Likes

Hello,
I discovered that my browser is not supporting parallel shader compilation and because of it i was suffering from low fps. After switching to another browser in the moments where my fps was dropping below 10 it was about 50-55. In case of heavy spamming attack messages (50 attacks per second) fps in another browser was dropping to 30 (old would probably die :D)
After optimization without screen recorder I didn’t manage to drop it from 60 fps :o

The optimization which I did was to reuse same dynamic texture and plane for player name text and for floating combat text. Previously for each damage text new dynamic texture and plane were created.
Yesterday, I was thinking about using sprites/images to mimic combat text but taking into consideration current performance I don’t really need it :slight_smile: Great, because I will be able to spend more time on the game features.

Video below:

2 Likes