I Tried Making a 3D RPG Game in JavaScript
Ғылым және технология
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/
Пікірлер: 1 300
If you enjoyed this, help support me: www.patreon.com/simondevyt
@user-uu2kh1vy1r
3 жыл бұрын
first reply :D
@user-uu2kh1vy1r
3 жыл бұрын
hey
@simondev758
3 жыл бұрын
@@user-uu2kh1vy1r :)
@johnjoedaly
3 жыл бұрын
Is it ok to take this and work on the sound design for it?
@johnjoedaly
3 жыл бұрын
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
@simondev758
3 жыл бұрын
That dude has so much work to do, can't wait to see his face when he finds out
@jimhalpert9803
3 жыл бұрын
It's like a developer instinct
@0netom
3 жыл бұрын
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
@hombacom
3 жыл бұрын
@@0netom I guess there also are people that build perfect code in projects that they never pull off
@92sieghart
3 жыл бұрын
@@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.
@timhold2016
3 жыл бұрын
Everyone starts there! I bet if you were to completely start over, you could get to your current state in a week.
@simondev758
3 жыл бұрын
Heh, like Tim says, it's always easier the second, third, fourth, N'th time through.
@wiiu7640
3 жыл бұрын
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.
@PAEz...
3 жыл бұрын
Well done on making your app.
@masteronepiece6559
3 жыл бұрын
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 :)
@simondev758
3 жыл бұрын
Thanks for making them available, awesome work!
@Albkiller22
3 жыл бұрын
I just watched the video and was thinking about you the artist
@ChaoticNeutralMatt
2 жыл бұрын
Nice assets!
@vanessaviola1648
2 жыл бұрын
@@ChaoticNeutralMatt oo saucy
im started learning javascript 10 days ago. watching this video is like, watching thru a portal opened to another galaxy.
@simondev758
3 жыл бұрын
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.
@herantd
3 жыл бұрын
Even though this is awesome. Don’t teach js for game dev purpose, this dude is crazy 😂
@cepuofficial9025
3 жыл бұрын
@@simondev758 awesooomeeeee...
@moonman8055
3 жыл бұрын
nah, its like watching a professional ball player while wearing your grade school jersey. BEAUTIFUL WORK!
@tylerdaniels9000
3 жыл бұрын
Learn jQuery it's all you need them you can make any game in one minute
“How hard can it be” Idk pretty hard lol...
@simondev758
3 жыл бұрын
Hah yeah
@DanIel-fl1vc
3 жыл бұрын
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.
@thedude4039
3 жыл бұрын
@@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.
@metagen77
3 жыл бұрын
@@thedude4039 Nothing worth doing was ever easy, right?
@mikul3122
3 жыл бұрын
@@metagen77 eating food is pretty easy and definitely worth it
this guy broke the limit of web devlopment. salute to you
hes like: i‘ll steal this little bit from myself i‘m like: i‘ma wait this out and steal the finished thing
@simondev758
3 жыл бұрын
Do it, then show me what you make!
@heliosaiden
3 ай бұрын
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
I love how information-dense this is. You clearly explain a LOT of work in a short time. Impressive stuff, thanks for sharing :)
"some npcs, towns, shops n stuff, it could look good." lol, the calmness.
@simondev758
3 жыл бұрын
Because I'm not the one adding them! :)
@ofekifrah9206
3 жыл бұрын
@@simondev758 Future Simon is
@rewrose2838
3 жыл бұрын
@@ofekifrah9206 that's how I deal with all my work (I just gotta do what I can, leave the rest to future me 😢 😂)
@ofekifrah9206
3 жыл бұрын
@@rewrose2838me too lol
@thehorde4868
2 жыл бұрын
@@rewrose2838 😂😂
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.
@kevinsobiski5212
2 жыл бұрын
Reusuable classes is object oriented 101.
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.
@simondev758
3 жыл бұрын
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.
@cymaked
3 жыл бұрын
@@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! :)
@simondev758
3 жыл бұрын
@@cymaked Good advice, it can be easy to get carried away with big plans.
@FirstLast-gk6lg
3 жыл бұрын
Totally agree
AI already looking better than one in cyberpunk
@simondev758
3 жыл бұрын
Hah, burn
@sumanboi
3 жыл бұрын
@@simondev758 will it have the feature to customize genitals like in cyber punk?
@s-kee2928
3 жыл бұрын
@@sumanboi please no
@sumanboi
3 жыл бұрын
@@s-kee2928 then its no fun
@s-kee2928
3 жыл бұрын
@@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
@simondev758
3 жыл бұрын
lol
@darkchocolatereborn381
3 жыл бұрын
Nice day for fishing ain't it?
@Hytension
2 жыл бұрын
@@darkchocolatereborn381 huhu
@justamanofculture12
2 жыл бұрын
"Ah, I see you are a man of culture as well 😌."
@jvcss
2 жыл бұрын
yess! nice day for fishing
I can hear your browser screaming 🤘
2:05 Square Enix be like, whatever, ship it. massive big swords ! everyone likes
@simondev758
3 жыл бұрын
Oops, we loaded both a gun and a sword model... errr call it a gunblade and ship it!
This was crazy fun to watch - I love how you call out your own code a lot :D - thanks for an amazing game video
@simondev758
3 жыл бұрын
Heh yeah I try to build smaller tutorials, and then bigger projects show how everything can be tied together easily.
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!
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.
Just 1 minute of watch and already a subscriber, that's some quality content right there.
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 😩.
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!
@simondev758
3 жыл бұрын
Awesome!
"But they just swing at each other. This is kinda boring. Let´s make them hurt each other." LOL
@simondev758
3 жыл бұрын
Just a little blood to make things interesting
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.
@simondev758
3 жыл бұрын
Awesome, happy to have you around!
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!
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.
@simondev758
3 жыл бұрын
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! :)
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.
what you did here is insane.I CAN ONLY WISH TO BECOME THIS GOOD
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!
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
@simondev758
3 жыл бұрын
ty
You Sir, are the Bob Ross of Web-games! Thank you so much for this tutorial I learned heaps from it.
Didn't know JavaScript could do this! I'm learning programming and this is an awesome project you've created!
@couchman-sw6jy
Жыл бұрын
It’s plenty possible. Just gotta use the right libraries
u're so talented, its impressive. First time here, surely not the last !
wow i didnt think this was even posible... and that voice of meditation journey is amazing!
This will improve my knowledge in Js, thank you and keep up the good work!
@simondev758
3 жыл бұрын
Np, glad it's helping you!
@RicardoHernandez-ii9lx
2 жыл бұрын
I’m new to this stuff, did he use js in unity or was it a different program?
@RCOA24
2 жыл бұрын
Js in Visual Studio i think
@RicardoHernandez-ii9lx
2 жыл бұрын
@@RCOA24 ah okay thanks
@chubbymoth5810
2 жыл бұрын
@@RicardoHernandez-ii9lx Just JS in any IDE and three.js for API. Very impressive really what you can do with it.
This is so inspiring. Thanks for posting this!
@simondev758
3 жыл бұрын
np glad you enjoyed it!
I really enjoyed your video and compare to other creators, you provided your full source code which is what I really love about you
I love this channel. Nice Video Simon.
Yet another amazing tutorial! Great stuff. Thx!
@simondev758
3 жыл бұрын
welcome, glad you liked it!
This was amazing! to much knowledge and experience behind of it!
@simondev758
3 жыл бұрын
Glad you enjoyed it!
This is impressive. Didnt know you can do this with javascript. Will dive more into this.
This shit is epic man, seriously. No bs interesting video with great editing and quality narrating.
Your videos are just amazing. Thank you!!!
@simondev758
3 жыл бұрын
ty!
This is the coolest. I wish I had the know how on adding a physics component!
@simondev758
3 жыл бұрын
Physics tutorial is on my TODO list! :)
@yitzchakl6176
2 жыл бұрын
@@simondev758 lol just use tile based collision for terrain and non moving object, it works better for multiplayer too
Awesome video, ive done quite a bit in JS but never something this neat!
Love your channel! Just subscribed hoping to learn more!
You're a madman. I love it!
@simondev758
3 жыл бұрын
heh
This is so cool! Thank you for showing this. Very Inspiring :)
omg, this is awesome! I need to take a crack at this!
This channel is a gold mine for game devs
@simondev758
3 жыл бұрын
Thx!
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 !
@simondev758
3 жыл бұрын
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.
@TheTicassShow
3 жыл бұрын
@@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"
Really interesting. Its fascinating to see how these projects you do develop and to get insight into the development process. Inspiring even 🙂
@simondev758
3 жыл бұрын
thx!
Mate.. many thanks to you for this gem and rest of your videos :) cheers once again!
This has to be one of the most badass videos I've ever watched. You're like a Chuck Norris-McGuyver...
@simondev758
3 жыл бұрын
MacGruber!
@VinnyRetro
3 жыл бұрын
More like bob ross
im very impressed, looks better than most early access games on Steam lol
@simondev758
3 жыл бұрын
lol
Bro this deserves a sub. Well done.
This is fantastic work!
WOW 😳 Amazing😍😍 I can't believe that you made it that far . It just blow mind .
@simondev758
3 жыл бұрын
Someone interested could definitely take this 1000x further. This just shows how it can be done.
I thought I knew JavaScript pretty well...until I saw this.
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
This is super cool. Thanks for sharing!
my man be making Elder Scrolls 6 and Xenoblade Chronicles 3 in one single game
Your video editing has improved massively :)
@simondev758
3 жыл бұрын
Hah, thanks for sticking it out with me as I figure out how to make these videos suck a little less.
This has potential, I always wanted to at least understand how a game is made but mostly know JS. I think I'll be checking this out.
Awesome. Always wanted to get into coding. This looks challenging and a lotta fun. Keep it up!
@sloppyprogrammer4373
2 жыл бұрын
I don't really think starting with writing a game/game-engine in javascript is an ideal starting point to be really honest.
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.
@simondev758
3 жыл бұрын
Heh glad you're enjoying it!
@metagen77
3 жыл бұрын
Needs more engangement and shares to compete with red arrows and stupid faces
TLDR: Just copy paste code from other projects and make slight tweaks and Boom you got a game
I really appreciate smart people. I'm fascinated by people like you. 👏🏼
You are an incredibly intelligent dude... fr.. this inspired me... I hope whoever was lucky enough to hire you is paying you what your worth. This is God mode JavaScript, this is God mode programming skills across the board.
You've already got more going on here than the Chronicles of Elyria "demo".
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.
@simondev758
3 жыл бұрын
Awesome, I used to do C++ game dev, and the code should translate easily since I still write like a C++ programmer.
@rrestoring_faith
3 жыл бұрын
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!
@fahimkamalahmed3544
3 жыл бұрын
@@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.
I can see you spent tons of time in it. keep going
What a great video you motivated me, now I also really want to code one.
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.
damnn, i never knew you could do this with js, so cooool
@simondev758
3 жыл бұрын
Yeah you can do some really cool stuff!
@asandax6
3 жыл бұрын
Unity used To use Javascript for scripting so yeah it Javascript should handle this game no problem.
I learned more in the 15 minutes of video than I did the whole year. Thanks for sharing.
@simondev758
3 жыл бұрын
Glad it was helpful, let me know if you have suggestions as well!
Congrats from Brasil! You're amazing!
As someone who is in their early stages of coding. This is massively inspiring 👏 it amazes me how powerful JS is
@DankDimensionMemes
2 жыл бұрын
It's also probably the best programming language to learn right now, super in demand, along with python.
@eeriemyxi
2 жыл бұрын
@@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
@DankDimensionMemes
2 жыл бұрын
@@eeriemyxi I personally dislike Python, I would say learning js, and it's frameworks is better.
you have the most soothing voice i have ever heard
@natarajboina7525
3 жыл бұрын
IKR, he almost sounds like Rami malek from Mr. Robot.
@magnum.80
3 жыл бұрын
@@natarajboina7525 True! Somehow he sounds like being 30 and 70 years old at the same time lol
looks terrific, great work !
@simondev758
3 жыл бұрын
thanks!
Great job, bro! Keep it up! Best regards from Brazil!
@simondev758
3 жыл бұрын
Thanks, will do!
This is insaneeeeeee!
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!. 😁🙌🏽
@simondev758
3 жыл бұрын
I'll answer you a bit later, when I'm not on my phone.
@simondev758
3 жыл бұрын
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.
@kidbrave_7673
3 жыл бұрын
@@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. 😏
I am really grateful for showing how the sausage is made. Keep up this great work!
@simondev758
3 жыл бұрын
np, glad you liked it!
thanks for sharing simon!!!
I like how every HTML tag is a div :D
@simondev758
3 жыл бұрын
I plan to learn about another tag some day.
@PatrikKulisek
3 жыл бұрын
@@simondev758 the good thing about HTML is that you don't need to. :D
@didiercatz
3 жыл бұрын
@@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.
This is incredibly impressive! I can’t imagine making an engine from scratch 😳
@simondev758
3 жыл бұрын
Hah yeah it's a bit of a pain.
@ccgb92
3 жыл бұрын
"engine" lmfao
@hoodedwarrior8956
3 жыл бұрын
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...
@simondev758
3 жыл бұрын
@@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.
@hoodedwarrior8956
3 жыл бұрын
@@simondev758 Hey, yea that sounds interesting, is it on github?
I had no idea this was possible with javascript; this gives me hope.
This is a GEM for devs. So nice
Meanwhile: "why is it so hard to memorize the button code in javascript?"
@FDAShorts
3 жыл бұрын
Me searching up “how to center div” for the 20th time
@bernardus3289
3 жыл бұрын
@@FDAShorts yeah lol.
@guangyazhu7272
3 жыл бұрын
@@FDAShorts exactly lol
@kraldada6557
3 жыл бұрын
@@FDAShorts well as FE developer after 10 years.. I still search this from time to time. Sometimes those bitches dont want to center! :D
@Tnargav
3 жыл бұрын
@@kraldada6557 Especially when you working with someone else's code and there is a mountain of !important properties all over the place ^^
Unbelievable, JS can do such magic. Still, am glad I stick to Unity.
@ashpats2
2 жыл бұрын
Yeah, you can hammer nails with a spoon too... it takes longer and the outcome is debatable, but it's surely doable
@joimeecajandab1438
2 жыл бұрын
@@ashpats2 I love this comment. LOL
@gloverelaxis
Жыл бұрын
@@ashpats2 both C# and JS run on JITs so what exactly is the difference?
@kurdm1482
11 ай бұрын
@@gloverelaxis it isn't matter of langauge, unity is specialized engine for game creation, JS don't have that
Awesome work dude
and here I am spending days to create a basic javascript app that adds text to a comment. you the real MVP dude
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!
"An entity is a glorified array of components" Truer words have not been said.
I enjoyed this great video. It was relaxing and informative
@simondev758
3 жыл бұрын
ty
Great video really enjoyed it!
this is already a perfect game to launch in the play store for free and fill with paid items