I Tried Making a 3D MMORPG Game in JavaScript

I tried to build a 3D MMORPG (ie. World of Warcraft clone) in this project.
Support me on:
Patreon: / simondevyt
Follow me on:
Twitter: / iced_coffee_dev
Instagram: / beer_and_code
Github: github.com/simondevyoutube/
Here I tried to build a 3D MMORPG, completely from scratch in JavaScript/Three.js/Node.js. I'm not a networking expert, pretty far from it, but I make a stab at it. I took a bunch of code from previous tutorials, like the rpg game we build earlier, threw in some free assets, procedural terrain, and built a node.js backend for the whole thing. The code could server as a nice starting point for someone looking to build a larger project out of it.
The goal of this was to mash together a bunch of elements to get a mmorpg skeleton, using just JavaScript and node.js. All of the bits and pieces of a working mmo should be there, there's some basic inventory and items, stats, fighting, movement, chat, and a world full of npc's. Hopefully from this, you should be able to understand how to use Three.js and node.js to build out this kind of project and build your own multiplayer games.
What I'll cover:
* Getting a basic websocket connection going
* Starting a node.js server
* Sharing code between server and client
* Hacking three.js shaders to inject new fragments
* Adding chat
* Supporting multiple players
* Supporting thousands of npc's
Like always, full source is available, just check the github repo. Go ahead and do whatever you want with it.
References:
mmotidbits.com/2011/03/09/why...
www.ibm.com/developerworks/li...
opengameart.org/content/smoke...
www.donmccurdy.com/2017/11/06...
developer.valvesoftware.com/w...
www.gamasutra.com/view/featur...

[@simondev758]

Have you found my videos helpful or useful? Support me with a coffee/beer on Patreon: www.patreon.com/simondevyt

[@jmddotfm]

Awesome stuff once again Simon, just added you to my Patreon list. Since you worked on Prototype, any chance of doing some procedural or otherwise city type stuff? Cheers!

[@simondev758]

Awesome, thank you! I've had procedural city stuff on my list forever, I'd love to take a stab there. IIRC Prototype didn't do any runtime procedural stuff with the city, it was all hand placed. The builds were kinda procedural, but as part of the art pipeline.

[@wolfhide4488]

Keep up the work and maybe you will have a good mmo.

[@abeelha1671]

if i had mney.....

[@covertsuperxxx1285]

I only support videos that do a walk through you always start in the middle of something on ALL your videos so NO I wont be supporting you if you make a video from start to finish then hit me up.

[@slavi8433]

dreamworld developers be like: holy shit this probably took years

[@BoneFrossil]

Best comment of the day

[@gg_gabriel_99]

Please refrain from using that blasphemous phrase

[@treelineresearch3387]

> CORS error > "I'm a little ashamed of how long that took" Oh how I know this feel.

[@dorobokino]

This literally happened to me a few days ago, lolol

[@broomybroomybroomy]

Not alone…

[@tommymaher4166]

Oh this hit me in the feels

[@Whiteseal222]

not to mention the 20 stack overflow tabs lol

[@GoAwayStupidAI]

Despite having to handle CORs in many projects: every time it's a challenge

[@simpleprogramming4671]

Dude what you are doing is another level of JavaScript which makes all the other channels dwarves.

[@simondev758]

ty

[@metagen77]

@@simondev758 Can't take long for this channel to explode in popularity. Let's try and help it along. Cool new MINECRAFT video you made there btw!

[@metagen77]

Yeah we even got some scam spam going! Picking up steam

[@briananon5506]

I love how this kicked off, let’s make WoW in JavaScript.

[@abdouseck4894]

@@metagen77 true

[@umadbroyo2388]

"I will choose the less clever way because its easier" Basically my programming journey...

[@wohnathanjick3015]

1 dude makes this in one week and actually looks decent for what it is, Dreamworld: *Starts to sweat*

[@Teckus3]

Big game dev firm: "Creating an MMO is the hardest thing a game dev can do" SimonDev: "Hold my beer"

[@simondev758]

Wait, I need that beer for while I code. Give it back.

[@dieg0te874]

@@simondev758 hahahaha

[@Etienne_H]

