I Tried Making a 3D RPG Game in JavaScript
HTML-код
- Опубликовано: 6 авг 2024
- Follow me on:
Twitter: / iced_coffee_dev
Github: github.com/simondevyoutube/
Here I tried making a 3d RPG game, completely from scratch in JavaScript/Three.js. I took some code from previous tutorials, such as player controllers and third person cameras, bolted on a few free assets like Quaternius's models, and added some gameplay. The code could serve as a nice jumping off point for someone looking to make their own little browser rpg.
Basically, I tried to code up the skeleton of your basic rpg in a couple days, using just JavaScript. All the elements, player stats, quests, inventory, enemies and AI are all there, in various stages. There's a lot of improvements you could make here of course, adding more weaponry and items, magical powers and skills, bigger and badder enemies. But this will hopefully help you to understand how to use Three.js to get started on this type of project. Making the basic bones of a 3d rpg game isn't too difficult.
What I'll cover:
* Getting a basic 3d world up and running.
* Replicating a basic version of Unity's GameObject architecture.
* Adding third person movement and a third person camera.
* Adding HTML ui elements such as icons, inventory, stats, quests.
* Enemy AI
Like always, full source is available, just check the github repo. Go ahead and do whatever you want with it.
Various clips/assets from:
The Legend of Zelda: Breath of the Wild is an action role-playing/adventure game developed by Nintendo and released in 2017.
Channel: / nintendo
Quaternius has a lot of free 3d model assets on their site, check them out!
quaternius.com/
And even more free animated models at Mixamo.
www.mixamo.com/
I also picked up quite a few icons on GameIcons.net.
game-icons.net/ 
Наука
If you enjoyed this, help support me: www.patreon.com/simondevyt
first reply :D
hey
@@user-uu2kh1vy1r :)
Is it ok to take this and work on the sound design for it?
Is it ok to take this and work on the sound design for it?
“Future Simon will have to clean this up”. Yup you’re a dev alright
That dude has so much work to do, can't wait to see his face when he finds out
It's like a developer instinct
it feels like copying is faster than making some extra functions, but that's false economy. you waste a lot more time soon on harder code navigation, fixing the same bug in multiple places, not being able to test things independently, etc etc
@@0netom I guess there also are people that build perfect code in projects that they never pull off
@@0netom i unfortunately became an adult and started working in the last year...
Man,i can't fuckin divide the projects they give me into smaller functions for shit, and every time I've to add/modify something I'm swearing at myself for being so dumb...
The good dev in the office basically spent all the other day showing me how a decent human being codes,i felt like crying at how dumb i was lol
"I'm gonna spend a couple of days building a funny little game in JS"
Then there's me: 2 months to make an app that fetches 5 doggos pictures from an API made for babies.
Everyone starts there! I bet if you were to completely start over, you could get to your current state in a week.
Heh, like Tim says, it's always easier the second, third, fourth, N'th time through.
Same, I’ve been coding for years and it still takes me a while to get something good. Although, I think he pulled an “all nighter” as they say in the industry.
Well done on making your app.
Prototype your work to save time in the future. Using some software engineering methods will help a lot in future development. No one starts from scratch these days.
Hey! Thank you so much for using my assets :)
Thanks for making them available, awesome work!
I just watched the video and was thinking about you the artist
Nice assets!
@@ChaoticNeutralMatt oo saucy
this guy broke the limit of web devlopment. salute to you
im started learning javascript 10 days ago.
watching this video is like, watching thru a portal opened to another galaxy.
Heh, you'll get there. I have a more beginner oriented video coming tomorrow that might be perfect for you. And don't hesitate to let me know if you have suggestions for future videos.
Even though this is awesome. Don’t teach js for game dev purpose, this dude is crazy 😂
@@simondev758 awesooomeeeee...
nah, its like watching a professional ball player while wearing your grade school jersey. BEAUTIFUL WORK!
Learn jQuery it's all you need them you can make any game in one minute
hes like: i‘ll steal this little bit from myself
i‘m like: i‘ma wait this out and steal the finished thing
Do it, then show me what you make!
Same thing here, then add some stuff of your own, mess around a bit, get used to spaghetti code then try to clean up. Just another Wednesday I guess
“How hard can it be”
Idk pretty hard lol...
Hah yeah
If you know it, it isn't hard. The hard part is finding out how to do any of this stuff without taking a course explaining all of it in detail.
@@DanIel-fl1vc I agree. Making anything is delightful no matter how long it takes if you know how to do it. The only frustration is not knowing how to do things.
@@thedude4039 Nothing worth doing was ever easy, right?
@@metagen77 eating food is pretty easy and definitely worth it
"some npcs, towns, shops n stuff, it could look good." lol, the calmness.
Because I'm not the one adding them! :)
@@simondev758 Future Simon is
@@ofekifrah9206 that's how I deal with all my work (I just gotta do what I can, leave the rest to future me 😢 😂)
@@rewrose2838me too lol
@@rewrose2838 😂😂
I love how information-dense this is. You clearly explain a LOT of work in a short time. Impressive stuff, thanks for sharing :)
Massive respect for doing this. Comes from an amateur who's trying to build 2d games purely in JS. This is just breathtaking. You got another subscriber
As someone just learning about this, I find it so cool how you're pulling from your old work to make a new project. It makes the whole thing seem way less daunting. And also, it's cool to think that whatever crap you make today might be something useful for tomorrow's project! Very cool to watch you make this on several different levels.
Reusuable classes is object oriented 101.
I can hear your browser screaming 🤘
This was crazy fun to watch - I love how you call out your own code a lot :D - thanks for an amazing game video
Heh yeah I try to build smaller tutorials, and then bigger projects show how everything can be tied together easily.
Loving this accelerated format tackling bigger end to end projects! Makes a good contrast to the slower more detailed ones while giving a big picture overview of how the smaller systems slot together.
Yeah honestly going forward, I think what I'm going to do is decide on a "bigger" project, and then do in-depth smaller ones to cover anything I haven't already covered. Then do a bigger one that ties everything together quickly.
@@simondev758 sounds great, just tip: don't overburden yourself with a rigid plan. Follow ur guts and whatever you are motivated with to id! If it all fits it fits, it will fit for someone searching for bits and pieces! :)
@@cymaked Good advice, it can be easy to get carried away with big plans.
Totally agree
AI already looking better than one in cyberpunk
Hah, burn
@@simondev758 will it have the feature to customize genitals like in cyber punk?
@@sumanboi please no
@@s-kee2928 then its no fun
@@sumanboi do you even see your own genitals again after you've customized , you only see other peoples..
"Welcome to Honeywood adventurer" I see you are a man of culture :D
lol
Nice day for fishing ain't it?
@@darkchocolatereborn381 huhu
"Ah, I see you are a man of culture as well 😌."
yess! nice day for fishing
2:05 Square Enix be like, whatever, ship it. massive big swords ! everyone likes
Oops, we loaded both a gun and a sword model... errr call it a gunblade and ship it!
Just 1 minute of watch and already a subscriber, that's some quality content right there.
The problem is how he casually explains building a functioning game in three days using only JS like it's nothing while my amateur a$s is over here simping in total awe and reverence. Anyways nuff said, I subscribed.
"But they just swing at each other. This is kinda boring. Let´s make them hurt each other."
LOL
Just a little blood to make things interesting
Nice to see another channel that likes to push the boundaries of what's possible within the browser.
Hey there! That's a hell of hobby project and experience. This was the first content I've watched from your channel and I like it. I took a look at your other videos briefly and I say, your content is pretty good. I subscribed your channel, your are the first channel I like in heart and subscribe!
You Sir, are the Bob Ross of Web-games! Thank you so much for this tutorial I learned heaps from it.
This will improve my knowledge in Js, thank you and keep up the good work!
Np, glad it's helping you!
I’m new to this stuff, did he use js in unity or was it a different program?
Js in Visual Studio i think
@@RCOA24 ah okay thanks
@@RicardoHernandez-ii9lx Just JS in any IDE and three.js for API. Very impressive really what you can do with it.
Wow, this is so cool 👍👍👍
I just got to know about this channel today, checked couple of other videos, you seem to know whole lot of things and I guess I will be spending a lot of time in this channel. Thank you so much for making these.
Ex-game developer, ex-indie company owner, ex-google lead, been around. Will be covering many topics, let me know if you have suggestions too! :)
This is really cool! I made a game in all html once that was not nearly this impressive, but now I’m hopeful I’ll reach your level someday too!
Yet another amazing tutorial! Great stuff. Thx!
welcome, glad you liked it!
Didn't know JavaScript could do this! I'm learning programming and this is an awesome project you've created!
It’s plenty possible. Just gotta use the right libraries
First video ever I watched from you. Entertainment pure. Subscribed directly after! It's an inspiration to see what is possible in Js. Thank you!
Awesome!
Am so happy discovering your channel sir. Thanks for giving me the motivation that I can create games from scratch without looking for game engines 😩.
I came here thinking this was some shoddy attempt, now am subscribed and glad at the amount of useful information I've stumbled upon for javascript. As a beginner, thank you very much for this content.
Awesome, happy to have you around!
This was amazing! to much knowledge and experience behind of it!
Glad you enjoyed it!
This is so cool! Thank you for showing this. Very Inspiring :)
This is so inspiring. Thanks for posting this!
np glad you enjoyed it!
what you did here is insane.I CAN ONLY WISH TO BECOME THIS GOOD
You are a star. Please everyone run through Simon's videos and like them all. This guy's work, approach, voice, narriation style and value in all of it is extraordinary.
And for one video such as this there is 1000 videos that give nothing.
Awesome video, ive done quite a bit in JS but never something this neat!
this looks so cool, i never knew you could make a game with using javascript. You just totally gave me a reason to learn javascript as a jr front-end web developer. Thanks!
Your videos are just amazing. Thank you!!!
ty!
This is the coolest. I wish I had the know how on adding a physics component!
Physics tutorial is on my TODO list! :)
@@simondev758 lol just use tile based collision for terrain and non moving object, it works better for multiplayer too
This is impressive. Didnt know you can do this with javascript. Will dive more into this.
I love this channel. Nice Video Simon.
You're a madman. I love it!
heh
im very impressed, looks better than most early access games on Steam lol
lol
I really enjoyed your video and compare to other creators, you provided your full source code which is what I really love about you
Mate.. many thanks to you for this gem and rest of your videos :) cheers once again!
WOW 😳 Amazing😍😍 I can't believe that you made it that far . It just blow mind .
Someone interested could definitely take this 1000x further. This just shows how it can be done.
Wow !! super awesome, I am extremely jealous of your programming skills, a series of videos on how you made your ECS system where you go into details would be super dope ! You could maybe do that on patreon so that your skills and time don't go to waste :) ! Subbed and turned on the bell !
Mine was just a cheap replica of Unity's, not a true data oriented entity-component-system. Could probably do a video on those though, and why they're faster.
@@simondev758 that would be awesome ! Creating frameworks and systems like that truly passionates me I think it gives alot of satisfaction to say "I made all of this myself"
This shit is epic man, seriously. No bs interesting video with great editing and quality narrating.
Love your channel! Just subscribed hoping to learn more!
This has to be one of the most badass videos I've ever watched. You're like a Chuck Norris-McGuyver...
MacGruber!
More like bob ross
Your video editing has improved massively :)
Hah, thanks for sticking it out with me as I figure out how to make these videos suck a little less.
**me** wakes up with motivation to learn three.js
**youtube recommendation** here's a whole channel just about that
Your channel is gold man i was wandering about how hard will it be to make 3d rpg game in js thanks for your insight
ty
TLDR: Just copy paste code from other projects and make slight tweaks and Boom you got a game
This channel is a gold mine for game devs
Thx!
Really interesting. Its fascinating to see how these projects you do develop and to get insight into the development process. Inspiring even 🙂
thx!
Awesome. Always wanted to get into coding. This looks challenging and a lotta fun. Keep it up!
I don't really think starting with writing a game/game-engine in javascript is an ideal starting point to be really honest.
my man be making Elder Scrolls 6 and Xenoblade Chronicles 3 in one single game
You've already got more going on here than the Chronicles of Elyria "demo".
u're so talented, its impressive. First time here, surely not the last !
omg, this is awesome! I need to take a crack at this!
I thought I knew JavaScript pretty well...until I saw this.
This is insaneeeeeee!
wow i didnt think this was even posible... and that voice of meditation journey is amazing!
This is fantastic work!
Just found this channel. Only like 30 seconds into the video. But i feel the need to say what? He is blowing my god damn mind with just the open plane and sky box. How have i not found this channel before after literally searching for javascript game stuff so many times. Crazy.
Heh glad you're enjoying it!
Needs more engangement and shares to compete with red arrows and stupid faces
damnn, i never knew you could do this with js, so cooool
Yeah you can do some really cool stuff!
Unity used To use Javascript for scripting so yeah it Javascript should handle this game no problem.
This is super cool. Thanks for sharing!
I learned more in the 15 minutes of video than I did the whole year. Thanks for sharing.
Glad it was helpful, let me know if you have suggestions as well!
This is incredibly impressive! I can’t imagine making an engine from scratch 😳
Hah yeah it's a bit of a pain.
"engine" lmfao
he's using three.js I think. There are many libraries for working with canvas. You can try WebGL yourself if you wanna be hardcore but it's hard and also involves writing gls code as string in javascript I think...
@@hoodedwarrior8956 I have a quickie 3d engine using webgl that I pounded out in about a day, just a simple light-prepass renderer, if you're interested in seeing how to build a (basic) 3d engine.
@@simondev758 Hey, yea that sounds interesting, is it on github?
you have the most soothing voice i have ever heard
IKR, he almost sounds like Rami malek from Mr. Robot.
@@natarajboina7525 True! Somehow he sounds like being 30 and 70 years old at the same time lol
I am really grateful for showing how the sausage is made. Keep up this great work!
np, glad you liked it!
Bro this deserves a sub. Well done.
Once i tried this, tried to make the character raise his fist, he ended up holding up a severed arm, but I just kept it.
I have no idea what you were doing with code to run your game but I really like the video. I'm into game dev and trying to learn it with Unreal engine. When I will have enough knowledge of the engine I will definitely try to make game like yours.
Awesome, I used to do C++ game dev, and the code should translate easily since I still write like a C++ programmer.
I'd recommend something like C++ OpenGL to get more knowledge of the inner workings of an Engine (openGL for graphics related work).
You'll really be spending more time with familiarizing yourself with how to use the engine itself rather than understanding how it really works from the inside out.
It would be much more difficult though. I just don't think if the purpose is to understand the engine, you might get more from doing closer to what they do rather than using their abstract work.
That is, if you really don't know how it works.
Unless maybe you are reading a lot of their docs. Unity for example has some good info on its life cycle that can be helpful.
So read docs & articles on it!
@@rrestoring_faith So far I have used blueprints to play around in engine and everyday trying to improve myself. I wanna learn lot more. I will definitely take your suggestion. Thank you.
im glad i subscribed with notifications on
ps: i wasnt to learn three js too guess i'll start with ur tuts
heh
Great job, bro! Keep it up!
Best regards from Brazil!
Thanks, will do!
As someone who is in their early stages of coding. This is massively inspiring 👏 it amazes me how powerful JS is
It's also probably the best programming language to learn right now, super in demand, along with python.
@@DankDimensionMemes i'd say to start with oython tho. Its easier to start with and new comers can easily learn about OOP, decorators and stuff. later if they want to learn JS, they can just lookup the doc, list methods, string methods, style guide, how to declare stuff and so on
@@eeriemyxi I personally dislike Python, I would say learning js, and it's frameworks is better.
This video brought me to your channel and might I say WOW your an amazing javascript developer!!. When I grow up I want to be just like you lol. I been on this journey learning javascript for 2 years and just havent been able to wrap my mind around it plus stopping on my learning and then picking it back up, lately though I been really hungry to learn the language and am beyond motivated to learn the fricken language. I got into programming to want to learn how to build websites/video games and now since I see I can build a full functional game with vanilla javascript. I'm super pump to dive deeper into my learning!. So I have to ask how did you build your knowledge up with javascript currently I'm working with the DOM and eventlisteners to make my webpages dynamic adding some functionality to things, but I feel building a video is beyond that scope of development.
PS: Sorry for the long message I had alot to get off my chest and I seen from other people comments you been replying back to most of them so I hope this message finds it way towards you!. 😁🙌🏽
I'll answer you a bit later, when I'm not on my phone.
There's really no secret, just keep learning and practising. Find interesting projects to work on, that motivate you to learn the skills you'll need for a career later.
I'm an experienced game developer (10+ years in games and almost the same at Google), and I'm happy to teach you whatever I know through the channel.
@@simondev758 Wow 10 years that incredible and you been at google for just as long!. I'm not going to lie I feel extremely better knowing that it will come with time and years of experience. I do have a question since I just discovered your page yesterday do you have any tutorials for beginners that's trying to learn game development with using javascript where the videos speed aren't at 10x?. I would love to see your full explanations on your projects so I can research why you did what you did also see a project from beginning to end in real time. 😏
Fantastic Simon the development of a game in Javascript, to make a game like this I would take more than a year, only if it was just a phase lol. congratulations on sharing your knowledge
looks terrific, great work !
thanks!
I like how every HTML tag is a div :D
I plan to learn about another tag some day.
@@simondev758 the good thing about HTML is that you don't need to. :D
@@PatrikKulisek You really do, though. Although the JS demonstrated here is really impressive, the HTML is downright terrible. Not to hate on the creator, but I just wanted to leave this here to let newcomers know not to take this as an example.
Unbelievable, JS can do such magic.
Still, am glad I stick to Unity.
Yeah, you can hammer nails with a spoon too... it takes longer and the outcome is debatable, but it's surely doable
@@ashpats2 I love this comment. LOL
@@ashpats2 both C# and JS run on JITs so what exactly is the difference?
@@gloverelaxis it isn't matter of langauge, unity is specialized engine for game creation, JS don't have that
What a great video you motivated me, now I also really want to code one.
I enjoyed this great video. It was relaxing and informative
ty
"An entity is a glorified array of components"
Truer words have not been said.
Hi Simon, I was checking out our code and I notice you use closures on a lot of the entities. E.g. export const mything = (()=> {});
You end up with names like entity.Entity();
If you exported without the closure, you could just have
Entity();
Is there a reason why you've structured it this way? Is it because you're not using a build system and following a classic module pattern?
Anyways, it just stuck out to me when I read the source and was curious. Great video. Thanks!
I really appreciate smart people. I'm fascinated by people like you. 👏🏼
Great video really enjoyed it!
Meanwhile:
"why is it so hard to memorize the button code in javascript?"
Me searching up “how to center div” for the 20th time
@@FDAShorts yeah lol.
@@FDAShorts exactly lol
@@FDAShorts well as FE developer after 10 years.. I still search this from time to time. Sometimes those bitches dont want to center! :D
@@kraldada6557 Especially when you working with someone else's code and there is a mountain of !important properties all over the place ^^
You're a different breed of Javascript dev
thx!
Awesome work dude
Devs at work: we need a 10 days sprint to make this form validate email
Devs at home: let’s make an RPG in 2 days
Devs at work: I've produced this 84 page design doc for Project "Hopeful Promo" on how to integrate form validation for email, that breaks down and compares potential implementations with major js libraries on multiple axes, with estimated file size, effects on FirstContentfulPaint, blah blah blah, a roadmap for implementation with milestones for test coverage, required refactorings, minimum viable product, field trials, and maintenance.
Devs at home: I copied some crap from stackoverflow, seems to work.
this is already a perfect game to launch in the play store for free and fill with paid items
Simon, I am a front end web developer and I don't care to much for game development, but your module component system is really genius here. I know many people use them, but this is THE efficient way to do it. Nice job.
thx!
Nice work!
thanks for sharing simon!!!
It's amazing. Please be honest with me: how long did it take? So that I know whether I should start doing the same
A few days, but keep in mind a few things:
I already wrote a few things in previous tutorials.
I've had over a decade of professional game dev experience.
@@simondev758 I want to learn javascript but it looks scary is it that hard ?
@@progamerbufovi tbh people say its not.. i learing it for a about hmm 40+ days and tbh i know just a little very very little.. i was learing html and ccs 1st then trying to implement more of java script but maybe i am just stupid idk.. i can do simple tasks but it looks more like copying codes from intrenet then actually wrote them by myself.. but anyway i need to learn it anyway becouse its requirement for React.. and react is required for my job soo. yeah.. i dont like learning it at all for me its not fun at all.. i like html i know its not programming language but idk i just dont like javascript and learning it just becouse i must.. becouse i need it to learn React.. that is just my path and all of that becouse of job but in my freee time i like to do games in unreal engine becous its easier and niceer.. looks better idk...
@@SERBIANUGANDANKNUCKLES thx cause I am learning python and it looks more simple to me
@@progamerbufovi javascript and python are quite similar, syntax aside. The problem with javascript is that it has so many subtle pitfalls that imo makes it possibly the worst language out there, especially for beginners that are going to look things up on google but are not able to tell if the code they find is good or not.
I think you'll be better off learning python first, then maybe some Java or C# to look into a slightly different way of coding. Javascript is not harder than any of these languages, but you have to be more careful and look up the latest best practices. If you get to know python well, switching to javascript will be a no brainer if you need to.