How To Make Your Game Look Better Using Sin & Lerp Functions

all right so if you don't know the gmtk game jam event just finished up last weekend and i figured in celebration of that event let's go ahead and make a video going over two tricks that i like to use in my game jam games that boost up the polish and the visual fidelity even of just simple pixel art games and these are really great tricks because what happens is usually in game jams you put polishing and visual effects last on your to-do list or you push it off to your artist and you say hey can you make this look nice well in a game jam setting especially you start to run out of time and these items tend to be the first ones to be dropped so i'm going to be going over two functions that we can use in game maker that will make it very easy to add simple polish and just some dynamic motion really into your game jam games now i'm not going to be going over the the math of these two functions i'm just going to be going over the implementation and how to program them because i feel like a lot of people see these words lerp and sine and cosine and are a little intimidated when in reality they're very very easy to use and i use them all over the place to look nice so let's go ahead and get started so if i go ahead and run this project i have a simple little test project that i've put together of a little character that runs around the screen all right nothing too crazy and you can see i have this gem here but this gem looks relatively boring so how can we make this gem look a little more interesting well the first thing i'm going to do is i'm going to go over sine now what is sine sine is a math function that you've probably seen in your math classes and you pass in some sort of value here and then it spits out something you might be like oh you know i could put sine of pi and that's going to put out a value or sine of 1 and that's going to put out some sort of value but we're going to be using sine to generate dynamic motion so let's go ahead and open up our gem objects and i am going to create a value now the first thing that i want to say is i want to say um let's just call this float inner now what does this mean this means float iterator and i just call it itter for shorthand because i typed these out a lot and i'm going to set this equal to zero now this is a variable that's going to be used to keep track of the way that sine and cosine are going to affect the positioning of this gem so what we're going to do here is we're going to try to have this gem object kind of float in space and look like it's just kind of bobbing and levitating above the ground a little bit and one way to do that is add some smooth motion using sine so we've created our float editor variable the next thing we need to do is we need to say float hitter speed i'm going to say 0.1 all right so now in our step events i'm going to go begin step and i'm going to say floats hitter plus equals float hitter speed all right nice and simple so now all we have to do is in our draw events i'm going to come here and i'm going to say instead of drawing self let's go ahead and say draw sprite and i'm going to say sprite index image index because we're not changing those at all and our x position is going to stay the same but now we're going to make some modifications to our y position so normally we could just put y here and this would draw the same but all i'm going to do is i'm going to say plus sine of float now what's happening is what we're doing is we're passing in this variable that's constantly changing into our sine function and if we take a look at our begin step you can see that floater is always being incremented by float it or speed so we start at 0 and every step we add 0.1 and then we pass this into a sine function which is going to essentially clamp this value and return it as some sort of value between negative one and positive one so what we're going to do is this we're going to get some sort of value between these two numbers well what if we go ahead and add that negative 1 or somewhere in between 1 to our y position you'll see how we can start to increase and decrease the y position by this value and so that it looks like it'll start moving so if we go ahead and run this project and we look really closely you can see that we can see the gem bobbing a little bit let's go ahead and draw this guy scaled up a little bit all right and if we go ahead and run this again you can see that our gem is just ever so slightly moving well how would we increase the size of this well what i can do is i can say var amplitude equals 5 and now what i'm going to do is i'm going to come through here and i'm going to say y is equal to y plus our sine float inter times our amplitude and we go ahead and run this again you can see that now our gem is really starting to bob and what's really great about this is it has a very smooth motion and iterates between this negative one and positive one value constantly creating this nice bobbing effect and of course we multiply it by five to give it a larger amplitude so that it starts to bounce around nicer okay so what else can we do that i mean that's pretty much it right that's that's a full start beginning to end implementation of using sign to create polish but you can do so much more with this you can implement this in places that don't just affect y position for example let's say we want it to have our rotation well normally we draw a rotation at zero but let's say sine of float enter all right we aren't seeing anything so it's kind of small so let's go ahead and multiply this by amplitude and you can see that our gem is starting to rotate a little bit now how this rotates will be based off of your origin of your sprite and i don't know what this the origin of this one is a little offset so if we go and fix this we should fix our rotation so that it doesn't look so uneven let's go ahead and say we put in a secondary gem you will see that both of these are moving up and down and rotating they're doing everything in sync and maybe this is something that you don't want to have in your game maybe you want each of these to be offset by a random amount well this is going to be very easy to do all we have to do is on create instead of setting our float iteration to 0 we can just say irandom of a hundred and if we run this again you will see that these are now completely offset now what's happening here well instead of starting our iteration at zero we're starting at a random number between zero and one hundred and we just happened to grab an integer we could just remove this and it could be a float point value and that would still work out and what's happening is this is kind of acting as like our starting point and then every frame we increment it by a small amount and then we draw it to the screen based on that so that's a very simple way to add some sort of offset into our values so that they start to look a little bit different okay so that's pretty much all i want to go over with sine you can do the same thing with cosine it will produce the same effect so i use sine for pretty much everything i know some people like cosine you can really use either it shouldn't make much of a difference you're going to be getting the same type of effect all right so that's pretty much everything i wanted to cover for sine and cosine next we're going to jump into lerping and using the lerp function now lerp can be used for any sort of type of motion so let's go ahead and open up our game controller and we're going to implement an example of this and learn all that we can about lerping using this so what we're going to do is we're going to create an in-game menu that's going to start on the left side of the screen and when we open it it's going to slide to maybe the halfway point of the screen okay so let's go ahead and create some variables i'm going to say panel x equals 0 and i'm going to say panel width equals surface get width of application surface so basically i'm just going to say draw this at one half the size of our application surface and inside of our draw event i'm going to say draw rectangle at panel x 0 panel x plus panel width and surface gets heights of application surface and let's go ahead and draw set color oh let's do the alpha 2 let's set that to 0.8 and draw set color to black all right let's make sure we set everything else back so 1.0 and set this to white so if i go ahead and run this you'll see that we have a our panel showing up on the left side of the screen now there's some depth issues so let's just go ahead and say step depth is equal to negative 1000 and this should fix that depth issue okay so now you can see that we have this black rectangle representing our main menu uh that is covering up half of the screen well what we can do is we're going to say let's go ahead and add another variable we say open equals false and we're only going to draw this if our panel is open all right so now what we can do is we can add a step event i'm going to say if keyboard check pressed ok enter we're going to toggle our open state so we're going to say open is equal to not open so if i run the project again you can see that we can press this to open and close the menu but this doesn't look very good right because no menu just disappears and reappears instantaneously and so let's go ahead and add make this look nicer by adding in some motion so we're going to say is instead of drawing this if it's open we're always going to draw it but we're going to say panel x is equal to blurp panel x panel target x of 0.1 now there's a lot to unpack here first thing we notice that we created a new variable so let's go ahead and add that in we're going to say panel target x equals zero okay all right so what is happening here so we're saying panel x equals lerp panel x to panel target x by 0.1 well let's say let's change this up a little bit let's instead of doing this let's say we want to panel x is going to be a lerp of 0 to 100 by point let's just say one so if we go ahead and run this you'll see that our our panel is shifted over to the right by about 100 pixels actually it's exactly 100 pixels because what we're doing here is we're saying okay the panel x position is going to be equal to lerp starting at 0 ending at 100 and at 100 percent so this one here is going to be a decimal representation of our percentage so 1 equals 100 and 0.5 is going to equal 50 okay so this is going to be a decimal representation of our percentage so if i change this to 0.5 you will see that we are now left a little bit more half that distance so we're actually to the right by 50 pixels okay so how can we use this to generate motion because this is just using some sort of static positioning to position our panel at this weird offset well instead of using constant values such as 0 and 100 in these values what we're going to do is we're going to use these variables that we created and this new variable that we created so instead we're going to say panel x is our starting position and we're going to say panel target x is our ending position and what's happening is by passing in a value that we then change we start to generate motion so we're passing in a dynamic value and then we're setting that back to its original value and generating motion this way okay so what is panel target x well panel target x is going to be whatever we say it is right now it's zero so if i run this there's not going to be any sort of motion because it's saying hey start at its x and go to the same zero position by 50 and then return that back to our x position okay well this that doesn't mean anything so let's say we set panel target x equals to a thousand and we run the project now you'll see it was so fast it lurked all the way to the right side of the screen basically we couldn't even see it so let's go ahead and turn down this amount i usually use 0.1 or 0.2 i almost never use anything larger than those two values to learn our values anything other than that tends to be very quick so you'll notice that this is still pretty quick and it's also relatively arbitrary in the sense that it happens every time we start it so why don't we instead do this we're going to say panel x let's change the order of this we're going to create panel width first we're going to say panel x is equal to negative panel width and panel target x is going to be equal to panel x also all right so we're going to say panel x and panel target x are the same value we set this to negative width and we set this so let's go ahead and run this again and you'll see that our menu is hidden completely off screen to the left and look if you look really closely we can see one pixel right here hugging the left side so maybe we could be a little more precise and we could say -1 okay so now what we're going to do is we're going to say if our if our panel is open panel target x equals 0 else panel target x equals negative panel width okay so we're going to say if our menu is open we're going to set our target x to be 0 and otherwise we're going to set it negative width so we're going to send it way left off screen okay so we're going to say send way left off screen or we're going to send it to open all right so let's go ahead and press play again and you'll notice that we have nothing here but if i press enter now what we're doing is we're lurping our panel x position to be zero now keep in mind we are drawing a rectangle so the zero position is the top the panel x is the top left corner of this this whole panel that we've created okay so we're saying okay if it's open we want this to be zero and if we're closed we're going to go all the way to the left so now what i can do is i can hit i can hit enter and we have a nice smooth motion and the reason that this is smooth is because as we get closer to our target we start to move slower and as we're farther from our target we move faster so you'll notice here that we have this nice initial kind of momentum and then it slows down and does like a nice smooth motion exit all right so we can do this for all sorts of types of things i just use this as an example because menus look really nice when you learn everything but you can use this for enemy movement you can use this for item movement you can use this for any sort of value or or object or you know image or anything that's sliding it around the screen you can learn its position to get that smooth motion and all you have to do to do a lerp let's go through the steps one more time you create an x position a target x position and then you lerp from your x position to your target x position and this could be anything this could be image x scale let's let's go ahead and implement this into another example let's go back to our gem and we're going to say our scale is actually going to be equal to 0. so we're going to draw this at a 0 x and y scale and what i'm going to do is i'm going to say target scale equals 3 all right so now when we're created we're going to say scale is zero and target scale is three and in our step event i'm going to say scale okay remember we just say we set the value equal to the alert of the value to the target okay scale equals lerp of scale this should be easy to remember and then we're going to say target scale nice and then the amount and if we look down here it does give us a little bit you know game maker does try to help us out this value one and value 2 isn't too descriptive but the amount is so you should be able to remember that this is starting ending and then the amount that we want and in this one i'm going to say 0.5 all right so now and if we look at our draw we see that our imagex scale and y scale already accounts in for our scale value so now what we should do is on start the gem should start tiny and it should lurk into size oh i didn't even see it it was all the way to the right let's run this again and let's look at the right spot all right so see we have a nice slow lurp into the screen let's go ahead and make that speed though faster so i'm going to say lerp speed equals 0.1 and instead of passing in this constant let's pass in this variable and let's run the project again and now you can see we have this scaling in effect what we could do is we could say target scale is equal to 5. and then we're going to say if scale is greater than three we're gonna say scale equals blurp of scale to three lerp speed and let's go and wrap this up so now what we'll do is we'll grow to five and then we'll shrink back down all right let's take a look at it if scale is less than three we want to lerp it to three oh no we want to say if scale is less than target scale let's alert to our target scale else scale we're going to lurp it back down to the small one and what's happening is as we get closer and closer and closer and closer we're moving a slo in smaller amounts so it takes long to hit this condition so what we actually want to do is we can just say absolute value of scale minus target scale so we're going to find the difference is less than or equal to 0.1 so what we're doing is we're saying instead of checking for this condition to be met in which our value is equal to the target value we're going to just check the difference we're going to say okay is the distance between our scale and our target scale less than 0.1 and if it is then that's good enough it's going to be close enough to the target that the user won't be able to see the difference at that point and we want to move on to the next step so this is something you'll notice that if you get to a point where you're like oh i feel like this should be moving on to the next step or doing the next thing and it's just it's spending all this time lurping it's because that distance gets smaller and smaller and smaller every time so make sure you put in some sort of catch if you're waiting for that lerp to finish that way you're not sitting here waiting for a long time alright guys that's pretty much it for today's video like i said it was just supposed to be a quick and dirty introduction to sine functions and lerping functions so if you notice we scale up really large and then we keep pulsating back down and that's because we probably should put in some flag scaled equals false and uh all right so we only want this to happen once all right so you'll notice that we grow in really big and then it takes a long time actually for our value to for the gem to shrink down and that's because this is one of the built-in limitations to lerping and one of the ones that the only really frustrating thing i would say that comes along with this technique is that as i mentioned before the cl the closer we are to a target the slower we move so basically what we're doing is we're saying hey move ten percent of that distance so let's say you're at a zero you wanna move to 100 all right so you say let's move 10 percent all right so now you're at 10 all right so now you're at 10 and now you want to move to 100 the distance is 90 you say let's move 10 percent of that now you move forward 9. all right now you're at 19 and you're going to 100 the difference is 81 and now you say move 10 percent now you move 8.1 so every time you move closer you move in smaller and smaller increments and as you get really close to your target and you move by smaller and smaller values it starts to take a really long time to reach that target destiny in my last ludum there game you can see that i did this stuff all over the place everything is sign everything is alert i mean if we look at this right here you can see that this menu moving at the bottom there's exit game that's just got a sine function on it this rotation is just a sine function the rotation of this wave is a sine function the rotation of this is a sine function i mean everything just has sine functions the the movement and the rotation of these waves is signs we have our menus that are lerps everything is just sine and lerp and pretty much every motion i just lurked that rotation in and lerps that scaling in i lurked in the edges and scaled those using sign i mean you could just tack this onto everything and it starts to make your games look more polished and like it has more motion anyway guys thank you so much i hope you enjoyed if you enjoyed the video click the like button and subscribe and i will upload another video sometime in the future you

Channel: GentooGames

Views: 1,849

Keywords: gamemaker, how, to, make, create, program, code, shaun, spalding, shaunspalding, heartbeast, heart, beast, pixelatedpope, pixelated, pope, pixel, friendlycosmonaut, friendly, cosmonaut, game, tutorial, asset, maker, quick, tips, tricks, tips and tricks, lerp, lerping, sin, sine, cosine, cos, motion, smooth, move, movement, look, better, functions, function

Id: WxXrgUcj5-Y

Length: 22min 3sec (1323 seconds)

Published: Tue Jul 28 2020