I mean this is barebones as can be… in a big firm you would also have a full fledged CMS, security features, proper menus, UIX, etc etc all expensive cause time consuming…

[@PHeMoX]

@@Etienne_H Yes, security implementation and user account management alone can self-destruct an entire game project. Even when made by 'big name' companies. Apparently Blizzard's project Titan was total crap when it came to this. Not to mention how project Titan always looked kind of like trash in terms of art direction and game design anyway. But it might be unfair to judge a completely unfinished game.

[@Ahov]

@@PHeMoX Obfuscation in the code in Rift caused it to run like absolute dogshit. Graphics were still amazing for the time and hold up well, but Trion's security implementations ruined the performance of the game and caused so many people to quit. Very important to get it right.

[@insertcalamity7961]

When you gonna release your game you've been hiding that's gonna be the wow killer

[@simondev758]

It's coming along, just need to design it.

[@muajin]

The 2 idiots at dreamworld should take notes from this guy, fo real!

[@tada103ify]

@@muajin 5 minutes into the video it was more complete than dreamworld

[@muajin]

@@tada103ify Heck yea!! At least his vid had combat with mobs, stats and a character avatar. Dreamworld is just pitiful...

[@InSTALINg666]

How his game can kill a dead game?

[@Nebulaoblivion]

Ive seen a couple videos of yours now, and I’m honestly blown away by what you can accomplish in Javascript. Really cool videos, thank you for sharing them!

[@casualrich-lifeiseasy4921]

Not a fan of praising, but man. You need to upload more, your approach to the code is so cool. You make it seem that even not knowing something is not a problem. As a junior, i can totally say that you are my biggest inspiration ❤

[@simondev758]

20 years, most of it in games or at Google. I barely know anything.

[@casualrich-lifeiseasy4921]

@@simondev758 One person definitely can't know anything, but your approach to the problem and working around things that you already know is what makes you special. That's the thing. Many junior devs or programmers just follow the rules instead of making their own approach. No need to climb the tree for an apple, when you can look around and find a branch with an apple that you can easily reach

[@AdmiralDro]

“Not a fan of praising” lol what ??? Who cares, just praise someone if they are deserving of praise. And Simon is worthy of praise so I’m glad you did

[@sssswerth5323]

Never heard someone say "not a fan of praising"

[@mercster]

You probably misunderstand. This guy, while not knowing exactly how to do something, *knows how to find out*. He has a wealth of core understandings that make evaluating and choosing solutions easier. That is his true skill... and it can only come from years of experience.

[@egretfx]

You are one hell of a JavaScript developer” dont let anyone tell you otherwise!!! Insane!!🔥

[@oscarguzman6440]

This man really said "I don't really know how to make an rpgmmo, but here we go" and makes an rpgmmo

[@HakiYikio]

This is just AWESOME ! I'm looking forward into JS Game dev, this video makes me believe in myself and wanting to push myself far enough to be able to do what you have done so far

[@enijar]

I love your videos. They're another level above what's on KZbin. You really go deeper that any other KZbin dev I follow and it's really enjoyable to watch. Thanks for making these videos!

[@simondev758]

No worries, glad to have you around! Let me know if you have suggestions as well

[@avsync-live]

Very captivating to watch these "build in one-week" type videos, where every feature is a huge step forward.

[@jordanbobadilla983]

I’m so glad I found your channel!! What you’re doing with JavaScript is top tier!! I’ll start learning three.js!! Thank you so much for your knowledge!!

[@PunkFiddler]

wow. i like how each video is a part of something grand. i first thought the first few videos were just random let's code in js but then again, it all leads to building an MMORPG. good stuff.

[@andrazvene7004]

Indeed, I love this part of it all. Not just teaching us random stuff, but also examples on how to put it all together.

[@simondev758]

Thanks! Yeah the smaller ones are all part of what i would consider more fundamental knowledge, but showing you how to tie it together helps ground it, at least that's the thought.

[@erz3030]

I loved watching this little demo come together, really cool stuff! Also I enjoyed your dry sense of humor :)

[@hellmid8636]

Imagine chronicles of eleria needed 8 million to make a game like this.

[@perseusarkouda]

They wish they had something like this

[@fighterwho]

