Building a JavaScript RPG game + Releasing on Steam (Danger Crew presentation)

hey everybody today we're going to try something a little bit different where today instead of doing a coding tutorial like i normally do i'm going to do a presentation this is a talk i've given at a few javascript meetups and conferences but i've never done a really full good version for my youtube channel and so we're going to try that today and hey if we haven't met before my name's drew i try to teach people how to get into game development specifically today we're going to talk about people coming from the world of front end web development how do we use our front end skills to start building games and ship them to real gaming markets like steam if you're interested in that kind of thing i've got a lot more videos just like this one on the way so be sure to subscribe so this talk is called game development as a front end developer and in it i want to share a little story about how i got into all of this basically um a few years a few years ago basically five years ago some friends and i were at work all working as front end developers and we had this idea for a game uh the idea i'll get to in a second but it was an idea that was like so interesting and sounded so exciting we really just wanted to get started making it right away none of us knew anything about kind of more traditional game development languages and technologies like unity unreal engine game maker now we have things like godot all that that was completely foreign to us at the time but what we were really good at is front end development and so we thought hey why don't we just get started with what we know which is html css and javascript see how far it can take us and then from there we'll just see what happens so here was the game idea danger crew it's a game about being a programmer where you walk around the world holding your laptop it needed to look kind of like pokemon or final fantasy with that top-down camera and then you travel around talking to people collecting items all that kind of stuff and you get into battles with other programmers where imagine if you've ever been to a programming meetup or something and you've seen that person that has to like stand up in the middle of the room interrupt the speaker and be like well actually you should have done it like this you know basically to put the speaker down and just project how small they are to everybody in the room it's kind of like well what if we poked fun at that what if we took that and instead of like um speakers having arguments and stuff what if they actually got out their laptops and started furiously typing into their you know computers beams of light would be shooting out of their laptops and be all intense until eventually somebody's laptop just exploded and that's how people resolve their arguments in danger crew it's all supposed to be very fun and silly and just kind of poke fun at some of the programmer culture and so we got started on the game it took about three and a half years of iterating and trying things and writing things and just figuring it all out but finally we shipped to steam in may 2019 and so today in this talk i want to just share the journey with you so that if you have an idea for a game that you're really excited about and maybe you're also coming from the world of front end development you're not really sure how to get started and you're not really sure in adopting something like unity or game maker or whatever um hopefully what i'm talking about here will help inspire you to get started with your game today using what you already know so here's the road map for our talk today what we're going to do is first i'm going to show you danger crew the game just so i'm going to be talking about some of the concepts in it and so i want to show you the game first so we have a frame of reference for the stuff i'll be talking about then we're going to do a really high level overview of how two really important parts of the game work we're going to talk about the overworld where you're walking the character around the world and the turn-based battle system finally we're going to shift gears a little bit and talk about electron which is a way that you can package up your front-end browser javascript html css javascript code to be distributed as a standalone app for people's desktops and i want to stress i'm going to be talking about danger crew a lot in this talk but this talk isn't about danger crew this talk is about you making games so my hope here is that i can just open your imagination a little bit so that you can use some of the concepts i'm talking about to get started with your own game and eventually ship it out for the world to play so with that being said let's see the demo so here i am in the world of danger crew i'm controlling the character in the middle of the screen his name is hank but at the beginning of the game you can name the character whatever you want and choose their appearance he's bound to the arrow keys so as i hold the right key down he'll walk to the right as i hold left down he'll walk to the left and you can just kind of navigate around wherever you want to go this game also has touch support so if i say i'm on like a touch screen or something like that i can grab the screen with my finger and drag around to move the character around that way and then if i go up and kind of go up right next to somebody and press the space bar i'll talk to them so here we go this guy says i'm always nervous to go to the coffee shop there are some great developers in there but they can be mean kind of poking fun at that like bully programmer thing we talked about before so you can walk around you can go into buildings the map changes the music changes um and then if i kind of navigate over here one thing i want to show you is that this game has responsive art so if i open up the dev tools here and just drag around the screen to change my screen size real estate you'll see that this art kind of snaps to whatever is available so you know it's responsive in that way it also goes the other way where if i was on a bigger screen right now i'm just on a laptop right now the art can keep getting bigger and bigger bigger and it'll just keep scaling for whatever screen real estate we have now if i walk over to this red space see this guy hanging out in here this marks one of those programmer bully hacker battle spaces so as soon as my character steps in here you'll see him bust out his laptop and we're going to throw down in a programmer hack battle so here it goes so here we are in the hack battle everything here is programmer themed too so i uh the menu is up it's my turn to go i've got two options scripts and items so i'll spindle open my scripts folder and see that i have two scripts i can use one is called slice the other is called curl slice is an offensive move that you can think of it like you're slicing into somebody's computer or you know you're slicing up an array or something like that it's supposed to do damage to your opponent and then we have curl curl's a defensive move which kind of goes out and downloads an item from the enemy team to steal it it's all supposed to be a stretch it's all very silly but you know it's supposed to just make people smile so i'm going to go ahead and use the slice move against my opponent see that as i used that it inflicted damage to him and now he's going to respond they talk some trash in this game saying eat my array newbie now he's going to use a move called for each and that takes an array iterates through the array and for each iteration does a little bit of damage here he goes okay not too bad so um other than scripts too i also have items so if i spindle that open we also have some like programmer themed things in here if your laptop battery's getting low you can throw a battery pack on it to recover some health uh if you have a memory leak which is one of the statuses in the game you can apply a break point and so that you know use that item fixes it up throw a break point on your code uh and then you know if you're lagging you can use a network reset heal that lagging right up all kinds of silly stuff anyway so i'm going to hit him one more time he's gonna hit me and now remember the point of this game is to destroy your enemies laptop and so uh i think if i hit him with one more move here that'll be enough we'll see his laptop explode so here we go it says what in the now uh we won the battle so we get a victory message and this is an rpg game so here we gain some experience points i've leveled up to be a level two developer and i've also gained some credits and so with the credits i can go out and buy new scripts uh buy laptop upgrades all that good stuff and so that's the end of the demo this is um scroll down danger crew an rpg about being a programmer all built in html css and javascript so like i said danger crew all built in html css and javascript i specifically chose to use react because at the time when we started this project i was doing a lot of my side projects in react and i just felt really fluid in it you know i was able to work quickly and get stuff out the door fast but a quick word about frameworks when choosing a framework for something like this it doesn't really matter what you use you kind of go through the same decision process that you would in any normal web application you know what's the team prefer what's the team good at what's your personal preference maybe you're more into svelte or view angular a gaming specific library javascript library like phaser or maybe you just don't want to use a framework at all all that's totally fine it really doesn't matter what we found is that people don't know or care how you build the game they just want to download and play a really fun game so as long as your tech stack works for you it's going to be fine i used react because i like it now we're going to get into some of the details of how the game was built at a pretty high level the first area we're going to talk about is the overworld and that's the part where you're walking the character around the world you see everything in a top-down view you're talking to people you're exploring you're going through the world in little units called maps and how i describe a map is just a simple javascript object where we have things like image source which tell us which asset to use for the background here we have a list of people that describe all the people in this map each person has an id a skin id so that tells us which appearance to use for the character which direction they're facing so this character is facing up at the white board here this character is facing down and then finally their x y coordinates and that tells us where they're positioned in the map right now we basically take these values and then multiply that by the cell size see we have this kind of checkerboard thing going on and that allows us to create an inline style that absolutely positions each of these people within the map div itself and so each of these people get rendered out as react components that take in these values as props and that's how they know how to render one of these characters is bound as the hero and the hero is the one that when you press the arrow keys that's the one that's going to move around so as i hold the down key down that triggers an animation loop that starts moving and easing the character towards the next y value and so that's kind of how the characters move around the map and finally we have this array of walls where you see certain spaces here like these walls here and this desk the chairs if you're a character and you're trying to navigate into those walls we don't want to let you like step on top of the desk and so anything any cell coordinate in this array is off limits if you try to move there the game will stop you and that creates that illusion of walls so that's basically how all the characters are positioned and how they move but the thing that really makes this feel like a game is the camera system i don't love the word camera because it sounds a little bit too fancy for what this really is this is really just a visual technique for cropping things out of view and so i'm going to explain that to you now so we start with just a few simple elements on the screen first we have a viewport and that's represented by the green outline here it never moves it just stays exactly where it is and it's kind of sized to be the aspect ratio of our game inside that viewport in the very center is that hero character within the viewport we have this red map area a map plane and within that there are these other red instances and those represent npcs objects anything in the world and so basically all we do is if the character wants to move down we're gonna move the map in the opposite direction up and so in the next slide here we see that in play where it can be kind of tricky to look at but basically the viewport's not moving remember it's not moving but the red area is and by default you know this viewport div is going to have css overflow visible applied but as soon as i apply overflow hidden to crop everything out we'll see that here we get this kind of game boy effect where now it feels more like we're exploring the world because we can't see things outside of the green line and then from there we just take this green area and scale it up as large as we can based on the available real estate we have by the way i recently did a whole tutorial video on more exact code that goes into this entire thing including the character movement and cropping out the view and all that so if you're interested in exploring that in more detail i'll link to that on the screen right now let's talk about some of the arts in the game now almost everything you see on the screen is achieved through sprite sheets so each character for example is you know implemented as a four by four sprite sheet it's a one png asset that's 128 by 128 pixels wide total which gives us four frames of 32 each both you know rows and columns and we start by just rendering that to the screen with a canvas tag so because we're using a canvas tag we have this really cool css rule available to us called image rendering pixelated this also happens to work for image tags and css background images too uh but here for whatever reason we're using canvas and um because we're using that because this game is designed in pixel art which pixel art if you're unfamiliar with the art form it's basically everything is designed in perfectly even squares of pixels and it's important that everything is perfectly even because that means we can multiply the size of the asset upwards and then apply this rule to it without losing any quality so even as the asset gets bigger and we're showing it larger than its actual natural size it retains all of this crispness this of course wouldn't work for something like a photo or maybe a more curvy cartoony kind of look because then you'd start to get the blurry jaggedness but for pixel art this works really great you might be thinking okay why not just use svg for this and you totally can and for a long time all of the art really in the game was svg but what we found is that as the art style of the game developed and we started using more colors for the characters and had more details to them the file sizes of those svgs started getting really huge and it was important for us that this game was always playable in a web browser too because it was never really supposed to go on steam that was like a later thing that happened it was always just supposed to be a website so we wanted the file size you know of all the assets to stay really small so they could quickly be downloaded and so anyway that's when we discovered this canvas trick and that just worked for us ever since but if you prefer svg and the file sizes are reasonable go for it i do an ad really quick though that we do utilize svg in certain bits of the ui things that are stateful like life bars and that kind of thing where you know the amount that you want to show in the life bar is going to depend based on state svg works really great for that so we definitely use that a lot too now even though all the frames of the character are technically present in the screen we're using that same cropping trick to only show one frame at a time so here when the character is facing downwards you know we position the sprite sheet within the crop right here where it goes but say the character turns to move to the right or up that's where we take this red plane the sprite sheet and just nudge it upwards so now a different frame is visible in this green area here and that's exactly how the animations work too i've also done a few videos about this in the past but basically all of the movement and the walking and most of the animations you see are achieved through this pattern of using a css easing function called steps and steps allows you to complete a transform or an animation in distinct jumps so what we want to do say we want to show this frame then this frame then this frame this frame to achieve this kind of effect that we see here we say hey sprite sheet i want you to transform yourself all the way over to the left 100 of yourself over to the left but instead of you just easing over there i want you to make that change in distinct jumps and that's where the css steps easing function comes in and here we pass in four because we're dealing with an asset that has four frames wide and so when this is applied to a character div uh we're gonna see frame one two three four and then because we're using the infinite flag here it will just keep repeating and doing that say we were working with a more intricate animation that had more frames to it maybe like 10 then we'd pipe 10 into this value instead and that powers pretty much all of the animation in the game so as you can see all this is just little tricks pieced together but the end result is that it all comes together in this big illusion of a walking overworld the next area of the game we're going to take a look at are these turn-based battles that's where you know i'm on my laptop you're on your laptop and we're furiously typing terminal commands at each other to blow each other's laptops up uh basically uh there's a lot of similarities with the overworld but there's definitely some different differences here but here is an example of a battle basically on the left we start with a list of combatants and so here similar to the overworld each combatant or each person in the battle has an id they have a name which appears on the ui here they've got max health and their current health which we use to display a fraction on the life bar they either belong to team one or team two uh and so team one is going to be the player team and the react app knows like hey this character's on team one so when you're placing them they go down here and they're kind of facing upwards uh or team two conversely gets positioned up here uh danger crew you can have typically like three on three battles but you can have as many combatants as you want really so the app just knows how to position people based on the different combinations you have we also have this concept of a danger meter here which the danger meter is similar to games like overwatch or similar where you charge up a big powerful move over time like an ultimate or a super or something like that now the objective in the game is again to destroy your enemies laptop and you do that by getting their hp down to zero and so to do that uh you know we take turns submitting those actions from the menu that we saw in the demo and so the actions are just also modeled as kind of little data objects here here's an example of slice the move we used quite a bit in the demo each action has a key it basically lives in this big database object of all the actions in the game there's a name and a description which tells the character kind of what they do or tells the player what they do there's an icon type which tells it which icon to use here for a little bit of branding you know like attack moves use the knife that kind of thing and then if you use this move and it's successful and it's valid we return using the success events method we take into account the caster and targets and return a list of events that should play out on the battlefield events can be just visual like here for example here's one that plays that slicing animation on top of um however many characters are listed in this array here but then also some of them actually affect the you know the properties of the state and the values in the state so here what we're saying is after you play the slice animation for all the relevant characters change their hp relative you know negative 20 to what they were before and then you know hopefully their laptop is dead after that some moves though you can't always use danger crew for example has a concept of statuses so you can have you know the nervous status the lagging status say that i'm already suffering from a status and you come in and try to apply another one to me that's not valid and danger crew and danger you only have one status at a time and so in here we have some logic that's like hey if the target already has a status then return false or return true this should fail and then different fail events play out from there players just take turns submitting actions in this turn cycle where basically the turn cycle looks like we iterate through the list of combatants in the list we start with the first person if they are marked as is player controlled true then they'll get that menu that pops up allows them to choose different script or different items however if they're controlled is player controlled flag is false then the game doesn't need to display a menu because this is a character controlled by the computer instead the game just randomly picks a move that the enemy character should use but it's not completely random enemies are also configured with personality objects like some enemies are more vicious than others some prefer to use healing moves and so in there there's like an opportunity for a decision tree where it's like i'm the vicious guy so i'm gonna you know target your lowest hp person and use the strongest move i can on them or i'm the healing person so instead of attacking you i'm gonna like try to help out my friend it's cool because those different personalities can kind of be pieced together in different ways throughout the game to create a lot of variety in addition to these personality varieties we can also have visual variety that help a lot too and go a long way so for example here two different screenshots both using the exact same systems and all that that we just talked through but they feel very different we're here where a team of three developers fighting the servers three servers and a server farm you know they don't look like people but it's the same thing it's just a different sprite that are that's being used and then here we're deep in the woods battling these hacker thugs that are trying to smash our laptops it's all the same systems in place but just the different visual really just makes it feel like its own thing and that's kind of how all the battles come together and so of course the reason i've shown you all these things is to remind you that i think if you have a game idea i bet you can pull it off with html css and javascript sometimes it takes thinking of the problem a little bit differently and applying some of these weird visual tricks to make it feel like a game but a lot of the same things we do when we're building websites and web apps are at play here there's state management there's system design there's iterating and working with people there's the persistence of getting long projects done you know it's really not that different and so in fact when the game was about to come out we started to do some like basic marketing stuff that people do when they launch games uh we posted about it on reddit a little bit and we got a few comments like this where this person says uh whoa whoa whoa web devs can publish games to steam now my dream is finally realizable almost like hinting that there's a myth that like web development is one thing and game development is another thing and they're kind of walled off from each other that's definitely not true and what some people don't know is that your browser code can actually be distributed so that people can download it and run it as a native app on their computers and that's where we start talking about electron now this is straight from electron's website their headline says build cross-platform desktop apps with javascript html and css uh believe it or not a lot of the apps you may use in your day-to-day life are electron apps which means they are authored in html css and javascript but then packaged with electron to run as apps on your computer popular examples are here some i use are visual studio code for sure the twitch app is great for my full-time job i'm using microsoft teams all the time these days with the pandemic it's amazing to think that you can actually package your work and have it be distributed as a desktop application and that's exactly what's going on with danger crew so the super quick overview of what electron actually is is that it gives you a copy of chromium and chromium if you're not familiar is the rendering engine that powers google chrome so imagine your own private window of google chrome but you take out all the browser stuff so no url bar no back button no bookmarking none of that stuff it's just one little window that runs only one thing your code it also gives you a node.js backend so if you need to do operations on the user's computer like saving files loading files that's how our game save system works you can do that just by the node.js back-end it feels a lot like working with an express app or anything like that electron can package your work for windows mac and linux we support all three of those with danger crew and they all work great and then finally it's an open source project maintained by github so it's free to use there's an awesome community behind it so if you're using electron and you hit a snag like a certain error message or something like that it's really easy to just google search the error you're getting and there's going to be a ton of really helpful stack overflow questions and answers because a lot of people use it and it's been really great when you're actually using electron the developer experience is kind of like this you create an electron project and then typically that comes with an npm start command they have a bunch of like starter kits that you can just download and riff on from there so you run npm start to run the project locally and that basically takes an index.html file and then loads it up in that little private window of chromium in that window you have all the stuff that you're used to using if you develop using google chrome typically so it's the same dev tools same network tab elements tab console all that stuff is there because it's really the same thing and so in our case i mentioned it at the top but we built danger crew with create react app which is an awesome react starter kit it comes with a build command that packages up your work in minified production bundles stuff that's ready to drop on the web so we run that command take the directory it gives us and just drop it into the electron project and then run the electron app here and it's there it's danger crew running in its own little window from there we can run a packaging command that will create the final deliverable that we end up uploading to platforms like steam so for us it looks exactly like this you basically run a command um electron builder which you can install into the project there's a few different alternatives to electron builder but that one worked really great for us and then you run a build command passing in a flag of the os you want to build for so in my case i'm on a mac so by default npm run electron builder is just going to create the mac app file but even though i'm on a mac i can still create the windows and linux versions i don't need like a separate windows box or a linux box uh to build the project from there you can do it all from one computer which is really nice from there you can take the output which is you know executables for all the different os's and then upload them to whatever platforms you want to be on in our case you know here's our steam page it involves registering with valve as a developer and doing some tax stuff and then you get to set up your steam page where you upload your artwork and your trailer you fill out all the copy and then of course you upload the copies of your game which is what elektron exported for you and so with that we've covered the full journey of releasing a game made with html css and javascript you know starting from the idea what do you want the game to be implementing it sometimes using some of these crazy tricks and then packaging it up and something like electron so that we can distribute it to the world and so one more time i want to remind you that as a front-end developer you have the resources and technology to create real games for people today so if you have an idea for a game there's really nothing stopping you thank you so much for watching this presentation to the end i really appreciate it if you have any questions or comments about whatever you saw in this presentation today or you want to tell us about the game that you want to make please leave a comment below you can also reach out to me in either of these mediums i'm on twitter drewconley13 or you can just send me an email i like email um so uh feel free to contact me that way and if you want to check out the game that i showed today our websites thedangercrew.com all the links are um you can find them all there and they'll also be in the description below if you got some value out of this today i really appreciate the like button and just a reminder that i do create videos about getting into game development covering all different kinds of technologies and ways to do it on this channel so if you like that kind of thing please subscribe we also have a small and growing discord of people that make and play indie games so if you're into that kind of thing join us there we can hang out and talk there thank you so much for watching i'll catch you in the next video you

Channel: Drew Conley

Views: 76,247

Rating: 4.9721341 out of 5

Keywords: javascript game, steam, html, css, javascript, gamedev, presentation, danger crew, electron js, meetup, rpg, javascript rpg

Id: nHaiLWUaWWw

Length: 28min 22sec (1702 seconds)

Published: Sat Aug 29 2020