Building a game from scratch! Ep 1 [Streamed]

[Music] [Music] [Music] you hey there we go but I should check my audio before before I do anything turns out it was off how's everybody doing hey hey okay so let me know if I do is weird I'm gonna be starting a brand new game project I was working on stream on something called space bump but I realized as I was working on that that I was pulling from a big library of code that we have that we have built up over a long time and so if somebody else wanted to follow along with what I was making they might have a hard time because of course they don't have a library of like 500 scripts laying around that they can just use so if that'll probably be more helpful for everybody watching if I started a brand new game project from scratch with nothing in it and then we can kind of work on this stuff together so we can see so that you guys can see how everything is built and then also I'm making the code available in a github repository so so that anybody who wants to can just pull the code down and and play around with it you can even use it in your own projects or whatever I don't care the only purpose of this is just just for teaching and showing how things work so so we're going to go ahead and and get started with this and try on some more chill music though there we go there we go okay so we are in a blank GameMaker project this is just called stream game and this is a programming GML game maker project not a drag-and-drop project so all we have in here is just a room and that's it and that's what's there at the default you can see if this little little guy here it's the first thing I'm going to do is just double check and the main options that my game is at 60 frames per second everything looks good platform settings we're gonna set this to version zero point zero point one because we're in alpha and we're gonna call this a stream game for now okay this is by Seth called stream game description stream game obviously 2019 here okay and then we're also gonna go to the graphics and just double check that things are looking the way we want which is we want to check this interpolate colors between pixels because if we don't do that then think we kind of crunchy in 3d games this would be referred to as anti-aliasing you may have seen that in graphics settings options it basically like rounds colors between pixels okay sure we can display the cursor for now let's just do a borderless window actually not let's see I was good okay and the texture page size will go big because we're gonna make this game in HD maybe I don't know okay that's all we need to do for now just a couple of little maintenance things so what I'd like to do for today there's gonna be a couple our stream so what I'd like to do is basically get some initial rooms set up and get the general project structure built and then try to get some kind of like character in the in the world walking around so I might move a little bit fast at some times but this will all be available on YouTube later so you can always just slow things down or pause there or go back and you can always ask questions in the chat as well so first thing we're gonna do pop open room 0 we don't need this background here so I'm just gonna turn that off we're gonna rename room 0 RM underscore in it this is gonna be our initializer room where we we start the game here and then we initialize everything we need to do and then we move into the into the rest of the game project alright so let's go to our room settings down here so this room is tiny 1024 by 768 I was like to just make my rooms 10,000 by 10,000 I had never actually used the room editor for anything I just used my rooms as a place to drop an object and then I make the object do stuff with code so I won't really come back to this pretty much ever it needs to be setup at least once okay we're going to enable viewports clear the viewport background viewport 0 is visible so we have the ability to see stuff and for now I'm just gonna force the viewport to be 1920 by 1080 which is HD later on we are going to probably write a script that that dynamically changes the resolution of stuff and as we go but at the beginning we can just hard code that because you know who cares alright I'm not doing anything else okay so we've got our look at our camera setup that's all good alright now we're gonna make an initializer object though I'm sporting it a lot of people use the obj underscore I don't know why it's longer I just use i underscore you know in the create event of our initializer we're not gonna really do anything right now except bloom go to and we're gonna go to our main menu room which doesn't exist yet so we will duplicate this duplicate our room in it and we'll call it room main menu now it's important to the main menu because without a main menu it's not a game so always remember that it will make a underscore main menu and we will also just go ahead and make make a gameplay controller and we'll make a gameplay room we're just kind of just kind of building out the structure here of the game so so at base all of our games just have a main menu in a gameplay room and that's really all you need to kind of get things up and running alright then our initializer room we will go back to our resources we're gonna take our initialize our object drop it in there kill that made many room maybe the object drop that and gameplay room gameplay controller drop that in there okay now if everything works according to plan we will never have to go into the room editor again so we did it all right so our initialize our object it's gonna just take us to the main menu room a lot of times people like to use room go to next or go to previous I'd never use these because these are based on the order of your rooms in the project so if you ever need to reorder things for just organization you'll end up in a scenario where these functions actually take you to a different place so I just act like those functions don't even exist so we're gonna go from the initializer room to the main menu room and the main menu object is not gonna have anything going on yet so we can we can start with this alright so first we are going to want to draw some text on the main menu to say you know the title of our game so first thing we would do is we can just run this draw text ext transformed color the question is where are we gonna draw this so this is on the this is in the GUI event and so the camera has nothing to do do we start with the main menu not necessarily but I feel like it's good to have one you know cuz you know it feels like a complete game even if it's garbage alright so the first thing we're gonna do here is we need to draw some text but we're also missing a font so let's let's create a font here I'm gonna go and use a font that most people probably have on their machines so that we don't have to worry too much about they're not people not being able to pull this down let's go with 48 and we'll call this event e next is grave digger I mean this is this is HD right so title for the game for now is gonna be stream game okay so normally what you would do here is you would say draw set font FM t header and if you draw your text using this draw text ext blah blah blah first off we need to figure out where to draw it this is on the GUI layer which means that basically top left corner of the screen is always zero and the right side is always going to be the size of the display so 1920 in this case so we'll just do that there's display get GUI width and display get to GUI height and we're gonna draw this halfway across the interface and we'll just we'll actually draw this down from the top so we'll say maybe draw it to 200 pixels down or something so we don't worry about this texts Wydra we're gonna call this yeah we're gonna call this stream game and now we have all this step we don't need to XD we just need yeah alright scale 1 1 0 we're gonna draw this using some flashy colors the brightest color of them all white okay yeah now we can go ahead and just run this and kind of see see what happens f5 isn't a shortcut to a bit of the game so you gonna notice here this text is drawing in the middle but it's left justified so here's something you'll often see is we need to align our text vertically and horizontally so you oftentimes see people doing this kind of thing where anytime they need to put text on the screen they're going to call these three functions so we're gonna make our first convenience function here and we're gonna make a text drawing thing and we're gonna say font set please put them in here because I don't have to it I don't have to read redo these three function calls every time I make some text right so Fox and then we're gonna have eight align and align all right commit zero or just you try it makes a little more readable and vertical alignments okay so now we can take these three functions and bake them down to one line of code so we'll say font set that that that okay later on since we're always setting our fonts using this font set function later on we can add some features to that script which includes things like setting a global font spacing stuff like that okay so that's first thing let's rerun that make sure that's doing good a stream game and then we also we're gonna want this text to kind of wildly whip around the screen to create a sense of excitement and enthusiasm so sine waves are great for this so I'm gonna go ahead and use some seconds equals so get timer is just how many micro seconds have passed since the game was launched and a microsecond is a millionth of a second so if I want how many seconds the game has been running then I'll just do this and then I can go ahead and and update the position of text extra and why draw by adding some sine waves to them so so for starters I could just do you know sine game seconds maybe like times five so sine sine function generates a number between negative one and one and it's a nice it's a nice wave like this and so if we want that wave to move faster then we multiply the time inside and if we want the wave to be bigger than we multiply the whole thing outside of the function so I can just go why draw so I'm gonna do this wrong on purpose and then and then I'll just kind of show you how it had a tweak it so what this is gonna do is can apply a sine wave to both of these but they're gonna be totally synchronized so that's gonna mean it's not gonna right so they're both moving in the same way x and y are moving the same so that's not really what we want so instead we can do something simple like just pick a random number that is some other amount and then multiply one axis by that amount and another axis by the other amount so now we have two separate timers running and that's gonna give us different outcomes oh my god and then we can go ahead and also do that to the rotation text rotation so we can rotate it by ten degrees we'll just pick pick another another amount since the text is really long then rotation is gonna like it's gonna you're gonna really feel it so even ten degrees is probably gonna be funny I need to actually use this rotation though angle we got ourselves a game so this is only ten degrees but you know that's it's a lot and if we really want to sort of beef it up we can we could even just go ahead and you know multiply the the base timer by some other number and that that then cascades out across so now we've got you know we got this which I feel like you know really conveys a certain something about about what's coming maybe will slow that down a little bit okay so we have our stream game and then if we want to we could maybe even like do this again and do something real dumb like okay for ground alright so game seconds plus equals one and so we'll we'll add one to the timer and then recalculate everything and drive a thing again I'm basically just messing around right now just to see if I can do something fun with the title what that's all too much so we're just off set the game seconds a little bit no that's not enough now okay now we've got some kind of a weird thing here and I want to make some good others so let's get any xscape going and we're also gonna want to draw a background color probably so we'll do that in the draw event all of our buttons we put on the main menu will be in the drug GUI event so those will those will be drawing on top of the draw event so the drawing will be in the in the back alright let's open up Inkscape let's figure out let's figure out some colors here mm-hmm so we could probably make a color palette that we can then just use throughout the game for the most part and then we can adjust that color palette over time so this is way too blue we're gonna want something a little more calm okay that's a pretty nice blue anything that's zero zero something else never never do that in your game so never you know never do these colors and especially never put them next to each other I mean look at this this is this is terrible so let's let's get some some nice colors in here and then we can take the RGB values of these and then initialize them maybe we've got kind of like a nice light green we've got so the idea here is we'll establish some kind of a baseline color palette and then we can use that throughout our our interface elements and stuff some kind of red so still pretty bright but not quite as blinding as what we had I'm gonna slap this over here and we are going to go to the RGB x' this is where our initializer comes in so we can probably just make these out as macros so let's go see we'll call it soft blue make color RGB 32 105 255 and we'll say soft yellow it soft red and soft so this is this is using the convention that game maker has where that for with colors they'll say like C aqua or whatever so this way whenever I'm pulling up colors then my color macros will also be included alongside all these constants here so I have a this soft yellow 255 200 soft red is 255 and if these turn out to be too bright then we can we can always adjust these macros but by keeping them in one place initialized here then it's really easy to adjust the UI color palette of the whole game later soft green is 167 255 0 okay so now for this menu we can take our so now we've got that done with that you can maybe do this yellow here and maybe soft new in the back be cool to see the movement code in space bub yeah we might have something something similar alright so we have this what some would call a dope-ass title and they'd be right and let's go ahead and make a background just so that it's not pure black back there now we'll just do that by drawing a rectangle so this is going to be this is using the draw event and they says this is just gonna be drawing a full-screen color so I'm gonna actually make a script to do this because there's something we'll probably wanted to you a lot of so draw full screen camera get view X you'll see why I'm gonna turn this into a function actually let's do some let's get some camera functions in here too because if any time I wanna get to the left side of the screen I have to do this this is gonna get real bothersome it used to be the case that there were simple variables called a view X of U and V Y view get time or the values of a girl forever they do but that's okay how would you generate a black outline you would need to use a shader for a black outline but I'm pretty inexperienced with shaders so I'm not gonna I'm not gonna dip my toe into that go truffle screen color leave xvu there and we'll just be why make some more of these be right okay so you notice that any time I see something happen where I think wow this is gonna be annoying if I have to do this a lot later that's an opportunity to create some kind of convenience function so now we have view X view of you right the Y view you bottom and then let's also do you Center X which is actually so it's halfway across the width you Center Y which is halfway down so now we've got a bunch of functions that we can more easily use to manage views and cameras and stuff and we're gonna drop make this draw full-screen color script where we just go to color okay so now we're gonna say draw a rectangle color what does give ourselves a little bit of leeway here okay so this should just now we know a single function to just cover the whole scream of the color and let's also give it an alpha civics welcome so when you when you run draw set alpha than any rectangular shapes that you draw using gimmick a straw functions will automatically take that alpha we can also make these optional arguments by doing this all right so we've done here as we've said if we use these little brackets instead of saying argument 0 like that then it turns our arguments into an array and we can now iterate over that array and we can have optional arguments and stuff like that so so now we can sort of overload this function so by default if all we did was say you know draw fullscreen color black or something then that would just cover the screen in black and it's done but if I wanted to now make it more transparent I could add an alpha argument and if I wanted to make it you know transition then I can do that as well so so now we have our draw full-screen color function the main menu with a drop fullscreen color and let's make a it's also make a convenience macro here I think you can do this we'll find out Fiji color equals actually we can do this in the initializer I don't know if you can actually use macros this way I've never tried it so somebody let me know if you can't otherwise I'll just make it into a function which is also fine RGB all right so we want this to be kind of like a nice deep and a purple or something so we need some red says 50 not really the green and maybe a little more blue there's like that see if we get a compiler from that macro thing note that worked maybe a little darker and we could even give it darken it towards the bottom civics things are going pretty good this morning okay so we're just working on this main menu feeling pretty good about this so I'm gonna commit this and this is going let's see setup main menu and so this means I have a link to the github I'll put that in the YouTube video as well but also on if you scroll down on the twitch page there is a link to the git repository you can download this project as as a zip or you can pull it down using git so all this stuff that I've done you can just have it you can just take it and do whatever you want with it okay so we have our main menu next up we need to be able to go to the the gameplay screen so we're gonna need to create some kind of a like a button management system but I'd kind of like to just get into the gameplay for now so I'm just going to draw some text to the screen that says you know like press space to start or something and we'll just do it that way but rig which is gonna be our it's gonna be our regular file area let's see what we want what do we want bound shrift I don't know if this is a normally available thought but we'll see mmm so this is gonna be just our regular text that we draw 36 might be kind of big but we'll find out so on the main menu draw GUI I'm gonna do this again font set header I'm also gonna make a convenience function out of this so just that draw text transformed color requires an X scale and a y scale and it also requires four color arguments this is pretty annoying because most of the time you're not gonna want to squish your text on one axis but not the other and most of the time you're gonna want it drawn as one color so I usually make a simple function just called draw text which does this and we're gonna do this with optional arguments extra-wide raw we need string scale rotation color and alpha so what we're gonna do is we're going to front-load this function with stuff that we generally need all the time which is gonna be scale color etc and usually text is drawn at an alpha of 1 and non rotated so we can leave those arguments for last that way we don't have to worry so much about including them all the time so rotation to zero and alpha is 1 if we have more than 6 arguments than the Alpha the argument 6 okay so now we can also turn this into helper functions here that XY string scale and color and then we I always put little square brackets for optional arguments as well as what their defaults are so that I have a good reference so now I know here that in my helper texts I know that I need to provide these first five arguments and then I can override these last two defended to the extra-wide raw string scale scale rotation alpha color color color color any particular reason why I changed the default font colors yes yeah they're they're actually game makers studio 2 has a huge diversity of what is available for color coding so like it can tell the difference between different types of variables and like resources versus functions etc etc but the default color scheme doesn't actually differentiate between those things let's get some more chill music on here yeah so their default color scheme doesn't doesn't differentiate between many things when it could so I just overrode it just to make it more more obvious what's happening ok so now we have our draw text function and now we have this super long thing and I'm gonna redo this just so you can kind of see scale 1 color it's that top of one so now we've got this instead of all of this and you also notice that we are duplicating this title here so I'm going to neutralize that in a variable game title that's we don't have to redo it so now we just change it here in the create event okay now we are going to right in the middle of the screen drop text you may also notice I've got this display get GUI width times point five this is just like my camera stuff so I'm gonna go ahead and make some some convenience functions for that as well gooey center X right so Meaghan is the functions because I'm probably going to maybe do some stuff with this later and GUI left and top is always zero so that's oh they updated the text colors recently nice that's good okay so what are we drawn here we're gonna draw some helper text it says like hey I put spacebar to do stuff so you Center X we'll say yeah let's do this so this is mostly just for or my own personal saving myself some typing for now GUI GUI with instead of display gets goobie width will draw this 2/3 of the way down the screen we're gonna press space to tango will draws the scale of 1 this is going to be like this white it's definitely possible to overdo it with wacky colors ooh I step my colors soft yellow and we also should go ahead and make this pulse a little bit so our scale our helper text scale is going to be let's see points 9 timer we're gonna do a sign of this so this is just the same thing that we did up here just a little bit sloppier and what this means is it's starting at a base scale point 9 and since sign goes up to 1 and down to negative 1 then this is gonna take us up to 100% and then down to 80% so it's gonna kind of it's going to kind of zoom in and out press space to tango okay and just to kind of make this more in line with what's happening on the title we should probably make this go a lot faster hmm are these scripts we having to be sketch back some of these things are not scripts in the Beast gaucho pack they come from from other functions yes I feel like this conveys the idea this is what we want people to feel generally overwhelmed and anxious is a good it's a good starting place for getting somebody into your game okay now in a step event of the main menu we will listen for the spacebar so if you press b ches i think stands for virtual key which is just like the key code for the spacebar button we're going to go to the gameplay room let's see if this works all right we're in we're playing the game now did I decide where this game will be no I'm gonna start with just having a character running around in sort of a top-down view sort of sort of crash-lands perspective I know we'll just kind of go from there I think it's kind of a nice mix like that style of game is a nice mix between not having too too many physics issues to worry about it's like if you're making a platformer where it's all physics and that's very tedious to program and not very interesting to watch programming of and something like space bump that I was working on or something more like a strategy game or a really heavy number space RPG is also just a lot of like stats management and stuff so ideally we've got something kind of in the middle almost like a almost like a contra post rampage kind of a game where it's got a lot of action that's then supplemented by via various stats and loops and stuff so we'll kind of just feel it out and I'm like I'm happy to take suggestions from the from the chat as well about what kinds of stuff you guys want to see in the game okay so we can now press space to get in there so I'm gonna go ahead and commit this ad he'll protects to the main menu and you can press space for the gameplay all right so we now have our game play controller I'm gonna make a game play folder and the objects and the first thing we're gonna do is we're gonna make a an object called world element and this is gonna be the parent object of every single thing that exists in the game world because it's good it's generally gonna be the case that there's gonna be a lot of of shared variables and attributes like maybe everything is gonna have a width or height maybe everything's going to have a variable to determine whether we should draw a shadow or something like that so we're just gonna bring everything under one umbrella and we're gonna have this world element and we're gonna also have let's see we call it world background so this background is gonna just do our fullscreen color and once again I'm going to open up Inkscape and we're going to come up with some kind of a baseline sort of like terrain color we're gonna we're gonna do this with a gradient because it's always better alpha up so we're gonna just decide as we're walking around the world before we put any tiles or anything else in we we want there to be something like some kind of color so let's just figure out what that's gonna be we want to be lighter toward the camera it's 55 to 55 so kind of go here but it's a little too green so we can pull the saturation down a little bit so what does do something like this for now this will be coach grass okay let's see so we're gonna draw this at 76 113 for now the one bottom color is 108 146 11 okay and in our gameplay controller we are now going to spawn the world background now game maker has either instance create depth or instance create layer I'm gonna do this great depth for the top-down game you actually move the dumps of things a lot and so layers don't work quite as well for that so we're going to make this at 0 0 little background it's 0 so with the way that I do a lot of my code I actually rarely care but what depth things spawn at and all that so this is gonna also be one of those things where I have to type a bunch of extra stuff for no reason for my most common case so we're gonna make another convenience functions function instances instance create subject ID and we're going to then allow you to optionally say where it spawns and we honestly don't care what the depth is let the object figure that out on itself equals zero same thing spot it here spot it there passing the object there we go so now we have a much more convenient function so instead of the above we'll just say they're much better so that's all we're gonna do in our gameplay controller and let's just verify that this is doing what we want okay we've got our green world all right next step we'll make a player character the parent of the player is going to be the world elements object just so that we have those shared variables and a world element we're going to initialize with just some arbitrary numbers here but we want everything in the world have a width and a height and and we have to decide whether things will draw a shadow which we'll deal with in a little bit all right now we don't have any visuals for the player so I'm gonna make some using just gonna make some really simple placeholder art for this so we'll start with sorry now we're at 70 by 70 which maybe is good I don't know we'll just make one and see so we're just gonna make a white player character with a black outline and some eyeballs okay and the most important thing about about any characters in your game anything with eyes has to blink that's the rule otherwise it's fish I don't know so we're gonna make a second sprite with eyes closed and we'll we'll deal with that as the time comes player this alright so we know that this sprite is 70 by 70 so we're going to set the players width and height to that we could probably come up with better ways to automate this once we get a better sense of how all this comes together okay so this player we're also going to give everything a Z and a Z speed so when you're making a top-down game we're kind of looking at things down at an angle you're actually kind of simulating 3d because you have this this flat plane that everything is walking on and then things kind of bounce along on top of that plane and so we're gonna create this z axis which is things coming up off the ground and that's mostly just used for drawing so that we can make things look like they're flying around and shadows are super important for creating that effect so so we should be able to to hit that during the stream all right so this player has a width and a height of 70 and then we're also going to need to of course everything this game's gonna be blinking right so we're going to make some blinking functions blinking sprites need have an odd number of pixels in their widths and Heights yes so that kind of depends on what you're doing so in this case the sprite is 70 by 70 and the origin is is at 35 all right so the way that this ends up working is that there is no middle pixel right so so the middle of the sprite doesn't go between pixels it goes on to a pixel so if it's 70 pixels across then whichever pixel you choose you're gonna end up with it being offset and you'll notice that if you have something that's spinning you'll see that it kind of looks like it's wobbling by one pixel as it spins and so in this case we don't really care that much about this because your character isn't a wheel and it's big enough that it wouldn't even X flip it it's not really gonna matter that much and it's blinking all right so in this we're just gonna say blinking is zero actually students guys so if blinking is zero and then we have script called blink hey I know you might be looking at this and thinking I thought we were making a game all we done so far is make a made menu and now we're having a character that blinks but I say if your character doesn't blinks doesn't blink then nobody's gonna play your game anyway so it doesn't matter what mechanics you have it's create a player and we're just going to make the player ads center of the view and we'll figure that out as we go the other thing here is this world background you just have a depth little further back okay and then in the is blinking so we're gonna do with this blink variable is this is gonna start at zero and we're gonna say if blink blink is less than or equal to zero we're going to put a random chance per friend maybe like that we'll just put some numbers in and just see how it works so if your not blinking then we're gonna go ahead and just every frame give you a random chance to blink plus equals so I'm using room speed for now we're gonna actually update this and get some Delta time in here but for now please do this so now we start incrementing it so if blinking is is greater than zero then we keep incrementing this timer and maybe it's greater than one then we set it and the way we interpret this so we have this script called is blinking where we basically ask a question about this blinking variable where we say uh greater than zero and it's less than 0.15 so this means for the first point one five seconds after a blink begins then we'll say yep we're blinking and then the rest of that duration is just a cool down before it resets so splick all right it's blinking and then in the step event we'll just say blink we're doing the draw bent that's also fine since doesn't particularly matter and then we will say drop sprite ext draw myself and the image is I'm gonna draw is he's blinking XY scale scale we'll worry about the rest of these arguments later so what we should have now the character the blinks thank game of the year next step let's get some shadows in here so we can actually see where this character is standing okay let me push this up okay so let's make a shadow sprites so shadow is really just you know the circle on the ground but since we're looking at an angle it's gonna be squished into or if or of an oval shape no I'll just do that that's pretty good good shadow and then we'll just clip that boom auto trim so now we've got our shadow now I could just draw the shadow in the draw vent of the player maybe at a lower alpha actually the trailer voice is my brother but we have a similar voice so you know it makes sense okay so I'm drawing this shadow by this guy you can't see it it's back there but you can't see it he's just covering it I believe find game maker projects work with git yeah I mean it's tough because most things you do in game maker affect multiple files at once and if you're not familiar with the the file structure of how the project is built it can definitely be a bit of an issue but so far hasn't been too bad we've been doing a lot more team collaboration with stuff and it's been fun I think any any code base that you that you work with source control you're gonna have a lot of conflicts and stuff as as the team gets bigger so it's just one of those things okay so for starters it's gonna sound weird here's what we're gonna do so you'll notice that this character has an origin at the center which means whenever we say draw the character like at position zero then it's centered here and this is so that when we rotate the character and then it rotates around its center and not around some weird position but in the game world we actually want to build everything around the character's feet and so instead of drawing the character at its exact x and y position we're going to draw it up a little bit we're gonna draw it up by half of its height so instead of drawing it at Y we'll draw it Y - height was point five okay and this will also pull the character up over the shadow and then you'll see the shadow actually represents the location where the character truly is so the shadow is the character's position in the world and the character is just a visual representation drawn kind of on top okay so we have that let's get some basic movement code in here so we can kind of see how that works so we're gonna do some WASD controls so I'm gonna do something a loop that might seem a little bit strange but you'll see as we go why this is useful so when I make an array which has d 4 right W 4 up a 4 left and s 4 down so 0 1 2 3 correspond with 90-degree increments so 0 is 90 times 0 that's 0 degrees which is to the right one is 90 times 1 which is going to be 90 degrees which is up 2 is 90 times 2 180 left 3 is 90 times 3 which is 270 which is down so we're gonna just use the numbers in our step event and interpret movement okay we're going to initialize some variables that's every step we can interpret and modify based on moving so M X is gonna be a shorthand for brought whoops a movement input X I got to try to break some variable naming habits so that when people pull this repo down they can make sense of it so if we're gonna put X it's going to be zero movement input Y is also gonna be zero okay and keyboard and puts I so if we're holding this keyboard key that we've stored in this erase lock then we can go and figure out okay well what direction are we trying to move here and then we'll just say movements and put X plus equals length there X best function in game maker is the length derp like t-rex we're going to just go 1 and direction is just the same thing with y so this is going to modify our X&Y inputs okay final movements or else you say if abs input X or so if if the net result of this is that at least one of these is not equal to zero then we've we've passed in some movement inputs so at that point we can move the player let's initialize how fast with the player to move move speed base equals let's go with for 400 I don't know that seems fine okay so we're gonna be moving around we've got our movement inputs so first let's get our direction here there's one thing that what this will end up with is if we don't so now we have to kind of normalize this so we'll see Ike what direction was the some toiler movement inputs then we'll move in our normal speed in that direction so we'll say because our direction to zero movement input X an input Y and now what we have to do is just move in that direction at that speed history movement equals new street bass nerves loose be face times room speed so probably one of the next things gonna do this fix this room speed thing so this is frame dependent what's that got a sneeze coming I could feel it alright so we're gonna move let's update this pixels alright so in theory as we input our keyboard inputs this is going to grab all of our inputs convert them into a direction and we'll just move in that direction you notice that we this this does also solve that problem of in a lot of games if you just like add the X moon and the wide movement together then you'll end up with the character moving diagonal faster then then how they move in other directions so we don't have this problem here because we're grabbing the direction first and then we're moving using length to X so it's very smooth also this problem of hey I'm not looking left and right when I move around and I'm also this characters kind of boring it's just sliding which is no good so we will fix those problems so every world element should have an x scale also I never I never changed the image X scale and image Y scale unless I have good reason because that also changes the shape of the collision mask so instead I'll tend to make my own so just say X scale X goes 1 and now we just say input X is greater than 0 X scale is 1 and X is less than 0 X scale is negative 1 I'll turn it away to do this is to say the movement input X is not 0 then xscale is signed so this is a cleaner way to do this so the sign is just positive or negative plus one minus one so now we just say hey if we're moving left our X scale is negative one coming right Mexico is positive one and then in the drive into the player our X scale is just going to be X scale so now it should be as we press left right walk round so we're all good so you notice that as we walk up the character doesn't look away from the camera that's fine nobody cares about that if you play our game crash-lands you'll notice that none of the characters ever look away they only ever look down right or down left and as long as their movement kind of generally matches that people are more focused on the left right flipping so so this is totally fine I'm gonna push this their character can now be steered with WASD gives have any questions about what's happening so far I'm not blazing too fast okay so before we go do I think sprites should link to prove the game yeah yeah any small thing you can do to make things feel more alive in your game you absolutely have to do it if you have if you have completely static anything I mean yes how like I spent the first 20 minutes making my main menu scream wave around and do stuff you just want things to feel good you know things should feel alive and not feel static and so everything that you can do to do that you should so probably by the end of the stream I also hope to have the player bouncing around and squishing because what I want to show is that even with bad arts like this little cube guy you can still make a game that feels really good to interact with and that's kind of half the battle there look it's not what I need a group here we go time it's time functions and it's time do I ever critique other indie devs games yeah sure I do that sometimes a lot of times that would when people had their games over for critique they really just they once affirmation so it doesn't always pan out because whenever I had something to somebody the only thing I want to know is what what needs to be improved about it just because of the fact that if somebody only gives me positive comments sure it feels good but now I have no action items like I can't do anything with that other than welcome and feel good right so we're gonna make some time variables so we're gonna say game speed is zero actually we'll just do this so in all of our games we have this variable called SPD which is a global game speed controller so we should be able to change this variable and everything in the game will respond to this I'll show how to do that yeah I think the other issue with what people looking for feedback is is if you hand somebody your game and asked for feedback you have to be pretty specific about what kind of feedback you want because of course if your game is nearly done and you handed somebody and they're like honestly this whole concept I just don't like then like well what are you gonna do are you gonna do with that you know you can't just redo the entire game so it actually goes on both sides of the feedback where you need to be very specific about the kinds of things that you're looking to improve or change and then get feedback about those specific things okay seconds since update so I'm gonna basically put together some time based functions into a cat second sets update slo-mo seconds it's a time time update so every frame we're gonna update our time variables okay so seconds since update and Sonoma seconds it's gonna be this so Delta time is the number of microseconds have passed since the most recent frame so we're gonna take Delta time divided by a million that's how many seconds have passed just last frame there we go okay got here yeah yeah there's actually a book called thanks for the feedback which is about all of this which is people are both bad at asking for feedback and bad at giving feedback so it's kind of a tough it's a tough line to walk alright so as all the seconds is speed times seconds its update so this means that if we ever change this speed variable let's say it's like 0.1 then our second since update will just automatically be be throttled down okay so we have time update and the time update function needs to be called always so for example in our main menu object we can now bring this in and we can say there begins step the main menu will update at the time into the draw events or draw GUI instead of this whole like get timer good luck I guess yeah let's do let's build this in as well save time okay ed time update I don't know about you guys but I rarely think about things in millionths of the second so being able to just get stuff in terms of seconds as much nicer oh look at that game seconds game seconds okay and then in our game play object we are going to begin step we're also going to do update and now we're control shift F look for room speed anywhere we use room speed we need to not do that she never said move speed base times slow-mo seconds which is now we can use slow-motion so so we could we could have used you know seconds sits update but that's a static value that's just based on the frames and we don't want that because we obviously you always want to open up the option for bullet time then blink presumably blinking should also use let's see yeah - over room speed yeah okay so just for safety let's check and see this is all working oh I can't move and I think it's because I default 'add speed to zero so you know whoops okay so everything is still working we just replaced all that frame based stuff with time based stuff so we're not using adults time all right so I will push this so you notice I'm doing pretty frequent commits any time I successfully finish a change and test it then push that out converted frame based to time based next up we want the player character to bounce so in our world element we have this Z in the Z speed so let's let's use this so for starters let the character to be drawn at we want to take their Z into account so as Z goes up then then the character goes up but since in game maker the white the y drawing on the screen is negative goes up then we're just gonna subtract Z it's a little bit of a weird conversion issue but we'll we'll just take that into account okay so for starters we can just do something maybe simple which is we can just say to the character if Z is less than or equal to zero then that means we're on the ground so so we're gonna say Z is less than equal to zero Z speed equals say 200 I don't know cuz problem here is we don't actually know what our gravity is yet so let's actually let you do that gravity is gonna be on a four thousand pixels per second per second these B to 500 so I'm just kind of playing around with these numbers and they're easy to adjust so we don't really have to worry about it that much and it's also in our time update so this is how much instead of every time we want to move something back gravity doing this we can also include this gravity this frame so gravity this frame also here so if we're on the ground then we Center z speed to 500 if we're above the ground we'll go ahead and modify our Z speed by gravity z speed plus equals gravity its frame I'm gonna add - actually know what let's do this let's treat negative Z speed us up so that matches how Y works do this ok I think that's right I be able to brain meltdown alright Z plus equals Z speed slow mo seconds these people it's a good frame and then we should always cap your Z so that you don't fall down through the ground there's a median actually and it's okay so I think this is right so all this should do is make the characters bounce up and down how do you prevent collision problems caused by Delta time yeah that's a tough one so in a lot of cases like in in level head we we do have some of those when with the game maker specific collisions we have a lot of collisions that are owned where we essentially if the thing is moving too far that it would start to skip like grid spaces or something then we actually break that down into multiple chunks of movement and act under the hood we act as though it is moving a little bits at a time and check collisions in each at each point yeah you look nice see how these because- 500 disease speed to do plus equals let's see so z- z goes up so then add gravity if Z is should be min right what are we doing here grab do this frame and what men because Z goes negative which means if it goes a greater than zero it'll stop at zero this equals Z speech so mo seconds but this is definitely not doing what we need so let's let's do some debugging like this X Y string Z speed scale one's red so my as you speed is negative a thousand but it's not doing anything else because of this dumbness DOTA made mmm okay so this is with AZ z z speed of negative a thousand and gravity of 4,000 suno set like I said the shadow is the actual location of the player and then what we're doing with the character sprite is just drawing it at different locations to simulate to simulate vertical loop okay so probably I need to draw that debug code anymore you know what's happening now we can kind of play with the values a little bit and get a bounce that feels better okay so this is so the crazy thing about dealing with gravity is that you notice that I cut the Z speed in half from the bounce and I'm jumping like a fifth as high so you got to really be careful when dealing with us with speeds and gravity because it gets it feels like either nothing is happening or way too much is happening so you got to kind of ride that line and then interestingly we can even in the gameplay controller just to kind of show you guys how the the time stuff works I could say like maybe at the end step so I could just have this toggle game of speed and go into half speed or full speed just you guys can kind of see that this is all so if I had spacebar then now I am in slow motion so we already have a system in the game where we can do bullet time kinds of things which is really useful for peer play fighting games and stuff we'll notice that's like when a big impact happens there's like a flash of slow motion so we can we could do that kind of stuff in this game as well it makes it it makes things feel a lot more impactful okay so we have our gravity here our next up we're going to so we have this we're gonna keep the Z movement here because that's just a that's just a permanent thing that the that the character does and we can even let's say script script gameplay so this is probably something that we're gonna do you know in a lot of of current characters and stuff so we'll just make an update Z script that takes care of that on its own and we're also going to say here we're gonna now only if we are giving movement inputs enters these great nickel 0 only then will we will we modify these something's we're only gonna start bouncing when we walk okay so now we got something a little bit more lively little bit more responsive it's not enough we need water so a lot of times people will talk about doing a polish pass on their game or basically though they will build the game and then at the end they will they will polish it all up I like to do a lot of the Polish stuff kind of midstream because I think it actually does its it's not unimportant it does a lot of work to influence how the game feels so if you can have things blink or be squishy or whatever even if the game isn't that mechanically interesting yet as long as it feels good to interact with then you've you're already in a really good spot so we're going to now work on so you notice that kind of separating these things added convenience functions and gameplay functions convenience functions I basically think of as things that are not specific to this game which may be this update Z maybe that's not specific to this game either but things that basically could be just used pretty much anywhere in any game and that it would still be fine so that you can essentially package up these convenience functions and bring them with you wherever you need them hey delicious cookie what's this game about I don't know that's up to you I'm just making stuff for fun and talking about what I'm doing so alright so this player we're gonna need things to squish I feel like so let's start with some squishing all right so squishing is simple squishing is essentially whenever you shrink something on the X scale you expanded on the y scale if you squish if you shrink it on the Y scale you expand it on the X so it kind of feels like when you push it on it then it kind of you know squishes so we're going to just make some squish functions so that the player can feel a little bit more you know squishy and listen this is what we used in fields of goop and all over the place this is also use a lot in level head like you notice when gr-18 is bouncing around and jumping we have a lot of squishes happening and that that was actually in there the first day that we started working on level head was we had like a square running around it was very squishy square so felt really good all right so squish so squish set so see squish and we will say squish amount so all we're gonna do is T and this is just gonna basically say if you squish in the positive direction then we will expand the X and shrink the Y and if you squish in the negative direction we'll just do the opposite so X scale equals 1 plus amount and then the last left squish update which will just go squish X scale so let's do this same thing so you kind of see how this works in a second so we're gonna every frame we can an update how much something has squished when it's X&Y and then we can we can change the squish amounts by using a loop function so lerp is short for linear interpolation squishing 0 so linear interpolation and this scenario basically just says every frame we're gonna close 25% of the gap between this first thing in the second thing so if our squish amount is 1 then we're going to end up at 0.75 at the end of this frame and then what's the point seven five then we're gonna go whatever to three-quarters of point seven five is above the BLA so it kind of creates this this psych it moves fast at the beginning and then slows down toward the end so we're going to lurk our squish them out towards zero after we update our Mexican y scale so let's use this and just for naming let's start all the squishy functions with squish all right see so the and the step event we're going when we do our bounce we're also going to speech so it'll squish by like point to level see I shouldn't do it let's make it really intense just so we can really see it so it's kind of a good a good way to debug your stuff is is go extreme with with effects at the beginning and then use them back after after you establish that they're doing what they need to do alright so now I need to update my X scale in a Y scale so first we're gonna say squish update and the draw in it so remember the squish update will modify X&Y squish scales by the amount that we have squished and then it's going to after it's done that work the squish them out back toward no squish so since we've run squish update then we should be able to use the squish X ago on the Y scale so this isn't quite gonna work as we want just yet so just a little bit left to do but I'll show you what this looks like at the moment assuming we did everything squish set squish in it okay so so that's us that's a squishy squishy dude there or lady it's kind of detail at this at this phase okay so what you'll notice about the squish and I'll actually do this just so you can see it a little bit better I'll just have to squish every frame so notice I am floating above my shadow and that's because the player's origin is here in the center and so when we squish vertically then it's gonna squish down from the top and up from the bottom which means my feet are gonna come off the ground so that means yet again we need to modify our Y draw position so it so right now we're subtracting our height we need to actually subtract your height times how much we're being squished because our height is actually shrinking visually the let's so now you notice that I'm I'm now right there in the middle of my shadow so that's good and now I can stop squishing every frame so we can see if this is doing what we need all right so this is like way too squishy and maybe it's squishing the wrong direction as I'm jumping I'm kind of flattening but maybe not so we'll just do a couple experiments here so first let's reduce that by half so point two five squish we just wanted to feel like the characters kind of like got something going on okay and then let's let's try a negative squish now no no no this is better okay so we will do point to squish that should do it all right I'm going to push this their character squishes all right and for those of you who are new to the stream I do have all this code available for download in a public get repository so the link is just down below so if you just want this code you just want to have it then you can just have it and do whatever you want with it all right so we got about 20 more minutes so we can still do quite a bit more with this character so let's do that so let's update this world element we're going to give this we could probably we're probably gonna end up squishing and blinking a lot of things so let's just move the blink of the squish code into this world element parent and and probably also have a rotation so let's do that as well okay so we are going to draw the player by rotation and we want the player to kind of like bounce around or kind of rotate as as the character bounces so for starters let's just say rotation is 45 degrees so we draw the player by rotation and then we're going to once again use our wave function so this is gonna mean that every time the player bounces up off the ground it's gonna kind of kick backwards which is kind of odd right doesn't quite feel right so stars let's actually knock this squish down again okay so we have that let's also bring this variable I always just call this leg position can be whatever you want all we do is we just invert the leg position with each bounce and we change the rotation by by that and we could probably go quite a bit less rotation to see that so every time we initiate a bounce we invert the leg position so this just cause the character to bounce in different directions as you walk around and let's actually slow down that rotation change quite a bit all right so we've got some even extra to say if Z if you're on the ground then let's really like really resolve that rotation but if you're in the air we can maybe sew that down a little bit all right so we got this little cube cuboid person feeling pretty good about this okay so let's push that and then let's let's put some stuff in the world to spawn some things in the world so that we can get a camera and maybe have the camera follow the character around [Music] so King Java wants to know about how to do slow-motion replays so my my thinking on that is basically these are two separate problems so one is is you just need some kind of replay recording system where basically you are recording positions animations stuff like that of all the things that are happening in the game that's one that's one layer of it the other is the other issue is the slow motion part so if if you were recording timestamps with all of your your replay stuff and a shoot pretty easy to just modify those timestamps I'm sorry modify here your time as you're running through the replay by some sliding scale so the basically just events happen at different points so okay so I've got this blue thing I just need something in the world that I can use to to get myself a frame of reference so we'll trim that down just kind of a blue thing we're gonna make berry its object its parent is also going to be world element and we're going to do the same thing we did in the and the player a little simpler oops well background that's wrong thing element we're gonna draw our shadow we are going to draw our sprite this thing doesn't blink so we're not gonna worry about that we will still take its height into account and it's Z so what we have here is some dry violations dry meaning don't repeat yourself so this code is just taken straight from the player character and duplicated so whenever you find yourself doing this you want to try to come up with the mechanism where you aren't doing that and that's where creating scripts comes into account but sometimes you have to repeat yourself a couple times before you find the patterns that you need in order to go back and fix those issues alright so we have our berry we have our shadow let's make sure we get the height and the width of this berry correct so it's 54 and 54 I'm just coating these widths and Heights up by hand for now and presumably later we may have some better way of handling that okay so we're just drawing this berry etc etc so the reason I'm doing this is because if we want the camera to follow the player we actually won't know if it's really working hi my name's Dave yeah I'm hitting save every time I save like every time I finish it a line of code and a game maker to saving is super fast so it's it's not as nothing okay so gameplay controller first thing I'm gonna do is we're gonna spawn a bunch of berries numb berries it's not like 300 berries spawn range will spot him in like a 2,000 range all right so these are just gonna exist to give me a frame of reference these are not actually interactable mechanical items yet okay so a couple things here you may notice there's no death sorting going on so when I walk on these my shadows on top of them I'm on top of them none of this makes any sense their shadows are too big there's just a lot of dumb and bad stuff going on here we're gonna have to fix so first we're gonna make a script that manages depth so we'll just say update world depth and all we do for now is just depth is negative why that's it so in the Barry these are not moving objects so we can just do this in the create event and the player we are moving around all the time so we're gonna update our depth at the end of all of our movement code and we're just gonna do that all the time we can maybe just do it whenever we move I suppose but it's possible that later other things will move us so so it's probably good to just do it every frame and not worry about it and actually in world element let's just do this baseline so that we talk to worry about doing it in the create event of every single object so you notice how useful it is to have everything in the world inheriting from this one object because as the game gets bigger we're gonna have a lot more shared functions okay so we now have our depth being updated let's okay so as you notice that as I get in front of it done it we now have this thing going on there's no collision happening so I could just walk right through these things and they're big enough that that feels weird right so if they were laying on the ground or whatever then then I should be able to just walk right over them but these are big enough that I should probably actually be colliding with these so we'll have to deal with that alright king java thanks for coming by I should be streaming actually tomorrow morning as well so I'll be putting a couple hours into this okay so we're walking around this field of berries also these berries are all the same which I don't really like so let's let's solve that first scale modifier one berry rage and we're gonna apply scale modifier to these so that's we have a little bit more variety in the world and we can also randomly X flip them so now we got a little bit more of an interesting thing going on here but still the shadows are not good I'm especially yeah you can see that like shadows will actually see the shadows sitting on top of my character so the shadows is actually something that we should fix sooner rather than later I'm gonna push this because now we have some stuff in the world and then it will go from there I think I can do in five minutes now this commit is just that there are berries so okay so we're gonna make a new object called a shadow draw this thing draws the shadows just gonna check with each world element shadow draw so this is just a boolean then we're going to make a script draw shadow this is to be called by any world elements we're gonna draw sprite SP shadow at 0 X at X & Y position shadow scale let's go to B width let's see / so we're gonna scale the sprite by the width of the object so that as we get smaller and larger objects the shadow scales up and down on its own the rotation and 25 alpha okay so we'll try this so the shadow actually should give us an a sort of an indication of how large or small an object is as well and in the player I'm going to stop drawing shadows and in the Barry I'm also going to stop drawing shadows so we've gotten rid of some duplicate code here and the gameplay controller aside from the wolf background we can now make the shadow draw object so we're gonna have some depth problems with this which we'll solve in just a second but first thing is just getting it up and running okay nice nice and I believe where we're at is I believe the top left corner is zero so if we were to go up a little bit higher then the shadows would actually draw on top of us so we could we could just to show this say the depth of the shadow draw object is negative five hundred just now like never drag shadows on top of things so what we're gonna want to do is change the depth of this shadow draw object the same as everything else so we have this update world depth which is depth equals negative Y we're gonna move to shadow draw object with the camera we're gonna update world depth then and then we're also going to add some amount to the depth so that it goes behind everything so this is doesn't exist yet so you can go ahead and fix that so let's just say shadows are now 10,000 depth further back than anything on the screen and let's do the same thing with the background so the background should be back even farther than that so backgrounds why equals so in both cases the shadow dryer and the world background dryer will move with the camera set their depth and then update their depth based on some modifier so that they go further back than everything else so this should mean now that no matter where we go shadows and the background are always gonna be drawn behind everything else so should be good okay so that's a pretty good start I think we've got a little little world to run around in nothing's really happening yet but we've got kind of a little juicy game going on so I think next stream which I'm gonna be doing tomorrow 10:00 a.m. Central time we'll put up an event so next next time we'll be working on probably like movement collision as we walk around and we'll also be working on a camera so that we can follow the character out and then kind of depending on where we're at from there we can even look at dynamic spawning of rolled items as you walk around so we'll just kind of see how far we go and if there's anything anybody else wants to see tomorrow then if you're in the stream just go ahead and drop stuff in chat and I have I have no preference on where this game goes or what we end up putting in this game I was kind of hoping that people in the chat could sort of throw their ideas and we could just kind of see where things go so because really this is this is for you guys so whatever you want to do we'll do it all right you guys well thank you very much for watching and I'll see you tomorrow adios you

Channel: Butterscotch Shenanigans

Views: 6,749

Keywords: twitch, games, game development, game dev, programming

Id: jK9wx14R6RQ

Length: 123min 21sec (7401 seconds)

Published: Sat Jul 27 2019