Tey needed 8 million to pay their own wages to f*** around and make some half assed shit... lol

[@Lahmacunmatik]

It wasn't even a game, but a 3d video showcase.

[@zeektm1762]

*Hides 200$ pledge I made when I was 13* It’s in the past.

[@ThatCatfulCat]

@@zeektm1762 I bought Cube World Alpha so don't feel so bad

[@kosnk]

An amazing MMO with a glorious chatbox, Simon! :) As always, thanks for sharing the great work! Especially for leaving the "it didn't go well at first" moments: I can very much relate to those.

[@simondev758]

Hah yeah, every project I make is riddled with those kind of moments.

[@Sight3D]

Wow, amazing. Being a software developer and seeing what you do is just astonishing.

[@TimothySmithDev]

I've been programming for 10 years..... And I'd give anything to have your level of talent. Excellent work

[@LewisCowles]

Time... That is what we must all sacrifice, as well as likely money and emotions too. I've been coding for 20 years and have worked on multiplayer and MMO tooling and some server scripts. I've never encountered one human that has so much of it in their head at once.

[@LetsDrawDragons]

@@LewisCowles why dont you make yt Videos

[@marcuspvxea]

@@LewisCowles It's not time, its dedicating yourself to something you find fun. i can easily put a weekend into 17 hours a day and its sudddenly monday.

[@Mighteyes]

Brilliant work, seriously. Very impressed that you managed to create this in a week.

[@buttforce4208]

Your videos are incredible man, thanks for putting them out there. Hope you keep it up!

[@TheHeadlets]

This deserves way more attention for how high quality it is. Super interesting, thanks for the video!

[@simondev758]

Glad you liked it!

[@supermonkeywtf09]

More quality content, excellent work Simon! I can't say enough how great it is to see work like this presented so clearly and referenced so well. This is easily on par or surpassing the likes of Sebastian Lague's work, and it is definitely much more approachable. Keep it up!

[@simondev758]

Thx! Sebastian's work sets a high bar

[@iMistTheVoices]

Amazingly impressed. I wanted to make a mmorpg of my own but this genuinely just showed me that I don’t have the dedication

[@USBPixel]

awesome to see how you combined things from different tutorials to a somewhat big project and made it all work.

[@bijianwu5124]

thank you for spending time creating the game and sharing it with others. appreciated.

[@goncalopereiradev]

Excellent! So glad you post content like this!

[@simondev758]

no worries, glad you enjoyed it!

[@DanielPalov]

This is very impressive given the timeframe and all the challenges you faced. Great job!

[@caglartufan5595]

This is an awesome experience and brief introduction to networking for games!

[@krazybubbler]

Again awesome content Simon! Thanks for all your efforts.

[@simondev758]

np, happy that you're enjoying it!

[@zettour.]

Man, the game isn't even out yet and there's already speed hackers.

[@blundy1]

This is a very interesting project. I can't wait to see what you come up with.

[@CarlosWong54]

Thank you for the work you put out! I like your video style!

[@roarkisaacs5326]

Great exercise! Appreciate the effort! Enjoyed the login screen as well!

[@simondev758]

I had another version where I tried to remake the scene using lego and some action figures

[@felleg4737]

legendary content again, and the fact that you code it in JS is humiliating. I started coding since covid, so I hope I can come back to this video after a couple of years and understand it deeper. I wish you did an introduction or a pre-career-overview video, maybe it would be too boulevard content comparing to your other godlevel videos, but I would watch it..

[@simondev758]

Yeah I've been thinking about doing one, still figuring out how I want to do that

[@stickguy9109]

Respect bro. I also started coding during quarantine. I was bored, so i googled how to make games and everything started from there.

[@ismaeldeleija8165]

incredible, you are an inspiration and also you are an excelent narrator

[@thornfrederiksen8437]

What a dope vid man. BIG RESPECT!

[@hamzzashaffi]

Great as always! Thank you, Simon! :)

[@simondev758]

My pleasure!

[@lennyvanriel1660]

I knew I wasn't the only one who uses 'Bob' for my user-placeholder when programming XD

[@simondev758]

lol I have no idea why it's the goto name

[@rossmc92]

I use Bob Cobb personally.

