I Tried Making a 3D RPG Game in JavaScript
Vložit
- čas přidán 20. 12. 2020
- 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/ - Věda a technologie
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
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!
that is strange. you can learn stupid thing like javascript in 2 hours.
“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
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
"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 😂😂
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 love how information-dense this is. You clearly explain a LOT of work in a short time. Impressive stuff, thanks for sharing :)
this guy broke the limit of web devlopment. salute to you
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..
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
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!
"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
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.
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.
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 😩.
"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
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!
You Sir, are the Bob Ross of Web-games! Thank you so much for this tutorial I learned heaps from it.
Nice to see another channel that likes to push the boundaries of what's possible within the browser.
what you did here is insane.I CAN ONLY WISH TO BECOME THIS GOOD
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
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!
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!
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.
Just 1 minute of watch and already a subscriber, that's some quality content right there.
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!
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!
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.
This was amazing! to much knowledge and experience behind of it!
Glad you enjoyed it!
wow i didnt think this was even posible... and that voice of meditation journey is amazing!
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 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
Yet another amazing tutorial! Great stuff. Thx!
welcome, glad you liked it!
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
This is impressive. Didnt know you can do this with javascript. Will dive more into this.
im very impressed, looks better than most early access games on Steam lol
lol
This is so inspiring. Thanks for posting this!
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
u're so talented, its impressive. First time here, surely not the last !
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 videos are just amazing. Thank you!!!
ty!
Awesome video, ive done quite a bit in JS but never something this neat!
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.
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
This channel is a gold mine for game devs
Thx!
This is so cool! Thank you for showing this. Very Inspiring :)
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
You're a madman. I love it!
heh
TLDR: Just copy paste code from other projects and make slight tweaks and Boom you got a game
omg, this is awesome! I need to take a crack at this!
Really interesting. Its fascinating to see how these projects you do develop and to get insight into the development process. Inspiring even 🙂
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 !
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"
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.
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!
Love your channel! Just subscribed hoping to learn more!
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
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.
I really appreciate smart people. I'm fascinated by people like 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.
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 love this channel. Nice Video Simon.
Wow, you should put this tutorial in a ebook,
Amazing content thank you so much 👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻
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.
my man be making Elder Scrolls 6 and Xenoblade Chronicles 3 in one single game
I do a lot of development work in React, but seeing all this done in Pure JS makes me want to give this a go!
This shit is epic man, seriously. No bs interesting video with great editing and quality narrating.
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?
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 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.
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.
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
You've already got more going on here than the Chronicles of Elyria "demo".
I am really grateful for showing how the sausage is made. Keep up this great work!
np, glad you liked it!
Love how the thumbnail is nice looking graphics and the actual gameplay is in paint.
No worse than most mobile game ads
I thought I knew JavaScript pretty well...until I saw this.
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.
I had no idea this was possible with javascript; this gives me hope.
and here I am spending days to create a basic javascript app that adds text to a comment. you the real MVP dude
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.
"An entity is a glorified array of components"
Truer words have not been said.
What a great video you motivated me, now I also really want to code one.
This is super cool. Thanks for sharing!
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. 😏
This is a GEM for devs. So nice
WOW. If you re-made designs, added more quests, added online playing, trading as well as overuse javascript dynamic importing to minimize load time... and used js bundler to compile final project to minified js that supports old devices too... It could be pretty cool Runescape like game.
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!
This is insaneeeeeee!
this is cool, the programming language i've learned will not go to waste👍
Very cool! I've always been interested on how to do this kinda stuff from scratch.
Thx! Let me know if you have suggestions for topics too
@@simondev758 Will do! Also how could I self teach me this kind of stuff (programming stuff like this from scratch)? What resources or videos would you recommend? Emphasis on self teach... lol
@@grantscott1686 What level are you at?
How's your computer science fundamentals? Programming level?
@@simondev758 I would say I'm around beginner to intermediate. Though, saying Intermediate may be a little generous...
@@grantscott1686 I have some easier projects from earlier on, Flappy Bird, Tic/Tac/Toe, Paper Rock Scissors
Build those kind of projects, small ones that take someone who knows what they're doing an hour or 2. Be prepared to take a lot longer, work through problems, get it wrong, then figure out why you got it wrong and get it right. Then build your next thing. And the next. Then go back and do them again, using any new techniques, refactor them to be simpler, easier to read.
Getting "good" at programming isn't much different than getting good at anything else. I do bjj, and it's the same deal. Be prepared to suck for a long time. Then one day, you still feel like you suck, but for some reason everyone says you don't.
If you have specific questions, feel free to come back and shoot me a message on Twitter or somewhere like that.
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!
This is the first video i came across for making game in js and i just started learning js
Heh, hope you enjoyed it!
This is fantastic work!
"I'm using lots of divs, don't look at me for best practices." CZcams must be copying you...
hah
i mean im a "professional" and myself and all my coworkers use "a lot of divs".. everywhere ..
@@abe_is_live I will be graduate from college in winter 2022, and then working as a Frontend Web developer, and I can assure you that I am not only using div in HTML ;) I use "div", "nav", "img", "video", "script", already use "sup", "footer", "p", and more. Also, there are the new HTML tag from HTML5.1 with by memory something like "details" and "summary" to do drop down menu. I will maybe use them one day in my career if I have the chance.