How to Create Video Games with JavaScript

Key Takeaways

[Music] all right we're all good thank you so much for coming and let's give a round of applause for sean thank you just so i can write down if you guys have any questions and i don't have an answer i want to be able to get back to you so um that could happen too and um i want this to be kind of informal if you have a question feel free to just interrupt me and shout it out or raise your hand or however you feel comfortable doing that and i'll see if i'm moving too fast or if i go past something you want to see how that worked um i'm willing to to go back and do it so hi i'm sean hornsby um this is an intro to web game development class class meetup talk presentation let's go there um who am i well i i've been talking to you guys and so a lot of you probably already know this i have only been doing this just under a year professionally um i went to a boot camp in orange county and got a job right after that working on uh developing a web app using the mirn stack so it's a express react and node and that's been fun it was a contract gig that sort of a startup that didn't get funding and we're still kind of trickling through there so i'm doing part-time work there um i am a hobbyist game developer that's that's who i am it's interesting in this context i also have uh four kids between the ages of three and seven so um i just that's just to let you know like you guys can do this i have a part-time job i have four kids and i'm still learning this stuff and and doing it and uh and i still have the brain power to do it which is actually pretty amazing i know if any of you have kids one or two or four you know what i mean it's pretty pretty nuts so we'll do a little overview of what to expect here the stuff we talked about this is the program interview we'll talk about why you would want to design games why you would want to spend time building games maybe time that you think if i'm a real developer this is this could be more productive learning redux or learning angular 4 or something else um so we'll cover that i chose inside the game development there's a there's a framework called phaser why did i choose phaser we'll talk about that and then how it all works and some of the uh accessories to that and at the end uh however much time we have left we'll do some q a so why should you spend time writing games or thinking about games well i think i laid it out here pretty well most of it is about fun it's fun to do these things it's fun to think about it i'm sure that we've all played games probably we all play games occasionally or more than occasionally we think about games when we're playing them and i could have done if this thing was different or i could design this game you know or i could have done something like that um that's that's a great piece of engagement you're engaged in writing your code uh if any of you have written like professional code working on business logic stuff it can get pretty taxing mentally it's not a lot of fun normally to think about like oh did i do this you know do these products filter into the right thing and get get treated and it's it's taxing but it's not always very exciting so um having some fun is a great way to keep from burning out too like it gives you even if you're just doing it occasionally it gives you some time to to de-stress and to think about writing code in a way that doesn't have to do with whatever your boss is telling you to do and and uh maybe six other people filtering down their demands too um and that the point i think on here that is is very important is that you're going to finish projects because they're fun to do and finishing projects is good for you emotionally mentally to have this finished thing it's also good for you professionally because it's something you can show other people um and you can and you will you will solve problems while you're writing games that other people will need to solve too and then you may end up blogging about it or speaking about it and people will start coming to you for answers in that way and that's that's a very rewarding thing also so when you're writing games in javascript there are probably three main ways you can go you can work from the ground up you can dig up the webgl specs or the for the canvas specs and you can write right there on the metal you can build your games it's it's doable it's maybe not as fun as it could be because there's a lot of grunt work there the other end of the spectrum is these fully built realized tool sets something like unity uh even game creator uh cocos 2d these are tool sets where you load them up they fire up they look like photoshop or some kind of program and you build your code you build your pieces in there you move your stuff around you do get to write some code but mostly there's a lot of overhead and learning the tool set and those are they're actually very powerful unity is an incredibly powerful tool set people build professional level games with those tool sets and that's a great thing but there is some ramp up if you just want to start writing and for me i like writing javascript so i want to write javascript i look for more of the framework in phaser is a framework so you end up it's it's easy to use you require it in or you actually stick it in as a script in your index uh file and then you can just start writing code you have a javascript file that you just start building in there's a ton of community support there's actually maybe too much community support at some point they decided they were going to hand it over to the community and so now there's the community edition and that's that's what i use uh it's the latest the documentation is a little messy but there's so much extra support around there that it doesn't matter that much you can find your way and then drill through the documentation kind of you learn what to look for and then you go look for in the docs there is on there on their site they have this all these tutorials about specific features of phaser that are great and there's even a couple of other sites that drill in even further and that's the uh so that the phaser ce the github is the library or the framework and then the docs are there too and these slides will be available later too so if you see something and you didn't get a chance to write it down or you don't feel like writing right now there's not a problem with that and i'm on slack so any questions i'll answer there too so now you've thought about why oh yeah sorry i think some of it is personal preference some of it is what you're trying to get out of it are you trying to write a unity if you were looking for a 3d like a wonderful 3d game even if it was like 3d isometric or something unity probably a better place to look than phaser phaser and where i've mainly focused is on two-dimensional games uh so you so if you're look it's really based on what you need out of it if you're looking to build something that you want to take to market and then maybe unity is a good place to start although phaser games are uh are are selling they're on native devices they're on the web so uh it comes down to your preference really you're gonna end up with a lot of the same results depending on how much work you put into it um i think some of those tool sets like unity do a lot of the heavy lifting but there is a learning curve to learning the tool so um i just chose phaser because it's quick it's easy to use i don't have to worry about like even learning how to use unity or teaching you how to use unity you can literally get phaser games going in like 10 minutes probably even less if you if you have any experience with uh front-end development at all so so that's any other questions about that so we got why would you build games and what would you use to build them now what are you going to build so if you're right now you're sitting there thinking i got a game idea it's going to be great it probably looks something like this it's this huge maybe it doesn't even feel that complicated but i guarantee you it is a complicated piece of machinery that you're thinking about building so i need you to scale it down i want you to think smaller now you're thinking smaller that's a lot smaller but a lot smaller that's still too complicated for your first game especially but for engine and just learning how to do this stuff there are too many moving parts and i'm not actually sure why that x-wing has two pilots and two astromech units um so that's a little weird too but this is still too complicated uh you need to think simple that i think is obviously a millennium falcon but it is also obviously very simple it's probably 12 pieces there that's great that's where you want to start on your first game your first project you're learning phaser you're going to learn how to build a game if you get in over your head it's gonna leave a bad taste in your mouth you're gonna you're gonna get halfway through something and you're gonna get bogged down and you're gonna throw it all away and say i don't even want to do this again this is this is dumb um i'm dumb forget it i'm going to go back to whatever something else writing business logic even that might be more fun so then the nice thing too i mean i think depending on how old you are the games that you played as a kid are probably way different than the games i played as a kid who had like an atari 2600 or yeah nobody so so you so so there is this what i like about it is there's this big library of games that are already built and when you talk about like atari games they're already simple maybe your first game was halo 2 um that's that's in the capital ship category you're not going to build even a clone or some version of halo 2. i grew up playing things like like pitfall and uh donkey kong and so those games are are reachable that's something you can do and i think if you look in that era of games you're going to find a lot of a lot of those already built that already have kind of they have the ui ux already to design players know how to how to do those things somebody thought about how to make that game accessible to people how what affordances are what what makes sense you don't have to worry about the game design you don't have to worry about any of that stuff you can just focus on writing the game that's already been designed and that's i think that's a great place to start i started with pong i feel like that it's a very simple game it's still literally some moving parts in there this is some stuff to do but it's it's simple enough to to get through and so let me break out of this now and i'll actually i'll actually fire up pong here there we go i should figure out what port i put that server on to 8002 all right so that's it this is pong and i'm on the left and the computer is slowly trying to catch up on the right um it means there's a lot running so it kind of bogs down a little bit this is pong and i think if you've ever seen pong it's a pretty good representation of it there are still choices you can make when you're designing this game uh so there we go we'll pause it we'll get back to the presentation a little bit but that's pong pong works um and and i'll show you how that was built um first though i'm going to cover a little bit of just the basics this is a basic phaser game right here this is all the code yes sir yeah i use uh vs code i've used adam as well i like them both i like vs code although this is probably an outdated opinion vs code has a built-in node debugger that i don't think atom does and at the time when i was using atom it didn't i like vs code has a built-in terminal also so i don't have to switch back and forth a lot i can just pop the terminal open um sublime is another popular choice it's it's not free but it is free i think they suggest you pay 80 bucks for it but you can use it forever without doing that um who is the webstorm is a great ide but it is it's an ide something like vs code or adam are our code editors they're lightweight they're they're very low feature simple to use if you if you're coming from something like like visual studio itself you might be more comfortable in like a webstorm has a lot of features but yeah i'd stick with vs code or adam so once you get your index set up and i'll i'll show you that too this is this is all that's required to start a phaser game you have const game equals new phaser game and then you have a width and a height for the window that you're going to build phaser auto just lets it select between if webgl if if webgl support is there it'll use webgl if not it'll drop down to canvas and then i use phaser as my div name that's where it inserts it into the into the web page if you don't um add anything there or on the web page it just pushes it into the body of the page which is okay at this level because there's not like a lot of other code going on my web page is literally just a head and then a script tag and then i just register a couple three functions preload create and update and those are the three i think you could probably get away with create an update but preload is important in its own right and then what happens when the game loads is it runs through the preload function once it runs to the create function once and then it starts hitting update every frame so about 60 times a second it runs through the entire uh update function and so let me show you the let me crack out of this and i'll show you the index file too because i don't think i included that in there this is what the html file looks like you guys all read that i hope because i don't know how to make it any bigger um it's this is the only two important parts well that's not true this is important this is where you require this is how you get phaser i use a content delivery network um i like that method and then there's the div that it's going to stick it in my phaser div and then i just have to tell it where my code is so that's how that works now that once you get past that like this guy right here this blank looking thing you have a couple things you have to think about how many of you like global variables variables in the global scope nobody that's the right answer but now we're now we're game developers so we need these semi-global variables they're they're actually pretty global they're going to be out there they're going to hold a lot of our fun of our stuff so that those separate functions can access them without having to pass back and forth all these all these objects so we're going to well i'll show you some globals we'll talk about that the preload and the create functions so this is um this is pong this is the top half of pong you can see the uh that con game in the top we just talked about all those let statements are my global variables um if if this was a year ago those would be var statements but this is es6 i i like to use i like to stay away from var whenever possible i don't know if that distinction means anything to anybody at this point but um so that's that's if you're used to seeing var anywhere you see var or let or const it's essentially the same thing um for the for the sake of this conversation so i'm going to do things with these so i just i just declare them out there and then you'll see i start using them in create but in preload what preload does is while the game is going and if you're going to reuse assets it loads those assets and holds onto them so i have and these games these audio files it's loading in and it's giving them a name this p hit one is the name i can refer to that later and it's going out to there and it's it's pulling this association in there um and once you've done that and in some games you might not have if you don't have sprites if you're just using like building graphics and moving things in fact you can get away with pong without preload if you don't i didn't hear any sound the sound might just might not be coming through um but if you don't have files to load then it doesn't matter the next part is that create section and that's just that's just the top portion of create but what i'm building there is the player and so i have a i've already got it out there but i'm assigning it some phaser stuff here so game is given to me up here it's the phaser game and game has a bunch of methods and calls and at the simple level when you're when you're doing things you're going to add something in my case i'm not using sprites which i'll show you sprites a little bit later but there's not like complex graphics i'm just going to build a paddle you saw the paddle it's a white rectangle so here's what i do i i tell it where i'm going to put it and these are so this is just the width and the height or the x and the y coordinates of the origin of that whatever i'm going to build next and i moved it 40 pixels in and then halfway up the screen minus i know i'm going to make it 60 pixels so i just cut it in half so it's starting right in the center of the screen on the left and then i'm going to do a little fill and that's a hex um uh color code that's just white and then the next the one there is the opacity level it's fully opaque i'm not doing any any alpha type stuff i'm going to draw a rectangle that starts at the origin i gave it and it's going to be 10 wide and 10 pixels wide and 60 pixels long or tall and then the other fun thing when you start working with phasers you have some physics models they actually give you three physics models um this is like like your question about which which uh framework or tool set to use this is kind of the same which physics model to use it depends on what you're trying to do i'm doing something very arcadey so i'm going to use their very simple lightweight arcade physics engine this is what they recommend to use if you're going to if you're going to throw it onto like a mobile app or something because it's not doing any heavy lifting uh super complex stuff but it gives you a lot of fun things you can do once i've enabled the physics that player has a body and it has things like this collide world bounds and it has you can you can start giving in velocity and acceleration and all that kind of stuff so that's a good question you can kind of test these well it's going to be in the browser but the problem is if you're developing this locally and you're just using it as a file system so if you go in here uh if i go in here and i say well i don't need why would i need a server to run this i'll show you why when we um if we just open i have to get in there all the way let me if i open index.html which doesn't apparently exist if i go one too far i did it's trying to load a file it's trying to load three files but i'm in the file system instead of http and so i get a lot of problems these aren't the problems i expected to get i expected to get a cross-origin problem because when the browser tries to play in the file system it gets very specific about what it can do it can't go get other files it's it's the browser is getting in the way here so that's why i run a lightweight note like express server to host it so i can go to localhost and i don't run into the crossovers and stuff um once you have that going somewhere though if you if i wasn't testing on the file system you wouldn't need a server at all you could stick it on on you were saying you were using ingenix you could stick it up there like a static asset and it would run just fine [Music] it should so i haven't actually done any like native or mobile testing at all but something like pong should definitely work the i don't know how complex you can get and like optimizing your code to make it run better on a mobile device is certainly its own its own like field of stuff um i would say that that's somewhere you could just start jump in and test it um if you have a workflow that includes you know deploying it to mobile somehow then i would go for it and and see what you can do for sure that's a great question though um and my answer is i don't know i test i just just work on the web right now and um so yeah so yeah this is uh this is the preload flow so this is the whole flow of loading an asset and using the asset just to show you how it works that's the preload function we saw it's loading in these three audio files and aliasing aliasing them to these um names and then in my create section i create some um i have these paddle hit one and paddle hit two and that's where i tag him in there say when when we have paddle hit one it's gonna be that audio and it's pre-loaded so it doesn't have to load it at that point it's just just making an association and then for pong what i have here is this is when it hit when the ball hits the top or the bottom of the screen it makes a certain noise and i have it i have wall hit and then it has because it's an audio a phaser audio it has that play method and it should play the sound and i think if this was all hooked up right you might actually hear the sound maybe i had my sound turned off we can i'll try it again but that's the flow like that's preload create and update one piece of code going through that whole the whole thing so those are actually i think update is probably the most important part of the of the program this is where everything happens it's where all your logic is going to live it's where everything is going to is going to do anything interesting everything else is just set up your preload is just building the assets and then your create is just saying okay put the player here or put this thing here get the ball moving here but once the game starts running if if you didn't have anything in update it would just run itself to exhaustion and nothing would happen so update is where all the fun begins here is a slice of update for pong itself um those top two are things that are given to me by the by the physics uh model called overlap and so when the first two things you pass into that are two separate objects or groups of objects in my case they're just objects i have a ball object and a player object and then the third thing is a callback or a function that will run when that happens and i'll talk about overlap a little bit more a little bit later but you can see so this when update is called every 60th of a second this runs just runs through and it says okay well is the ball body is the ball at the top of the screen or the bottom of the screen then do this ballbody.velocity.y times equals minus one just reflects the y velocity it just changes direction so it's going up now it's going down the ball also has an x velocity which isn't touched by that so you'll just get a pure reflection across that and then phaser also gives you these cursor keys that you can simply use it gives you four the four common cursor keys um and here i'm just checking if the cursor if the up cursor i know it's very confusing cursor's up is down if the up cursor is being held down or is being pressed down while this update is running then you're going to move the player body up i give them give them a velocity of negative 250 so it's in the y-axis negative is up and positive is down and the x-axis negative is negative to the left and positive to the right so yes yes yeah this is so update is a loop and i think that sometimes that throws people a little bit maybe especially people coming from outside of front end development there i don't know is there if you're if you're writing a game in like java or or c plus plus i think you do this thing where you create a fake loop and you say wow one so it just runs it's this infinite loop that runs um we don't have to do that in javascript because it's event based already there's already a loop going and we're just tacking into that this does feel kind of like a flipped version of front-end loop development like instead of adding an event listener and then and then calling it there that registers something on the event loop we're just we're writing the loop itself so we're checking everything in here um and this is i mean they're simple enough that i left them there but you could even abstract this out a little bit there are places where i'll show you some other abstraction i could just say if this is happening call a method somewhere else and it would do the same type of thing um but i just stuck it right in there so yeah this update is a loop this is your event loop and what you're doing is checking for everything that could happen in that event if i put if i put like this piece of code somewhere else outside of update yeah it wouldn't um unless you called it from update somehow it wouldn't uh so you could abstract the whole whole class of this you could abstract out and say run this thing where you check all the cursor keys yeah yeah you need to at some point you need to initiate that in update that's kind of like it's kind of like ad event listener is right here instead of instead of on the thing that you're doing you're adding an event listener here you're saying you're going to get events so look for them yeah so that's the that's the update loop and it can get obviously it can get pretty complicated update is where almost all of your code is going to live depending on how crazy your game is or what you're doing you know you're going to want to somehow modularize that or abstract it out a little bit so it's easier to read the update loop you might have your code somewhere else so that's what i did with with overlap actually my function reflect lives outside of the update loop it's written under the update loop it's still part of the game it's still part of the phaser object um but it's its own function so i have like i have preload create update and then somewhere else i have reflect and so that's where that's what that's calling here is it's saying oh there's a function called reflect let me go get that and reflect when you call overlap it actually passes in as the first two parameters the first two things that you gave it so a ball and a player a ball and a computer player and i chose to call that player an actor because it can be either way this it's doing the same thing in this case it's doing the same thing no matter who it hits so i didn't need to write one for the player one for the computer player although at the very bottom i started to check because i thought you might maybe i'd play a different sound when the computer player hits it or maybe i would do something differently keep track of something but this is what happens is and this is all just code so the paddle is 60 pixels wide and the scent i wanted to i wanted to make it a kind of dynamic paddle so if you hit it um you know on one of the top or the bottom closer to the edges it gives it more velocity more up and down velocity so you can kind of affect how fast the ball is moving and try and get it moving fast enough that the computer player can't keep up with it so this is an example of pulling that code out because you could in theory if you write any javascript instead of writing reflect in there i could have just written a function right there in the in the overlap parameter set i could have just stuck a function in there and it would have looked really horrible and hard to read but this would have all been in there this way i can actually abstract it out and then reuse it in either case but that's a that's a simple a simple version of that but i think before we get to this maybe are there any questions about the update loop or about how any of that works so far i'm going to show more examples and talk about some more code it's it's it it's really dependent on the game itself but it should be close to 60 frames a second and there are ways to frame lock and to do some other things like to check see how that's progressing if it gets i mean i think running this and running all this stuff i think it was having a little trouble just keeping up the game the browser itself my computer um but you can generally count on being 60 frames a second so yeah these are some of the the utilities mine at the top there is the phaser template that i use to start a phaser game it comes with um probably more stuff than you need to just get started but some stuff that i found helpful some gulp stuff and some browserify stuff and some testing stuff but um mainly what it comes with is that index file that's already set up to go and that blank phaser template and you just start writing code that way i have to keep doing it over and over again you can just get clone this as whatever you want and um and start going these are a couple of tools i use pixlr is an online image editor it's great it's really simple if you don't if you already have something like photoshop or for something installed you can use those i don't have those installed so whenever i need to like manipulate an image i just fire pixel.com and uh it'll pull images from a url or from the computer and and it's pretty robust although there are some things it's lacking uh piskel is an app that you can either i think you can run on the website but you can also install and it's a sprite creation tool so when you start doing animation you might want sprite animation it's a great free tool and bfxr is a weird name sound effects uh tool it's very simple to use and if you don't want to like have to worry about finding sound files or whatever it's it's cool you just kind of go in and say oh it has like explosion and it gives you a different kind of explosion and you can very easily save those files off and include them in your game just to give it a little bit more depth as you're unless you don't care if you don't care you don't need any of these you definitely don't need any of this up here to write phaser to program phaser games but i think they're nice so um this is a spot where we can talk about the tools that i use the tool chain if that's exciting to anybody we can i can show you some more code first or we can just talk about this are any of you are you guys familiar with any of these or any of these like weird familiar with it all right so express is um a server framework for node it just makes it a little bit easier to to get something flying um quickly and and i think i showed well i will show you now my um my express server for the game is very very simple it's 11 lines it's actually seven lines of real code um and all like i said all that does is get me off of the file system and get me to the local host so i can be on http and not have to run into cross origin stuff um and if you've ever worked with node or with express this might be familiar and if not it's pretty quick to explain express library you have to install with npm this is my you know my package it's my only dependency at this point because this is a different the other ones have more dependencies but um so you require express you require http um i'm actually sure yeah that's why because i use it to create server you can do this a little simpler but this is a still pretty simple make const app equals express that's the thing this express.static public is the only extraneous library code left in express these days express used to be very bulky it used to have all this stuff built in now if you want more things you have to you have to go out and get them but public or static is left and all that does is instead of having to write um endpoints or handlers for like when somebody comes to my website serve them this file serve them the index file static says look i have a folder somewhere in this case called public and in public you will find an index.html and anything else in public if index.html asks for it just give it to them so in the index.html you'll see i have this js bundle which is inside my public folder so when it hits the express server and it finds that path it just you don't have to write specific stuff for it you don't even have to understand how this express server works to use it um this is the only piece you'll probably want to know is what port it's on in this case it's 8002 because i'm running i have several games and i kept like i'd fire up node and it would say oh that port's in use and i think oh which what did i leave running so i started separating them so i can do that but you can put that on any port you want um and then when you go to the browser you just do localhost call in that port and that'll be the the server that's running there so that's the only piece of express code in there um yes yes yeah and it could be called anything you want public is a is kind of idiomatic it's the one that people use and in in i'll show you because as i was doing this i started evolving my process i actually started bundling um in a build folder instead of public so no i well it depends if you wanted them on the same webpage itself then you might you would have them in there somewhere for each project i have its own folder its own like top level folder yeah they all have their own yeah so like i'm in i'm in this pong folder uh you know in asteroids it's in an asteroids folder so they're each their own if you wanted to work on multiple games in just one server one index file you could you could certainly do it um i just separated them out to keep it easy to think about i guess so yeah that that was the express we also had so gulp is a is a build tool yes sir no so for if you're running as a server you would you would use either you have node or we were talking about too there's a there's a thing called nodemon which which is a kind of resilient node server so you just type node and then the the server name or the the file that express file's name i call them server.js by convention but so it would be node space server.js and that'll run that as its own little thing or nodemon or whatever node you'll need node on your computer you have to install it depending on what system you have i used brew i think to install in fact i use something called nvm which is the node version manager absolutely not necessary but pretty handy because if you start moving through versions i think node's on version 7 right now but some stuff still wants to live on version 6 so if you want to take advantage of like some cutting edge stuff you might want to work some things in note 7 you might go all the way back to like node 0.10 for whatever reason to work on something nvm is a great tool but yeah you'll you'll need to install node yeah it should run at the command line if it doesn't you'll need to get into your um like your whatever your terminal node yeah nodemon's a quick install npm uh install nodemon i install it globally so i can use it everywhere you can install it locally as well nodemon is a great tool uh so yeah so that's node express and that gets you out of the file system so that you can you can actually like play with this stuff locally and not have to be like oh i'm going to push this up and host it somewhere and then work on it and then so gulp is a tool a build tool that is used to i use it as a watcher mostly for my tests yes sir yeah i never learned grunt so that's why and then another question is why go up instead of webpack maybe webpack is the new the new thing um i think gulp is very simple i'll also in fact i'll show you my gulp file i have it i'll show you what i do with it because um i feel like asteroids is probably the newest one so my i all i use gold for to be honest with you is my running my tests and so this is a let me include this this is a gulp file um for for mocha tests and that's the only thing i use it for you there is a goal plug-in for browserify and i'll talk about why i use browserify in just a second too and that would probably be a smarter thing to do is get go up watching all of those and just doing it all the same time but i didn't i didn't like the setup on that plug-in so i just used something called watcherify which takes browserify and turns it into a watcher but this is gold so with golf you just define tasks and you will usually want a default task and your default task will run any other tasks you want to run whatever and the only real task i have is a moca task that pipes my code my specific test code through a through a mocha test runner and if you're not familiar with unit testing or don't care about unit testing it's not that important um i think that unit testing and test driven development is an incredibly great way to to develop because i think it prevents you from screwing stuff up too badly it helps you think about how you're going to build your code if you're using it as a test driven write your tests and as you're writing your tests you're actually building your logic you're building it that way instead of like getting really messy and building all your logic and then and then thinking about how to test it you're thinking like what do i want this one thing to do this one thing what's the one thing i want it to do okay now i'm going to write that code that does that and so this is just a simple way to get into tests i actually think this is another reason why you should write games because they're simple they're simple enough that you can write unit tests for them without worrying about like is this a unit is this like do i have time to do this if you're writing production code if you're coming into something maybe you're an existing code base and you might not have time to think about how to break that down into test driven stuff nobody may even want you to do it and so i do think it's important and i'm using games to teach me to be a better test-driven developer um but that's gulp in a nutshell and i can show you what that looks like um i'm gonna just run the mocha one because it will run but this is it i have some tests to do some things and the tests passed that's not exactly what i wanted to do so that's what happens when you run a mocha test it tells you did it work and so now what happens is if i go into that code and i change something and i save that file the test run again and it breaks i know right now man the last somewhere in the last 15 characters that i typed in there i broke my code it's not like a week from now or even an hour from now when i go fire up the browser and play the game and it's like why isn't when i turn left why is it turning right what did i do and then i have to go back and figure out what i screwed up this tells me right away that's one of the benefits of testing is it tells you immediately but that's gulp so browse verify in in node you have this concept up here you see the top this require is a node verb and it allows you to go get code from somewhere else and stick it in here like act like it actually exists even though it doesn't exist in this file it goes and gets it if you do this on browser facing code your browser will say i have no idea what require is i don't know what you're talking about and because i don't know what requires i have no idea what all these other files you're trying to use are although i don't think it'll get that far i think as soon as it hits require it'll just stop um there are lots of ways to modularize your code one of them involves just writing a bunch of script files script tags and saying well i know in the end i'm going to write my app.js but before that i have a module called math.js and another one called ship physics.js so you just start putting those in there that's okay that works but i think it's a lot easier to use browserify and i actually ended up writing it as a script so this is the piece of code right here and you install browserify either locally or globally again or both and then i'm telling it when the files in this first directory change output that bundle it up and output it into something i'm calling bundle.js and what that does is anytime it hits one of those requires it goes and finds that code and it sticks it in the bundle so there's no requires in my bundle there's just all my code and all that allows me to do is separate out things like you know i have my app and i also might have some utility files and the more the more code you can pull out of your app i think the easier it is to read your app because if your app file gets to be 15 000 lines long and you need to go dig in there and find something where do you go but if you know that it's in this like 100 line bundle somewhere well this 100 line file somewhere that specifically has to do with turning the ship right then you can easily step through your code dig through your code and i think it keeps you more organized i i like i think i mean a lot of people i've heard your function shouldn't be more than a screen long i don't think your files should be much longer than that if you can avoid it in some cases you can't they shouldn't they shouldn't get so long that you have to scroll forever to find stuff and so you can you can start you can start pulling your code out putting it into separate files and then requiring it back in so that it you can you can use it in a very clean and concise way and like i said none of these things are required to do phasor code these are just code practices yeah i mean it all depends on how you pull it in and like what you're building as your as your um um utility so in this case i wrote this as a you were talking about patterns earlier this is a revealing module pattern so i have some stuff inside and this is i'm sorry if this is confusing this is es6 fat arrow notation um so it might read a little different than you might be used to if you're using something like this might more easily be called like function rotation correction and then have a parent for your parameters and then your brackets but that's the same essentially the same thing but you'll see i have rotation correction and degrees to radians and get heading in radians but all i export is get heading in radians so that keeps that keeps everything else hidden they're like private members of the java c plus plus guys in here those are private methods and getting into radians is like the only the only piece that i exposed now i i haven't looked at the code all the way down i it's not being exposed you couldn't call if you require this module in you couldn't say like let's just say we call the module utility you could the only thing you could say is utility dot get heading in radian and you would pass it um you would pass it an angle basically if you said utilities dot degrees to radians they would just say i don't know what you're talking about i don't have this would say that function does not exist yeah that's a way to keep it clean i'm not sure to be honest with you i'm not sure as far as scope goes or what if if there's um any upsides or downsides to that but we're also game developing so scope is a little bit hazy at this point anyways there's a lot of stuff already you know gonna be in your scope but that i guess the nice thing too is you can you can choose you're kind of name spacing it in a way but i'm calling it heading in radians so it's stuck in that now the funny thing about that code there is i actually figured out i didn't need to do that at all i found another way to do it but so i don't think it's actually been recalled in that code anywhere or else i would show it to you but that's just the other reason to pull those out into files to export things is if you're doing unit tests you need to be able to require those tests in your unit test so so like right here i have to require it in i have to pull it in so that i can call it and if you just bundle all that code into the main app then it can get kind of tricky to pull out like what exports you want so one of the reasons i pull code out into smaller pieces is so i can test it in smaller pieces but once again if you're if testing isn't important to you or something you're comfortable with it's not important it's not it's not important to game development in and of itself this is just kind of an aside these are things that i think are great to learn and i think game doing it in a field of game development makes it a little easier and more just fun things i think this is what what i take away from writing game code is that you're going to make mistakes whenever you write code you're going to make mistakes big mistakes small mistakes i wrote just in the three or four games that i wrote in the last few weeks i made a ton of mistakes and then i would come back and refactor them out or find them later but the good thing is you learn if you don't learn from the mistake itself you might learn from having written code you didn't need to write like all of that that angle correction stuff i didn't need it turns out i didn't need to write it but i wrote it i learned how to do it and now i understand trigonometry a little better than i did before which was fun because i thought i understood it pretty well and i spent about 45 minutes thinking i knew what i was doing and it turns out it's been way too long since i had a trig class i think personal projects are a much better place to make mistakes than at work or or even for other people work um or in front of other people i think it's great if you can if you can learn from your mistakes in the privacy of your own ide um i think that makes just it's just a little easier and then you're not pissing off your boss or your clients or anybody else so it's a great outlet for making mistakes you can you can think like when you've done it i got my quota of mistakes for this week the more you write especially small projects there's going to be a lot of repetitive stuff that you're doing over and over again and so you're going to want to find this is something i think is important for every programmer is because i think generally programmers are very like immune to this pain they will do it over and over again they will type it out because it's worked it's always what they've done i think what you should do instead is find a way to not have to do that if you've done something twice figure out a way that the next time you won't have to do it you should never have to do it a third time that's why i made the phaser template because i was writing this code and i thought this is too much and then sometimes as it evolved i'd have to go back and think wait what did i do did i do that right or how did i do this now it's locked in somewhere and i can just bring that code down and start writing i don't have to think about the setup and the spool up and all this stuff that goes into like getting things ready that's done so that's great there are other things that you'll find that you might be doing a lot in your games you might be writing this maybe you're writing some similar games or maybe they're not even that similar but you're gonna find that there may be code that you write over and over again maybe it's subtle variations but code that you're using over and over again because it's a very base level piece of code man you should write that and you should bundle it up somewhere and you should put it somewhere that you can say i don't have to write that anymore i can if you want you can copy and paste it or i can just somehow require it in you can just pull it in it's now you're building your own library of functions and code and things that you're comfortable with i think that's great and that ties in with the last one where you're gonna see you're gonna know if you're writing games that only take a couple of days to go through and you're doing that three or four times a week or a month or whatever you're going to see those things are very frequent and are happening very often whereas if you're writing um when i was working on react this was in you know september the first two weeks of september last year is when i started this react project and i didn't have to start another react project until last month and it was like i had never done it before i had no idea what i was doing it was like wow i was looking at my startup why did i do things this way and do i need to do them this way and so that's when you have these long cycles it's hard to find those those things and encapsulate them and document them somehow you just think well i'm doing it and i'll do it and then the next time i'll remember but you won't you won't um and so if you're doing that a couple times a week or a few times a month you're gonna you're gonna get sick of it a lot quicker than if you're only doing it twice a year and you're going to figure out ways to make your code reusable i think that's a great that's a great thing those are important parts of being a programmer is reusable code and the more you do that especially as you start to think like well this works pretty much the same way but not exactly and then i'm using it a third time and it's slightly different you're going to figure out how to distill that that essential function down into a smaller piece of code that is extensible in some way um and that this is where i'm going to say like raw raw functional programming is is great if you can do that and you can start to compose your software you're going to find it's going to be a lot easier to do that stuff distill it down into small pieces that you can chain together and then when you need to chain it together in a different way you just take this piece out and put this other piece in and it works just how you want it to you don't have to reinvent the wheel every time you do it so um i think those are the those are the big things this is my inspirational quote the critical ingredient is getting off your butt and doing something it's as simple as that i don't know how many of you know who nolan bushnell is he is the co-founder of chuck e cheese he also started atari and wrote pong the first time so that's why it's up here but he did ko found chucky cheese um i think it's a great quote that's that's the truth do it and by doing it you're gonna learn to do it better or you're gonna learn you don't like to do it you'll move on to something else but if you just think about it i think we all do this i know i do this i think about wanting to do it wanting to learn something wanting to build something but i talk about thinking about it instead of doing it and then it doesn't get done let's do it um yeah so that's it this is me these are ways you can touch with me uh you can like go through my github if you want to see some examples of interesting code or not interesting code the phaser templates on there and that's my email address so yeah any questions or anything i didn't cover that you hoped i would cover we can look at more code running examples i don't know what time we're at skip uh [Music]