I Tried Making a 3D MMORPG Game in JavaScript

here's the idea i'm going to try and build out a 3d mmorpg from scratch in javascript kind of like world of warcraft or really any of the big ones that are floating around these days i'm not going to lie i've got a lot of problems to figure out here i mean i'm a graphics guy i only have the most basic understanding of networking and so there's a whole bunch of questions i have like what's the architecture for one of these games even look like how do i deal with lag and that kind of stuff what language should i use for the server if i use javascript node.js or dino or deno or whatever what is even the difference between those so i've kind of got a lot of things to work through here and i'll do a bunch of research there's info and references online for the architecture breakdowns on the various approaches to networking and even suggestions on what language to use to start i'll just stick with javascript and i've chosen to go with socket.io mostly because it was the first thing that came up when i googled for a library and looking through the site it looks pretty easy to get things going this getting started tutorial is downright trivial so i've just copied all of this to a set of server and client files and when we run this oh well some sort of cores error actually doesn't seem like this is a big deal socket io has a whole section on what to do here okay i'm a little ashamed of how long that took luckily stack overflow saved my butt at some point so this is off to a super bad start but at least we now have the ability to connect and communicate between the server and client let's get a basic scene going the next step will be to take one of the three dot js examples from before and integrate the socket.io code in what i'm going to do is copy one of the example projects in and in the code here i'm just copy pasting the basic socket i o code in when we load this up well all we should see is a small scene with a plane in box and in the console we should see the output from the server nothing crazy or impressive to see here at least not yet let's get some stuff moving around we have our connection established let's get some players in here so in the server code what i'm going to do is whenever a connection is made we're spawning off a new wrapper around each player and we'll keep track of all of them and the first thing the server sends is a message of where the other connected players are on the client it's pretty similar we listen to messages from the server it sends you a list of all the other players and where they are so when we load it up the first browser just sees itself but if we go and open the second browser yay we see two boxes and another box appears in the first browser i've just quickly attached some keyboard input to the box and now we can move it around so we'll just send that to the server on the server it'll receive the new player coordinates and just spam that out to every other player and now that gives us two movie boxes you can see in one window as i move it around it moves around in the other window so win let's make this look a little bit less sad we just have these little boxes let's tighten up the graphics and we already have a few models from previous tutorials so in the code here what i'm going to do is copy paste the character movement and loading code from another tutorial here on the server i'll just modify the first message it sends it'll randomly pick between either the zombie or the guard when you first connect when we load that up it looks pretty sweet we have two players now with actual models not crappy little boxes but there's a problem in that the main character moves around fine but the other player seems to be idling internally my first thought was to just send whatever state they're in as part of the transform which is just an awful solution but surprisingly works you can see me moving around and the other player is also walking and running and look if i hit the dance button they dance and it gets mirrored in the other browser so hooray for bad solutions let's add some chat we practically have an mmorpg already depending on your definition of massively but we're missing some basic functionality that a lot of mmorpgs have which is some sort of chat box yeah that's all that's missing let's add that so in the code i'm just throwing together some html and an input box which will display in the lower left corner loading up that test one you can see the text down here so it's all good let's make it real back in the code when you enter some text and hit enter i just wipe the input element and then send that to the server which spams it out to everyone easy enough now it works and i can chat with myself which is pretty cool and super easy and you can see as i open up a second browser window and write something it also shows up so really cool but let's move on let's add some floating names here again looking at reference footage in other words world of warcraft everybody's name floats over their heads so let's do that this is pretty simple 3.js has this canvas texture element which is super versatile i can just draw to a canvas and then 3js will make that into a texture then when we create a sprite out of that and position it over the players it's all good you can see that everyone has a name now it's random since nobody actually has a name and code but it works so let's just ignore that for now and we'll swing back to it at some point later so a small check in here we've got a few things working just barely but we need an entire world we need interaction between players we need npcs we need a way of supporting all of this without the server exploding so there's more than a few to do's here integrate our rpg game code a little while ago i threw together a quick rpg skeleton which does a lot of things we want like fighting inventory that kind of thing what i'm doing is integrating all of this into our little networking demo here which mostly means that i'm moving a lot of the networking code into its own behaviors and disabling anything that just isn't going to work anymore in the networking environment once we load that up well we don't actually expect to see much i removed pretty much everything but we have the characters again and we have a small world now with a flat ground and the sky it was a lot of work for seemingly nothing but it'll help us move forward start sending proper state my understanding of reading about entity interpolation is that we need to step the server at some sort of tick rate then update all the clients on the server i'm changing the architecture a bit we now have this update loop that runs and updates all of the clients doing whatever logic and updates are necessary and periodically sending a state update to everyone on the client i'm just sending transforms and actions so that's all we're sending out on the server the big difference is now on the client we're going to receive those updates and instead of just applying them right away we're going to save them with a small delay then gradually apply the updates interpolating the state valve has a really great write-up on entity interpolation here and i'll leave a link in the description below but the idea is that you queue updates from the server and you smoothly play them back on the client that means now in the game instead of them jerkily moving around they move and turn smoothly which is way more realistic and fun to watch we need stuff to die part of what makes these mmos fun is the combat so we need to add some killing in here our rpg already had the ability to kill npcs so we just need to thread that through in a way that works with the server i'm kind of thinking when you attack you send an event to the server which then broadcasts it to everybody nearby in code that means that we need to hook up the attack controller to send an event to the server saying we're attacking something and on the server that event gets queued up and then when the tick goes off it just sends up all the events that occurred since the last tick in the client code we interpret those events in the npc network controller setting appropriate animations and even playing effects loading this up cool we have attacking watch i can load up a second character and then i can be a total jerk and just walk up to them and start attacking for no reason just like in real games let's make the world more worldly right now it's just a big flat green plane representing the ground which is ugly and stupid i have better terrain work from other videos notably my terrain generation stuff we just need to integrate it that's easy enough dropping the code into our folder and instantiating it is trivial but the problem is that the terrain had a custom shader and also see those big ugly seams everywhere i never did come back and fix those i make a lot of empty promises anyway let's fix those now well in my recent fog tutorial i showed you how to hack into 3.js of shaders we're going to do the same thing here in the code we're going to intercept the shader before it's compiled and we'll inject this chunk of terrain shader code inside the standard shader it's a gross ugly hack but look now the character has a nice shadow which shows up on the train properly and also receives the lighting in the scene now we need to fix these big seams in the world something that i've been promising to do forever there's clever and less clever ways of approaching the problem i'll choose the less clever away since it's easier if i have a chunk of terrain let's draw a chunk of terrain like this a super-duper easy way of fixing the seams is to just give them a little skirt around the edges in the code that means that we just need to go back into this block of terrain generation code and add an extra layer of vertices around the edge then add an extra couple of small loops to go around the edges fixing them up loading that up we see that well it actually took a few tries because i managed to screw this up in a variety of kind of interesting ways but eventually this worked out the way i wanted it to and we got terrain without little slivers everywhere the dumb approach works well enough i can't really see the skirts if you can then you have better eyes than i do this world is pretty dead we've got our world yes but it's dead there's nothing here we need some foliage and stuff there's a cool site i like quaternious this isn't sponsored or anything it's just nice stuff and free anyway there's a bunch of trees clouds rocks and other junk spread over a few packages so i took those in code i just created this scenery controller object whose job will be to spawn bits of foliage everywhere the trick here is that if i spawn things randomly two different clients will see different things see here i load up two side by side and notice they don't see the same stuff everywhere so we need to spawn these randomly but deterministically i'll use a uniform grid to do this it's kind of like doing poisson disk sampling except way worse and not similar at all but it's cheap and easy i just loop over a grid of nearby points sample the noise at specific locations and decide randomly to place something or not that way when you load up something on both clients they see exactly the same thing same foliage same orientation everything in exactly the same spot let's ditch the zombie in the guard there's this site mixamo which has amazing animated characters which are completely free so i scrolled around here looking for a few characters that we could put into the game i settled on these two this sorcerer looking girl maybe i can give her some cool effects and this night guy i can give him different weapons but there's a problem and there's always a problem anyway so miximo exports fbx files and 3.js imports fbx easy right except no so you end up with totally botched characters sometimes they work like with the zombie in the guard and other times no i have no idea why i googled around a bit and on don mccurdy's site i found a way forward if i import all of these into blender myself along with the animations blender can re-export this all as a gltf properly so that's what i did i grabbed them one by one with all the assets imported them into blender which was painful since i don't know my way around blender but it's worth it look at my working new characters so serious and rpg-ish let's add some monsters now so same deal we need to browse mixamo for some free monster models there's a bunch of cool ones like this warwick guy or girl or whatever it is looks strong there's also this zombie thing looks kind of like out of a blade movie took both of these there's a bit of server work to add one of these you create an instance of an entity like the actual players but we make it slightly differently since there's no socket connection i made this new world ai entity that's basically just a wrapper around it and it passes a fake client to reuse the same code that the player does when i load this up cool we have this dude just kind of standing there doing nothing so it worked but we want this guy to run around but there's a few problems he's standing through the ground and the server literally has no idea what the terrain is like the server and client share no code at all right now and node.js has a completely different style of importing modules than the browser does this was a bit of a wild goose chase my complete and total lack of experience with node.js was showing pretty strongly here but it turns out newer versions can use the same code so you just rename everything what dot mjs and update node and yay look my guy is standing on the train the server knows where the terrain is now make the monsters less stupid i just want them to follow me around so i moved the spatial hashgrid code if you remember that tutorial i moved it to a shared spot in the server and client and added a quick finite state machine to the ai it's just a few crude states like just stand there see someone and walk towards them attack etc like always takes a few tries to get this right but you can see the progression here until i finally worked my way through the bugs and it followed me around make a lot more monsters we've got to start producing monsters like crazy now that they're working so i make a quick spawner thingy on the server to wrap up the spawning code and just throw a big loop to spawn them all over the map that kind of works like i can log in and see the monsters in my area but there's a problem like always i kind of assume the loading code didn't try to load the actual assets from scratch each time but save them no idea why i thought that but yeah this is super slow to load them all so just make one loading interface and route everything through there and clone if it's already loaded job done way faster also this guy kind of blinks in and out of existence occasionally looks like some sort of 3.js bug so i just disabled frustum cullen kind of tired of dealing with this let's add a little bit of polish i want some cool spell effects like the big games do and i made a particle tutorial a while back so we'll just use that what i need to do is create a new effect controller component thingy and we'll instantiate a particle system in there binding it to the hands of the character i don't have some sort of awesome unity style ui to make my particles in so you get whatever i programmed in a few minutes and again broken at first but a few bug fixes in and i finally got a casting fiery spell thing so all good last step let's add a login screen let's make it so that you can actually choose your name and log in so i threw together some really quick html and that gives us a really basic screen warcraft zone is certainly cooler though so i've taken some inspiration and now i'll just draw over it really quick hooray look at that we have a login screen let's turn on some dramatic music too and i can write my own name and log in now at this point you can barely tell the whole thing was made by one guy in a week and here's the final product we've got a full-on world here let me just kind of super-speed run around a bit and it expands out thousands of meters in every direction with no end to the terrain the foliage or the monsters well i mean there is an end i can run to it but yeah whatever this is good enough this was kind of fun to make i'm not really sure if i can declare it as success as i said at the beginning mmorpgs are super hard to make and there's so much more we could add to this more content quests actual persistence since i don't save anything but this is kinda roughly very roughly resembles one at least i'll clean the code up and throw it up on github so look for it there let me know what you thought in the comments below make sure to subscribe and like the video helps me out a lot until next time cheers

Channel: SimonDev

Views: 465,847

Rating: 4.9439464 out of 5

Keywords: simondev, game development, programming tutorial

Id: IptkgFOoci0

Length: 16min 48sec (1008 seconds)

Published: Mon Feb 08 2021

Reddit Comments

[u/subnub99]

Lol wtf this is dope

[u/USKillbotics]

"...but there's a problem."

Great project.

[u/zero-fool]

Duuuuude wtf A WEEK ?!? I mean I know a lot of this was done already but damn this rules.

[u/damyco]

Wow! Absolutely loved it... Wish I could create something similar, even if it's just a rough basic version! Well done

[u/cpow85]

This is amazing and looks like it took a lot of work. nice!

[u/PositivelyAwful]

Insanity. Reminds me of the first alpha build of WoW.

[u/PM_Me_Your_Picks]

Holy balls this is amazing!

[u/Hyetigran]

OP is a legend!

[u/HEISWALKINGONFIRE]

What level of difficulty would you rate to build this rpg?