[@user-ld7mt9bx9q]

I use bob for everything too

[@MoMitzi]

Don’t forget Alice

[@Rudy_YT]

John Doe

[@Waffel136]

I love them monotone, but funny as hell comments in-between. Like, when describing "there are these two monsters that look like this and that... i took both" :'D really enjoyed this video :)

[@octaviusvanzandt3695]

Super cool. I'm psyched you are doing this. As a developer that has played minecraft and runescape I've always thought it would be cool to build some kind of MMORPG in javascript (though I'm not yet a JS dev).

[@eddyz3874]

hey, you did more in a week, than "dreamworld" in several month with a 70k kickstarter campaign :D. Great Job

[@LuBre]

This is a perfect example for the "Draw the fucking owl" meme.

[@tamillis-menth]

"Just googled socket.js and wrote the fucking server." I swear, that's what he said

[@kerel995]

Simon, you are a pearl in this ocean. People actually doing work are so rare. It is easy to record yourself with a cup of coffee and some game titles behind your back while saying what you think about this or that. If youtube was full of people like you, ubiversities around the wolrd would already be disappearing.

[@michaelm8044]

That green hand effect is something else. Hell yeah, I love it!

[@realspicye]

You make it look so easy, it is inspiring

[@simondev758]

thx!

[@eballer48]

Single handily giving young creators all the resources they'd need to create an mmo, tysm.

[@simondev758]

It would be really cool to see someone take my work and build something

[@Klimawandel20]

@@simondev758 I am having problems with generating all the node_modules from the package-lock.json. do you know how this works?

[@AnthonyKosky]

Nice work, great video. Thank you for walking through this. :)

[@pmmbb3344]

JS rocks, and you SimonDev, rock too - it's truly impressive (one week!), yayy!

[@isaipack]

Wtf man, i don't even know this was JS possible. Great job, i'll dig up your files and learn this for sure.

[@Xcceler]

I was considering the same :p

[@djudsod959]

Your projects are cool, always.

[@simondev758]

thx!

[@denizorsel1029]

I believe the character blinking issue is related to camera position and its viewport distance related. Provided that you are one heck of a developer. Subbed and liked.

[@dielabtec7882]

This was really great. Good job!

[@Zadamanim]

more promissing than dreamworld

[@mirciulicasm]

Awesome video! Really impressive stuff, I enjoyed it. I really want to learn ThreeJS but coming from a frontend environment and some backend experience I have no idea where to start.

[@simondev758]

You can just head to threejs's website and start with their examples, that's what I did. I probably should be recommending you my own videos, so I also have beginner tutorials covering the basics, and these bigger ones just tie stuff together that I've mostly covered already.

[@mirciulicasm]

@@simondev758 Thanks, I will look into yours aswell!

[@clawxxchris]

I just started a web development course recently and my next module is javascript and your video makes me SO STOKED to learn! Great job. This was so cool

[@simondev758]

Nice! I'm not actually a JS guy myself, kinda just screwing around here, but you can get a lot done in the language.

[@richardg8376]

Just discovered your channel, and a great video! A couple of challenges you can come up with if you ever want to do future videos on the MMORPG project: - Optimising the data sent between server and client. Think quantization of location vectors, only sending data that has changed - Determining relevancy: only send information about entities to a client if they actually need to know about them. These will be crucial, or you'll quickly find that the networking solution won't scale to the hundreds of players you need for an actual MMO :-)

[@coomercommander2554]

ah yes, this is the new triple A world of warcraft killer game i have been hearing so much about

[@andrazvene7004]

Awesome vid as always! I was wondering, if you could make a video on how to structure code of a "more complex" game. Ideally for JS/not using an engine, but even if you could talk a bit more broadly about any experience using different structures would be super useful. I feel like you have so many specific topics & use cases here, but in my experience we all sooner or later fall into the "how can I make my code more modular & be able to reuse it better" situation, and some thoughts on this would be great! I.e. say using canvas/three.js, and there's a game that has tanks, projectiles, active skills and research upgrades that can affect various attributes of all those, is the best way to typically stick with classes/methods that describe data and functionality of each of those, or rather writing something more general i.e. an "attribute class" that you can then add/remove/adjust to each of the objects. Or another example, say I wanted to handle attach/handle animations to objects, add particle effects to them etc. - I.e. tank fires a shell, that creates a muzzle flash animation, and then hits another tank - should i.e. damage that shell deals be stored in it, or in the tank and the shell having a reference to it? Or going further, some best practices for creating UI more modularly, or in-game events/listeners etc. Sorry for a huge question again, but I just wanted to illustrate with a rough example - I know it is a broad topic and can vary from game to game, but a video on such a topic would be awesome!

