I Tried Making a 3D MMORPG Game in JavaScript
HTML-код
- Опубликовано: 26 авг 2024
- 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/sim...
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...
www.ibm.com/de...
opengameart.or...
www.donmccurdy...
developer.valv...
www.gamasutra....
Have you found my videos helpful or useful? Support me with a coffee/beer on Patreon: www.patreon.com/simondevyt
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!
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.
Keep up the work and maybe you will have a good mmo.
if i had mney.....
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.
Dude what you are doing is another level of JavaScript which makes all the other channels dwarves.
ty
@@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!
Yeah we even got some scam spam going! Picking up steam
I love how this kicked off, let’s make WoW in JavaScript.
@@metagen77 true
dreamworld developers be like: holy shit this probably took years
Best comment of the day
Please refrain from using that blasphemous phrase
> CORS error
> "I'm a little ashamed of how long that took"
Oh how I know this feel.
This literally happened to me a few days ago, lolol
Not alone…
Oh this hit me in the feels
not to mention the 20 stack overflow tabs lol
Despite having to handle CORs in many projects: every time it's a challenge
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 ❤
20 years, most of it in games or at Google. I barely know anything.
@@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
“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
Never heard someone say "not a fan of praising"
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.
"I will choose the less clever way because its easier"
Basically my programming journey...
1 dude makes this in one week and actually looks decent for what it is,
Dreamworld: *Starts to sweat*
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!
I've been programming for 10 years..... And I'd give anything to have your level of talent. Excellent work
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.
@@LewisCowles why dont you make yt Videos
@@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.
You are one hell of a JavaScript developer” dont let anyone tell you otherwise!!! Insane!!🔥
When you gonna release your game you've been hiding that's gonna be the wow killer
It's coming along, just need to design it.
The 2 idiots at dreamworld should take notes from this guy, fo real!
@@muajin 5 minutes into the video it was more complete than dreamworld
@@tada103ify Heck yea!! At least his vid had combat with mobs, stats and a character avatar. Dreamworld is just pitiful...
How his game can kill a dead game?
Big game dev firm: "Creating an MMO is the hardest thing a game dev can do"
SimonDev: "Hold my beer"
Wait, I need that beer for while I code. Give it back.
@@simondev758 hahahaha
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…
@@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.
@@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.
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.
Indeed, I love this part of it all. Not just teaching us random stuff, but also examples on how to put it all together.
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.
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.
Hah yeah, every project I make is riddled with those kind of moments.
I love your videos. They're another level above what's on RUclips. You really go deeper that any other RUclips dev I follow and it's really enjoyable to watch. Thanks for making these videos!
No worries, glad to have you around! Let me know if you have suggestions as well
This deserves way more attention for how high quality it is. Super interesting, thanks for the video!
Glad you liked it!
Very captivating to watch these "build in one-week" type videos, where every feature is a huge step forward.
Wow, amazing. Being a software developer and seeing what you do is just astonishing.
hey, you did more in a week, than "dreamworld" in several month with a 70k kickstarter campaign :D. Great Job
This man really said "I don't really know how to make an rpgmmo, but here we go" and makes an rpgmmo
Imagine chronicles of eleria needed 8 million to make a game like this.
They wish they had something like this
Tey needed 8 million to pay their own wages to f*** around and make some half assed shit... lol
It wasn't even a game, but a 3d video showcase.
*Hides 200$ pledge I made when I was 13* It’s in the past.
@@zeektm1762 I bought Cube World Alpha so don't feel so bad
Amazingly impressed. I wanted to make a mmorpg of my own but this genuinely just showed me that I don’t have the dedication
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!
Thx! Sebastian's work sets a high bar
The interpolation thing was neat to think about. Smoooooooothing things out...
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!
more promissing than dreamworld
Single handily giving young creators all the resources they'd need to create an mmo, tysm.
It would be really cool to see someone take my work and build something
@@simondev758 I am having problems with generating all the node_modules from the package-lock.json. do you know how this works?
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..
Yeah I've been thinking about doing one, still figuring out how I want to do that
Respect bro. I also started coding during quarantine. I was bored, so i googled how to make games and everything started from there.
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 :)
I knew I wasn't the only one who uses 'Bob' for my user-placeholder when programming XD
lol I have no idea why it's the goto name
I use Bob Cobb personally.
I use bob for everything too
Don’t forget Alice
John Doe
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.
awesome, glad you enjoyed it
- Good morning sir, I'm calling to talk about your car-... no actually I'm calling to inform you that *you are insane.*
In log in screen, you can add text box button and background-image in one
Yeah I need to up my html game, it's super weak.
Brilliant work, seriously. Very impressed that you managed to create this in a week.
Again awesome content Simon! Thanks for all your efforts.
np, happy that you're enjoying it!
"let me know what you thought"
my man i didn't think, i just gawked and awed ... amazing work
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.
Wtf man, i don't even know this was JS possible.
Great job, i'll dig up your files and learn this for sure.
I was considering the same :p
Great exercise! Appreciate the effort!
Enjoyed the login screen as well!
I had another version where I tried to remake the scene using lego and some action figures
I loved watching this little demo come together, really cool stuff! Also I enjoyed your dry sense of humor :)
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!
I'd like to revisit and take another run at this, and I'll make sure to add that.
This is a perfect example for the "Draw the fucking owl" meme.
"Just googled socket.js and wrote the fucking server." I swear, that's what he said
Man, the game isn't even out yet and there's already speed hackers.
I love how you demonstrate that step 0 of achieving great things is to be fearless and confront the hairy monsters
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!
ah yes, this is the new triple A world of warcraft killer game i have been hearing so much about
Excellent! So glad you post content like this!
no worries, glad you enjoyed it!
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
Nice! I'm not actually a JS guy myself, kinda just screwing around here, but you can get a lot done in the language.
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).
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!
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.
@@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
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.
We were all junior developers at some point :)
Exactly what I was thinking
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
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
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
As a senior javascript developer myself this inspired me a lot. Thanks a lot :)
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!!
This video is highly underrated. needs more likes
Heh thx!
Great as always! Thank you, Simon! :)
My pleasure!
That green hand effect is something else. Hell yeah, I love it!
I was so entranced in this fantasy land where you are the fastest programmer in the world and there are never bugs and everything works perfectly fine first try
Crazy eh? It's all real-time too, I go through half a dozen keyboards a day, just burn them out through sheer speed.
@@simondev758 hahaha I love this reply. We should start a go fund me for your keyboard budget
You make it look so easy, it is inspiring
thx!
As barebones as this is it is still leaps better than some of the MMOs covered in Josh Strife Hayes "Worst MMOs" series.
I just started with HTML, CSS, JavaScript and was worried about how people always talk about languages dying and stuff but this gives me inspiration that there’s a lot of cool things that can be done with the language if you’re creative.
Languages are just tools. People that get hung over a tech stack usually are mediocre at best.
I would suggest adding client side prediction and just sending player input instead of positions. The client can cheat if he is allowed to send their position to the server without checks. Anyway great video.
If I do this again, I'd definitely do it that way now!
I was like "Wow!" when I saw the spell casting effect. lol
hah, I figured I needed at least one not-terrible effect.
Your projects are cool, always.
thx!
awesome to see how you combined things from different tutorials to a somewhat big project and made it all work.
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
"This guy blinks in and out of existance occasionally"- Aren't we all? :D
That's deep
So this popped on my discover page. I’m no programmer, but man. After watching this i’m considering of learning it.
Thanks! I consider it a pretty huge win if I can get someone other than a programmer to set through this, heh.
@@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!? 🤣
I'm so glad someone read Valves amazing Source Multiplayer Networking wiki page. It's been my goto for years,
You're already greatly underselling the thought and planning that goes into mmo development in the first few minutes, don't misslead these Jr developers.
I think people understand that it would take at least another week to turn this into a full blown world of warcraft clone, including assets and music.
If I ever make a Wild West game I'm casting you as the old prospector who gives life advice to the protagonist.
This guy's js in on a whole different league
inspiring to watch please make more
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.
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.
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.
@@simondev758 Thanks, I will look into yours aswell!
This is awesome. That Entity Interpolation is the secret sauce.
pretty amazing, so much potential. if i made an mmorpg it would be all about mobility and movement and you could do literally anything while moving and have like 3 dash moves and a super fast mount ect
Nice. Starting understand how a multiplayer works, what are challenges and solutions.
As always awesome tutorial.
thx
Thought this was madseasonshow for a second. You really sound like him! Amazing video, very inspiring.
Wait wait wait... 15:55
One week?
He said that for comic relief, right?
Right?
When you are a experienced programmer and got an idea stuck in your head you might be surprised of what is possible in one week
@@janherfs3063 That's what I may miss : experience.
Hopefully, it will come with time and practice
Darling you have no idea what is possible
@@NosAltarion If you watched through the video, alot of the things he made was projects he already made before.
Which means, its all about making small projects, the intergrating them to a big project and then you can pretty much speed the project. which he did.
He already had most of the stuff he added, all he had to do was intergrate it and make it function for multiplayer and create the multiplayer code.
So just get out there, make everything you get an ideá of, it will always come back in the end and help you out
It's one week INCLUDING RECORDING AND NARRATING A YT VIDEO OUT OF IT
I am trying this in blockchain, clarly with three js (maybe blender if you want more complexity with your models), peer js, node, nest, sockets, some other things and doing your own blockchain you can basically do this without pay to anyone because the users are the ones who run this because it functions in real time with their pros and cons but I think that's the best architecture for this kind of Massive Multiusers projects. But I'm still learning
dude this was super cool and impressive. Way to be humble.
sorcerer is overpowered ! :p (thanks, great project !)
Next update, she's getting nerfed.
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.
rs3 ftw
I dont understand programming. i guess it was never for me, but i love to see the progression of the game you made. You should keep going. This game is already almost better than a lot of MMOs out right now sadly.
thank you for spending time creating the game and sharing it with others. appreciated.
I dont know how long this project took, but you surpassed the development of Chronicles of Elyria halfway through the video.
Haha
he said it took him a week
The Bill Nye “If you don’t think that’s the tightest shit then get out of my face.” meme is how this makes me feel
ive been learning three.js and you are making very fun
I have just started watching this, but: You madman! You true and crazy madman.
All the best
Better than Dreamworld
Light years beyond Dreamworld
@8:35 Since you fixed it, it wasn't an empty promise, you just hadn't gotten to it yet! =-) Awesome video!
This is an awesome experience and brief introduction to networking for games!
You forgot the overpriced cash shop!
So entertaining to watch you work through this, sick job!
Thanks! Glad you enjoyed it
Woah. No words that this is incredible
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 :-)
1 WEEK!?!!?! Dude wow. Impressive
Bit of a cheat since I reuse a lot of prior work :p
Went through and rewrote this into TS. Now, its bug-ridden lol Enemies are being drawn hundreds of times. Enemies will disappear if you get too close. It's chaos lol I was being careful not to modify anything, but I must have bjorked it.
Heh nice!
Wow this is really good! I am not a games developer but have worked in the app and web development space for over 10 years. I experimented with HTML cavnas when it first came out and managed to make an isometric tile based game but this is just incredible. Especially considering you say you are mainly a graphics guy.