I Tried Making a 3D RPG Game in JavaScript

here's the idea i'm gonna spend a couple days and try to make a little 3d rpg game like breath of the wild or dragon age and i'll be implementing it 100 from scratch okay so i'm allowed to steal my own code if i already wrote it so i'm totally just going to copy paste the setup code from my previous tutorial and that gives us a basic plain and sky box nothing special now a lot of game engines unity included use an entity component style architecture which really lends itself well to reuse i like working with this style but of course since we're working in javascript we have nothing so let's make one how hard can it be right i'm just going to crop out a quick one it'll be a pure component based system as opposed to the newer entity component systems but in reality there's not much api surface to these things an entity is a glorified array of components with some accessors and management functions and that's it and once we have one the first thing we want to do is make a player controller and third person camera luckily again i can just steal from myself again we already made these in a previous tutorial these are getting a quick copy paste right into their own components so i just need to dump in the player controller code and wrap it all up into this player basic controller component and that gives us a fully working walking character same thing with the camera we covered that previously in third person cameras and so again i'll just copy paste this shamelessly into the project calling it third person camera the gist of the code is that you're tracking a spot just ahead of the character smoothly interpolating the camera each frame towards the ideal spot and once we have an entity in the world set up with this component you've got a walking character with the camera trailing behind them an rpg with no weapons would be boring though so let's get a sword into this guy's hands of course we'll be doing this as a component because then we get to swap out other weapons and all that jazz so we're declaring an equipped weapon component and the goal here is just to load the specified weapon and then route it to the model's hand in the skeleton things rarely work on the first try so i ended up working through a few problems but eventually we got this guy running around with a sword in his hand getting an attack animation is the natural progression here and luckily we already had made a dance state in the finite state machine so this is mostly going to be a search and replace job a few quick renames later and we have an attack state and i can swing the sword around i decided the next thing to do is to jazz up the world a bit add some trees and stuff so obviously make the world a whole lot bigger first okay that looks good i also don't want to pay actual money for this luckily i know people post free stuff in the game dev subreddit all the time so i can just search there i looked at a few posts and this guy quaternious has some cool looking stuff i should be able to come back here for a bunch of assets anyway we need some foliage and stuff so i took this nature pack now for the code normally i'd make some sort of render component that's reusable but that requires planning so i'm just going to copy paste the code and create a standalone static model component future simon will have to clean this up then you spawn a bunch in the world at random spots and voila you have the exact same tree stamped out a whole bunch of times that nature pack didn't just come with birch trees so so i'll just pick a few more of these at random then we just need to write some quick code to randomly pick from a few of the ones we chose and now we've got like a forest or something the code is pretty bad but luckily we didn't spawn a tree right over our standing spot there's also some really nice low poly clouds on the site so let's go with those this is just a straight up copy paste of the loop that spawns trees but we'll spawn these nice and high and that gives us well they're kind of hard to see actually white on white wasn't the best color choice on my part my bad let's add a sky i've done complete realistic sky scattering simulations before but let's do this the lazy way 3js has an example with a super simple and decent looking sky so i'm just going to lift that directly into our project basically it's just a skysphere and it blends with the fog near the horizon so in the distance you get a blending between the fog and the sky color that's all good we have the sky in let's move on to inventories a lot of rpg style games have something like this like a backpack where you can manage items you pick up and stuff i'd like to do the same thing here pop up a menu with a grid of items and let you drag stuff around since this is javascript and the web i'll just code this up using html i just need to get a button down in the bottom center of the screen i kind of hate html so i mostly use divs and flexbox for everything you have been warned this is not best practices i ended up with a black button it's a bit plain so i checked out game icons and there's a ton of really neat icons on there i nabbed a quick backpack icon and stuck it into the game if i have time i'll go back and color it and make it look nicer now to make the actual ui i fired up to get a good character shot of the model i'm using then it's off to write some incredibly bad html this is just a zillion divs laid out in a grid and give them some id so i can refer to them from the code later but it looks good now we need some actual logic for this thing i created a quick ui controller component and dumped some logic in there for opening and closing the menu and created a ui entity in the main file now it opens and closes like we want but we want actual stuff to hoard so we create a new inventory controller and inventory item components inventory item is mostly just to hold information about a specific item in the inventory and inventory controller handles the logic of choosing a slot updating the ui with the icon that kind of thing just bookkeeping really then of course we define a few items in the world and give them to the player and as you can see these items now show up in the inventory also i help myself to a few more icons from game icons next i want to make it so you can drag them around that's pretty easy to do in html at least i've heard i have no idea how to actually do it but the tutorials don't look that hard i just seem to need to add this draggable property to a lot of the elements that i want to drag and then in the inventory controller i'm supposed to just need to go and set the on drag and on drop event handlers and that should let me move things around in the inventory i got it going after a few tries they were all screw-ups in my logic for swapping the items now let's make some stats because rpgs love having character stats i'll make it pretty simple we'll pop up a menu here and we'll just list out all of the stats on the left and their values on the right and of course we'll have to add both the html code followed by some sort of health component that will update the ui and finally back to game icons to help myself to a nice stats icon looking good we have stats now i kind of want to add some small details like tool tips and again since this is html it's not supposed to be super hard i looked up a few tutorials added some quick divs and junk to my html code and pretty soon i had a little floating tool tip and of course once that was done i added full descriptions for all the different stats these are all complete nonsense except for strength i actually use that to do a bit of damage calculation the rest are just gibberish for now okay let's get moving a bit more and try to add some more enemies as i mentioned before i don't want to spend any money on this so i'm going to go back to quaternious for some more free model goodness there's a monster pack here so let's grab it in the code i need to define a new component for the mpc that will eventually house the ai and logic so i'm just going to go with npc controller for now and this is going to be a shameless copy paste of the player controller component with some modifications to change the finite state machine and customize it a bit for generic npcs of course you also need to add an entity in main so i just did that quickly there we go the ghost is there now just kind of sitting there doing nothing so let's go back and add some primitive ai just to get it to chase us and attack this is going to be insanely simple because the player can already move an attack so the plan here is just to use that exact same code but the ai will be pressing the keyboard buttons instead simple huh and to find out what's close by we'll just use the spatial grid that we coded up a few weeks ago so we just drop it into a component and off we go this was supposed to be pretty simple and i'd like to say this worked on the first try but i screwed this up pretty badly i ended up spending more time on this than i would have liked but eventually i got it working though so yay but they just swing at each other this is kind of boring let's make them hurt each other what i need to do is make an attack controller component and its job is really simple it watches the attack animation and looks for a specific time in the animation and then sends some damage alright so now i can take a few swings and i can totally kill the ghost and that also means that the ghost can kill me eventually i didn't make it very strong one problem is that it's hard to tell what's happening though it would be nice if we had some ui in the corner a lot of games draw a little picture of the guy or maybe have some health bars or whatever so i'll just quickly draw one myself using the character's image and we'll make it host a health bar then some basic html just to position the image in the top left corner of the screen and we of course need to hook up the health component so that it updates the ui awesome now we can watch the ghost murder me in real time but i also want to see how much health the ghost has a lot of games do something like this where they float a little health bar above the enemy's head this should be pretty simple conceptually it's just a quad that floats over the enemy's position and displays their health somehow like maybe green to red as it goes down and shrinking the bar or blacking out part of it or whatever it took a little bit of iteration had to work through getting it to face me getting it look roughly right animating it a bit so the health bar kind of smoothly drops down but eventually it didn't look so terrible with that out of the way the next goal is to add a leveling up system and i'm not going to overthink this too much what i basically need is to accumulate experience points and then play a small effect i already made a particle system in a previous video so let's just dump that right into the game as a component i'll make two components now one is the level of spawner whose job is to make these level up entities and the other is the actual level up effect itself that gets spawned once those are hooked up you can watch the stats go up as i kill this guy also the effect goes off so we get some stars and stuff okay so the last thing to do to make this more rpg-ish we need quests you always have a zillion quests to do in any rpg game so we gotta add this back to mixamo to help myself to another free model i just want someone to stand around and deliver some quest lines so pretty much anybody will do as long as they fit in with the general fantasy theme of course i just declared another entity in the world with the new model and plopped her right down beside my spawn point i can't really do anything but she's there at least i want to make it so that when you click on her she delivers some lines and adds them to your quest journal and this should be really easy since 3js has this raycaster class all i have to do is integrate it into the game and it doesn't seem to be working i just wanted it to print a small message to the console but nothing is happening as it turns out this class doesn't work with skin meshes so let's write it ourselves instead of using the raycaster and all the meshes i'll just go ahead and find all of the pickable objects nearby and then i'll make collision boxes out of all of them after that i can do ray box collision detection to see which one i clicked on it's not going to be even close to perfect but at least it should work now when i load the world up i can walk up to the npc and click on her and it works like expected good enough so i'll declare job done okay let's get some quest ui up on the screen next so if i click on the npc it'll bring up some sort of dialogue describing the quest so i just wrote some quick html to put a dialog box in the middle of the screen of course you actually need a quest of some sort so let's make a quest component and i'll hard code the first question here the job of this component is to get notified when the npc is picked and then show the quest dialog adding the title and body of the quest text and of course i'll have to write a quick quest description so that it shows up in the game now that's hooked up i have this little quest journal thing that can bring up it's empty now but now i can go click on the npc when i do that she shows some quest description stuff and the quest now shows up in my quest log so i can review the quest if i need to this is pretty cool most of the basic elements of an rpg are in place let's go and add some more monsters to the world since we already had monsters before all i'm doing here is making a big loop where i'll spawn like a hundred more that quaternious package i downloaded came with like two dozen different monsters so i'm just going to select a few more of them and randomly choose between them i'll also randomly scatter them throughout the world so they don't just swarm me and kill me right away and there we go there's a whole bunch of monsters all over and i can run around and kill them it would be cool that i gave them loot or something maybe i'll revisit this and have it so you can go and loot the corpse looking for stuff also yeah there's still a lot of bugs to work out anyway that's as far as i got before i kind of ran out of time with a bit more work this could maybe be half decent some height map terrain some hand-placed npcs and towns and shops and stuff could look good i'll clean the code up and throw it up on github so look for it there if you decide to use this to make something like your own project i'd love to see what you end up making until next time cheers

Channel: SimonDev

Views: 928,107

Keywords: simondev, game development, programming tutorial

Id: SBfZAVzbhCg

Length: 14min 18sec (858 seconds)

Published: Mon Dec 21 2020

Reddit Comments

[u/fredsq]

wow i’m impressed! How easy you make this look, wow.

[u/yannbraga]

That's pretty awesome! Any chance for a demo link?

[u/Hyetigran]

Wow, this is awesome!!

[u/rustyseapants]

How long did this demo actually take?

[u/ThinknBoutStuff]

I am just plainly amazed by this! Great job.

[u/AdPositive8945]

Flat out bonkers!! Great job!! Cant wait to see whats next :D