[@simondev758]

Huge questions are great, and this is a really good one. I've been kicking around ideas for videos in that space, things that draw on more than just technical problems. I've added all your questions to my "ideas" doc. Give me some time to figure out how to present these kind of ideas, and in what format. I do want to tackle things that help everyone become more "rounded", so to speak.

[@andrazvene7004]

@@simondev758 Sounds awesome, thank you! Whenever you can manage will be great (well ideally in 2021) - I know you're getting a ton of request, but tbh it's your fault you make great videos :P

[@accumulator4825]

Incredible tutorials, thank you

[@alexwalker8521]

This is awesome! Great job

[@drewmcdonald4082]

This is awesome. That Entity Interpolation is the secret sauce.

[@IljaDidDevs2]

So entertaining to watch you work through this, sick job!

[@simondev758]

Thanks! Glad you enjoyed it

[@simplecastic]

inspiring to watch please make more

[@thitherword]

Brilliant video. I wish this was hours long.. Highly relaxing and informative. Nice to see some WoW, too.

[@JDelwynn]

If I ever make a Wild West game I'm casting you as the old prospector who gives life advice to the protagonist.

[@SuryaTejaKarra]

This video is highly underrated. needs more likes

[@simondev758]

Heh thx!

[@ThomasBaxter]

I have just started watching this, but: You madman! You true and crazy madman. All the best

[@wissamfarhoud930]

"let me know what you thought" my man i didn't think, i just gawked and awed ... amazing work

[@esmailkhorchaniarts1142]

This guy's js in on a whole different league

[@SamiullahKhan]

The game making is fun, you made it even more interesting with story telling way of making. I realized now MMORPG takes a while to build.

[@simondev758]

awesome, glad you enjoyed it

[@sgtcarneiro]

As a senior javascript developer myself this inspired me a lot. Thanks a lot :)

[@guccidogwater3798]

ive been learning three.js and you are making very fun

[@i2evielle]

As barebones as this is it is still leaps better than some of the MMOs covered in Josh Strife Hayes "Worst MMOs" series.

[@GuRuGeorge03]

This is the kind of video that you watch as an up and coming programmer and you start to thinki that programming is nothing for you since u can't even do 1% of what this guy is capable of. But as a junior programmer myself I can guarantee to anyone that even with 0,1% of skill of this guy, you'll make a good income as a dev.

[@simondev758]

We were all junior developers at some point :)

[@sanderp.1122]

Exactly what I was thinking

[@viniciusschadeck4992]

dude, i understand almost everything this guy did, and did myself those code... the logic is not problem to me, but deal with companies are, soo my income as a programmer and even job as a programmer is a fucking pain in the ass to me, even with a over average incomming from my skills (to work, because i use most of my free time playing and creating small game projects), time working with programming, are 10% higher than average programming income, but, i not had enought courage to drop from my job that i not like and try be a game dev in any level, i live into a country that work with games or even be unployed is really though yet

[@riverdale7648]

Thats pretty hilarious that anyone would think its nothing for them because they dont do something instead of thinking holy shit there are some fucking layers to this I can go to if I put the work in, which actually makes sense, instead of some defeatist attitude where you think that this guy was born with programming abilities and knowledge or w/e

[@satypardus9273]

I am programming for around 12 years now. In the past 5 years I made around 4500USD total. No idea what you guys are doing to get good income, nobody wants me cause I have no degree in actual programming, mathematics or what ever paper they want otherwise :D

[@emanuelacosta2541]

Man. This thing you just made. I see you, and then I see myself struggling with typescript, and I'm completely ashamed. I need to git gud ASAP. Thanks a lot for your content. It really motivated me!

[@UNKNWN96]

As someone aspiring to learn programming and want to take the dive into becoming a game dev, this video was so fun to watch!

[@MikelisBaltruks]

"This guy blinks in and out of existance occasionally"- Aren't we all? :D

[@simondev758]

That's deep

[@scottonanski4173]

I was like "Wow!" when I saw the spell casting effect. lol

[@simondev758]

hah, I figured I needed at least one not-terrible effect.

[@Favourites669]

This is fantastic. I don't think I've ever clicked the Subscribe button faster. Amazing work here.

[@cyanider]

Dayum, finally i made it run on VS 2019 lol, got some knowledge of javascript but zero from NodeJS so i kinda peeled my knees there but made it run. Got some issue with the terrain menu but ill check it on later. Great work!

[@NaiyoGames]

sorcerer is overpowered ! :p (thanks, great project !)

[@simondev758]

Next update, she's getting nerfed.

[@daveycutz3356]

So this popped on my discover page. I’m no programmer, but man. After watching this i’m considering of learning it.

[@simondev758]

Thanks! I consider it a pretty huge win if I can get someone other than a programmer to set through this, heh.

[@daveycutz3356]

@@simondev758 yeah! Definitely. And fun fact I did watch ALL the video without any understanding of programming and didn’t even fast forward it. Whoa!? 🤣

[@TheShelfman]

This is so sick! These are some things I didn't even consider were possible with javascript. Great video :D

[@HipToBeeSquare]

This is incredible! Very inspiring!

[@mark6302]

Light years beyond Dreamworld

[@tchp]

Thought this was madseasonshow for a second. You really sound like him! Amazing video, very inspiring.

[@Martinit0]

I love how you demonstrate that step 0 of achieving great things is to be fearless and confront the hairy monsters

[@dmnkb]

Amazing stuff, really! Only thing that I'm kinda sad not being covered is the process of deploying the server. Other than that really an impressive compilation of all kinds of technological fields, each with it's own rabbit hole to go down! I subscribed!

[@simondev758]

I'd like to revisit and take another run at this, and I'll make sure to add that.

[@TrueComboKing]

true story. when i was 9 i was addicted to runescape. i also thought coding was cool AF and i wanted to make my own game. Found out about private servers. Learned how to download a default one and basically become God in it. Learned some basic code and implemented it into my private server and then opened it up to people. I was so damn proud. I had a total of twelve people playing. What was different from the original? All I did was buff xp and loot drops. It sucked. It wasn’t too exciting. I was proud as fudge though adjusting a line of code.

[@SulthanMuhammad]

rs3 ftw

[@stranger.granger]

I dont know how long this project took, but you surpassed the development of Chronicles of Elyria halfway through the video.

[@mattmmilli8287]

Haha

[@gamerzero6085]

he said it took him a week

[@greatdragon_nns]

Great work man!

[@jespermansson8077]

Love this! Been wanting to make my own rpg

[@iaros.h]

I can see some solid work done here. The only thing I'd like to ask about is what were arguments for making it in JS? I mean you're a pro and I wonder what made you considering to invest so much time in learning JS ecosystem. I am subscribed for more :)

[@simondev758]

I'm just doing this in my spare time, invested about 0 time in learning JS itself. What I find fun is learning concepts and new approaches, and JS makes it easy to quickly try out an implementation. I could just do this all in C++, but it would take longer.

[@iaros.h]

@@simondev758 so I can think about it as a time-to-implement-a-feature factor, right? I'm curious if there a place for JS to become a major tool in making modern 3d games running in the browser. I think it would mostly depend on how JS to WebAssembly relations will evolve and what would be a cap price for the 5G internet on the market, but these are just my thoughts. Thank you for replying.

[@simondev758]

@@iaros.h Yeah I'd agree, I mean not every game absolutely has to have the max performance that something like C++ offers. Development time, features, those all factor in. If JS is the right match, why not? I'm kinda curious if it can scale to that, which it seems like it can.

[@VivekNine]

This is some serious talent. You should throw this up on Google App Engine so people can play it.

[@cmcdonough2]

That was epic. Thank you for sharing your knowledge.

[@simondev758]

np!

[@algha7617]

Woah. No words that this is incredible