Godot Tween Tutorial

greetings my name is Brian and I want to build a video game so today we're gonna learn about lerp and we're gonna learn about tweens lerp and tweens are two ways that we can interpolate from one point to another we can go from zero one or any two values actually and do it in a cool way and it adds a lot of professionalism that makes our games look a lot smoother a lot sharper and in the case of tweens it can actually handle some of the animation and and changes in the background without us yeah I'll just tell you that when we get to the thing let's roll that don't be hit like an animation so people get a chance to like and subscribe or something my name is Brian Carey and I am the savvy barbarian [Music] [Music] okay so lerp and tweens so this discussion kind of pops up because in the last video and I should have a link for that up in the corner here the last video we did transitions in shape keys like how to get from one shape key to another shape key and we just kind of popped from one to the other and so maybe it'd be cool if we actually saw the transition maybe we actually saw the morph happen from one to the other because you know maybe it's running a mouth and we're running a mouth open the mouth shouldn't just snap open it should open and close gradually or with some kind of momentum so lerp is one way to do that so I'm combining lerp and tween because these two things share a lot of the same concepts basically we're moving from one value to another value and how we're gonna do that so lerp stands for linear interpolation they're they're gonna translate from one value to another value in a straight line so what does that look like exactly so here's an example that we'll get from our old friend Wikipedia and we can see X here usually the x-axis is our time axis and then the y-axis here is the change of the value over time so here's my start point right here and here's my end point right here and so you can see this is just gonna give us a linear interpolation it is a straight line it's just gonna move in a straight line from our start point to our end point I mean it's just a straight like straighter than Stalin's trip to hell we're gonna go from a straight line from point A to point B that's all it is so how does lerp take form so when we go into our scripting engine in the Godot game engine we're just going to type the word lerp which is more fun to say actually than anything else about this thing so it J it takes three values right so we've got this starting value and this is a number this can be a vector vector two or a vector three this can be a color whatever is that you want to put there it's a starting value and then raise yourselves we're going to give it an ending value yeah so it probably goes without saying that the starting value and the ending value you've got to go at the same kind of thing so if the starting value is afloat the ending value needs to be float the starting value isn't it as a vector3 your ending value is a vector3 you get it right so the last value that you're gonna give it is this weight so basically this is like how fast am I going to move from my starting value to my ending value and that's really all that is so now you know pretty much everything there is to know about lerp and that's it when you want to pull the value out all you got to do is set it equal to a variable so you whip a variable in front of that thing like Bob here and Bob's your uncle or Bob is your lerp value as the case may be so let's see what that looks like in code so here we are in the Godot game engine and we've got a really simple script I'll go through it real quick real high-level I'm not gonna run through every little detail because I consider this to be more of an intermediate level video and not so much a beginner entry level if you want to see those let me know in comments here down below and I'll make some of those as well but this one I expect you to already know what the process loop is and some of these things so this is just a really basic set up I've got the world spatial node here I've got a ground plane I've got a camera alight and I've got Geoffrey so here's what Geoffrey is Geoffrey is just this scene here right he's just a spatial node and we're looking at this cube the cubes name is Geoffrey and his color is indigo it's still a real color now we've got a timer in here and this timer is set to two seconds so what we're gonna do when we look at the script now click this guy and pop the script open we're gonna see here is during in the process loop the timer is going to when the timer stopped scan every two seconds it'll stop and if the cube is at position zero we're gonna set it to two the position is two we're gonna set it to zero so it's just gonna ping-pong back and forth between these two sections and then we're gonna set the translation equal to whatever that whatever this target value is all right so let's run that and see what like so Jeffery is the indigo cube here and every two seconds he's gonna teleport from position 0 in the x axis to position 2 and back again just like we expected so that's pretty straightforward and pretty simple code just to make this all easy to understand that's cool but what if we wanted Jeffery not to teleport from 0 to 2 what if we wanted him to slide nice and easy between those two locations perfect idea let's use something like lerp so here's what we're gonna do we're gonna go over here into our process loop and we're gonna say lerp and we're gonna feed it some value so we need to start value and end value and we need a and it was that other thing that we needed how fast it's gonna move the the the weight right so where we're gonna start well we're gonna start with wherever we are so that would be translation dot X right because that's where we are in the x axis that's what I want to move from so that's our starting position and my ending position where I want to go to I want to go to the target location so this is my where I'm going to go to target and finally the weight so how fast am I going to go there I'm gonna hit point one and we'll see how that treats us so there loop is built it's pretty much just that easy I'm gonna make this and set it all equal to my variable name Bob which you should never use because it's not a meaningful variable all right then instead of setting my translation equal to target directly I'll set my translation X equal to Bob and let's give that a run and see what happens so we got 0 and we got 2 and you see how nice that floated over why is it not moving why is that not moving why oh for the love of Bill is that not moving and here is what I think is one of the pitfalls of lerp so loop as its place and if it's used correctly and I'm clearly not going to use this perfectly but I'm using this as an example so there's gonna be people are gonna leave spots in the comments to say that's not how you want to use Lert because yeah I know but I've used lerp and I trip into this pitfall sometimes and some of you will as well so I'm going to show you what's really happening here in what I've done here in this section what I've done when I've called lerp lerp is moving from this its current position to this its target position right and it's doing it this much at a time this much at a crack right so it's gonna start let's say starting at zero and it's moving to two so it's moving let's say that's ten percent of the way to two and then of what's left it's moving ten percent of the way to two and of what's left of that it's moving ten percent of what's left closer to two so it's gonna keep moving to two forever and I don't know if it ever actually gets to two it just gets ridiculously close without ever actually reaching two but I think there's a place where it's just close enough so let's just say instead of saying X is zero what if we just said if X is let's say less than or equal to 0.01 and what if we said this X is greater than or equal to one point nine nine right so we're just inside the start and end points and let's give that a run see what happens so it slides real nice from zero to two and it slides real nice back again Solar is doing what we want it's doing a nice smooth slide and it's giving us a linear interpolation between zero and two in this case and it's working but see I had to kind of play with the values with the way that I used lerp that trips me a lot of times one of the things that I might like to do is not have to put lerp and in this this information here right in time main process variable excuse me into my main process loop lots of times we want to break things down into separate functions and it makes things easier for us so let's see what happens when I do that so let's make a function called slide me and we're gonna receive something called an adjustment there and now we've made a function now I gotta make it go do something so what we're gonna do is I'm gonna take these two lines of code I'm gonna copy them and put them right in there and then I'm gonna comment these guys out now the only thing I'm gonna do different is I'm gonna change this since target is a two and in target is being passed I'm gonna pass this instead of I should call my function and slide me I'm gonna pass it target slide me target so now target is coming in through this adjustment variable so I'm gonna replace target with adjustment so it's basically doing the exact same thing that I did before but I have moved lerp and the actual call the translation itself out of the process function and I've moved it into a function that I've created called slide me and let's see how that looks so we've run the thing and we see this did you see that I'll see it again all right here we go ready watch close and there did you see it it's scooched just the tiniest bit so what just happened there and why did it not scooch from zero to two so what happened is this function lerp when this shouldn't should I say function when this is being called this was in the process loop so this is being called every single time this this gets dumped right into your main game loop but slide me is not I just called this one time right when my timer quit I called slide me one time and my value my variable Bob got updated with one value one time from lerp and it moved this far and that was it and that's all it did that's one of the tricks so I I can either call this function repeatedly from the process function or just understand that this isn't going to work the way I want that to so to me that's kind of an issue like I don't want everything in my process loop that's it gets ridiculously long like I don't want pages and pages of process loop I want smartly named functions that make this code easy for me to follow because after all I'm only a barbarian this should be fairly easy for me to understand so now let's have a peek at Queens right I think tweens are better than lerp lerp has its place it's it's real quick it's real dirty it works great in certain situations and I use it in my code in some spots but if I can work a tween in I will and you should probably use tweens as often as you possibly can in your code just stick them in everywhere because they make everything move better they make everything move easier and as a little side benefit it's like its own separate little powerhouse for moving things around in your game you don't have to sit there and iterate through every little bit in the process variable you could just say run go be free and then you can concentrate on other things in your process loop so that's basically where this top bit is here runs without being in the game loop now yes I know people are gonna say it is in the game loop it's just you don't do not understand what a game loop is yes I understand what the game loop is I'm what I mean is that I don't have to have this thing stuck in my process function for it to work tweens will actually get to the destination number now there's better ways to use lurk than I did but that will pitfall over it not actually reaching the two that's happened to me a lot of times and it's happened to other people as well so I wanted to showcase that as an issue you can use that that way and it never quite gets to the value that you want and it really throws off your code because your logic is correct but it doesn't ever quite do what you want also what we see with tweens is we've got some really interesting interpolations besides linear there's things like bounces and elastics and different sign curves and all kinds of things so we just let me show that real quick so here's a page let me show you my show the website go to this oh my goodness go to this website go to the website it's called easing net it's it's a real short page here that's that's really all there is so bookmark take easy net add it to your bookmarks set it to your home page this is really cool so I go to this all the time when I'm using tweens I don't have them all memorized by any stretch I come here so each one of these guys if I float over them they actually give me a little graphic a little teardrop shape on the right shows me an animation of how this actually works right so if I if I do ease out sign I can see this is what happens if I go save this one here you can see it starts slowly over time it moves slowly and then in the middle it speeds up a lot and then toward the end it goes slowly again so watch this little teardrop shape you can see it actually happening start slow goes quick in the middle and slows down again at the end neat right and this one the same thing it's even more extreme those goes very slow at the beginning then very fast in the middle and slow at the end there's things to notes start slow and then ends quickly and there's all sorts of and some of these are spectacular like this little bounce guy check that out right watch that again ding ding ding I just love that one I don't know why some of these are cool like this ease in it actually goes in negative direction it actually goes in the wrong direction first and then bounces back out elastic is cool so you can actually hit something and bounce backwards bounce forwards these are really sweet so you can use these to control your character ever want to make your character bounce when he gets to the bottom of the fall cast array straight down and use a tween to make the guy bounce when he hits the bottom so with all those neat different interpolations it makes your presentation it makes your indie game look a whole lot more professional so how do we use tweens well there's a couple of steps step number one we need to program the tween and step number two we need to start the tween and that's it congratulations you know how to run tweens okay we might want to dive into a bit more detail in step number one so here's how it actually takes the arguments alright so you're gonna type your tween you're gonna you're going to address the tween hello tween and there's a number of different interpolations there's interpolate methods there's there's different ones but the thing that you're going to use more than anything else the most used one is this interpolate property you're gonna pick a property on your object and you're gonna interpolate it from one value to another value so that's one we're gonna look at so you're gonna take this almost this verbatim a lot just how wherever your tween is in your list you'll you'll get to it and you'll say dear tween dot interpolate property okay then we got to give us some stuff the first thing we're gonna give it is what on earth am i working on step one you've got to tell the tween what object that you want to mess with second thing that you need to give it what property am i messing with so you've told it what thing you're gonna screw with now what property on that thing are you going to screw with after that it starts to feel a little bit like loops again right so we're gonna provide it a start value and then we're going to provide it an end value obviously these two things need to be the same they both need to be vector twos they both need to be vector threes or floats or integers or whatever going to give them colors but they need to be the same type the next value you've got to give it is the amount of time you've got to do all your junk in right is it one second is it a half a second is it forty seconds I don't know that's up to you to figure that part out but you're going to give it some kind of time value and this is going to be in seconds the next value is the transition type and then after that will be the ease now you remember the web page from easing snetkof z-- you've memorized easing stat net because I told you easing snap right it looks like this go to easing net look at these coolness --is so you're gonna pick one of them shapes out and you're gonna plug it in here and we'll show you that in an example in just a second and then lastly you can optionally give it a delay in seconds now if you leave this value off that's fine it'll just run white right away if you put two in there it'll delay for two seconds and then it'll run I personally learn best by example so let's go do that so here's our wee bit code again but this time we're not going to use slide me anymore let's make a new function and we're gonna add a tween in here so step one we're gonna pick Geoffrey dot spatial we're gonna hit plus and we're gonna look for tween between stands for absolutely nothing like there was no other useful words in the English language that could make up so alright or could you stand for it between I'll bet you that's it so you double click tween and now we've got a tween in here I recommend that you rename this to whatever you're gonna call this but whatever we'll just leave our is a tween for the time being I'm gonna go back into my script and let's make a function where we fuss with this tween and make it show us something really cool so this one we're gonna call it tween slide and we'll make another adjustment variable that we're gonna receive things in and here's us programming the tween step one remember step one program the tween step to start the tween so here's step one first we're gonna pick the tween now we are here in this tree so we can call this directly we can just say dollar sign and it's it knows I'm just gonna pick tween from the list right there now we're gonna Sadaat we're gonna pick interpolate see there's different interpolation things that it can mess with but we're gonna pick interpolate property so interpolate property so step one object what is the object that we are screwing with well from the perspective of this script which is here we are screwing with this one we're screwing with ourself so we're just gonna type self now if we were messing with with Jeffrey we would put Jeffrey in the list here we would we could just say dollar sign Jeffrey and we would be messing with that one but we're not we're gonna do self next thing we're gonna do it wants to know the property so this is the actual property so now we're telling it what we've told it what object we're gonna mess with now what property on that object are we screwing with so I'm gonna click this guy here and I'm gonna float over here and I know I'm gonna mess with my translation so what is that if I float over it it's called translation this one isn't gonna be that hard to remember so let me go back over to my script here and I need to put it in quotes because I always forget the quotes and that doesn't work if you don't give it the quotes translation all right done so now we've told it what object we're messing with and we've told it what property we want to interpolate next thing we need to do is give it the starting value once the initial value what is that well in this case since we are moving this thing along the x-direction and the property here takes a vector3 this initial value also needs to be a vector3 so that's what we're gonna do now I'm gonna actually give it its starting location which is its current translation so I'll just put translation and now it wants the final value so it wants the ending number what is this so it's going to be another vector 3 and so I'm gonna have to invent that real quick so we'll just say that variable Charlie is equal to translation + vector3 of whatever my adjustment is here so I'm just gonna add this little tweak from Target and I'm gonna add that onto my current translation right so that's my final value so my final value is gonna be charlie don't use on meaningful variable names see how confusing this is next thing is the duration how long is it gonna take to get from my start value to my end value I'm gonna give it one second that was easy next oh this is where all the craziness starts this is pretty cool now if you want tween to give you linear there's a linear one right right there can actually still make it give you linear interpolation if you want but why would you do that when you have all these neat things so let's pick something like [Music] let's pick let's see here I like that one right there so this is gonna be called ease out bounce neat so let's pick eat let's pick bounce there it is and then comma then we want we've got all these different combinations we wanted ease out and finally we can give it a delay but in this case I'm not going to give it one I just want that to run immediately there we've programmed the tween it's actually easier once you do this a couple times it's not that bad we're just telling it once again what is the object that I need to mess with what is the property that I need to mess with and then we're gonna give it the starting value the ending value you need to know how long that's going to take and then we just go back to easing juice net and we pick out some neat shapes now step two of getting this thing to work is to start the tween watch carefully tween dot starts yep that's it now let's call the new function here that's it's called tweens slide and stop calling slide me so I'm gonna call tween slide and since I'm moving this back and forth by just adding this instead of setting target to 2 and minus 2 I'm gonna set it to or excuse me 2 and 0 I'm gonna set it to 2 and minus 2 and then I don't have these this weird lerp action so I'm just gonna set this back to to 0 and I'm gonna set this to 2 so if we get 2 is 2 excuse me if we're at 0 it's gonna make the target go up to 2 if we get a 2 we're gonna make the target be a minus 2 and we're just gonna call tween slide and hand it whatever the target value is and then we're gonna let the tween take over it's just gonna run and let's see how that looks starting at 0 bounce do you see that that's pretty cool you know that'd be pretty hard to code if you had to do that by hand just get the little to get every little thing in there that's not bad and you're not really limited to just one thing either for example let's say we wanted that to a little spin at at the end we can actually interpolate another property and stick that in the same tween we don't need to get like multiple tweens going we can just have that thing go do whatever we wanted to do when it starts right so I could even set this tween to pick a different object I'm gonna pick the same object but I'm gonna pick a different property but we could pick multiple objects and still have the same tween run it so that when we say tweens start it can go and deal with multiple objects for us so let me just grab another one real quick we'll do a second example so we'll do tween and we're gonna do interpolate property and then we're gonna say we're gonna mess with ourself again and this time instead of translation we're gonna mess with let's say rotation rotation underscore degrees yeah rotation underscore degrees don't forget to put the quotes in now we're gonna start since rotation degrees is also a vector with XY and Z we need to give that a vector 3 so I'm going to give that vector 3.0 that'll be my start my value is going to be vector3 and let's just let it spin around the y-direction say 90 degrees time that's gonna take let's say that's gonna take half a second and then we get to pick one of these fancy shapes here so let's go back to easing jennette and I'm gonna pick oh I don't know let's try ease in out sign ease in out sign and let's do the delay this time let's make it wait Oh point five seconds before it starts the spin and let's like that up and see what happens so the next value the next line and the code is to start and here we go the bounce and the spin and see how it's combining them perfectly not bad like you can see the potential for what this can do in your game is just off the charts it's gonna make your game look so much cooler now let's jump over to blender real quick and I'm gonna show you how to apply this which was kind of the genesis for this video is how do I apply this to say a shape key first of all I must move out of the way here's our starter cube that every one deletes stop deleting Jeffry all right so what we're gonna do is we're gonna add the monkey head and this is a neat little trick go quick quick and dirty shape key this is kind of a neat you if you haven't seen it before this is neat for morphing one object into another object so we've got this we've got our monkey inside this cube here and we're gonna do if you want to see more about shape keys I will post a link in the magical cards down here and if I think about it I'll actually put a link to it down in the comments below we're gonna create a shape key real quick we're gonna click Add and we're gonna add basis so there's the basis for our shape key is this this lovely Suzanne and what we're gonna do is we're gonna go up to our modifiers and we are going to add this thing called a shrink wrap so here's shrink wrap we're gonna do is we're going to apply the cube to be its target then we just take Suzanne and scale it way up there we go that looks pretty good and then since we can't actually apply this we're gonna do is we're gonna click this button here apply as shape key so give that a click and see this got huge I'm just gonna scale that back down to I'm just gonna hit alt s to clear the scaling right and then if I look at my shape Keys I now have a shape key over here called shrink wrap so that's pretty cool let's look at that if I click on it and change the value you can see I've changed into a cube now it's a little small so I'm gonna go into edit mode and I'm gonna scale it up move that back kind of roughly into position there and I'm gonna take the original cube and get that out of the way so now I've got this lovely cube and when I go to shrink wrap and turn the value up and down monkey cube monkey this is kind of freaking me out actually so now I've got this monkey I've got monkey cube and monkey cube is able to switch between a monkey in a cube via this shape key we're gonna switch from the monkey to the cube and back via tweens first step we need to export it and we've got the object selected we're gonna do file export and we're gonna use gltf - if you want to see a video that explains all kind of stuff about this gltf to export i should have a link for that up here and a link for that also down in the comments so gltf - we hit the N key to make sure that this is turned on we would normally switch to embedded I'm not gonna bother since I don't have a material attached to this thing we're gonna include only the selected object we are not going to have the modifiers applied because it ruins our shape key every time and our animation is going to include shape keys so I just need to tell it where to go so here we are back in Godot again so first thing we're gonna do is open up our monkey cube open anyways and step one is to save this save the scene as something in the Go dots native format this TS CN format so here's Suzanne fresh in from blender and we can see that if we click on the Suzanne mesh we can come over here to this blend shapes and we have a thing called shrink wrap and we can go between 0 & 1 we can see Suzanne is morphing back and forth between a monkey head and a cube and again if you want to see more about this there is a link up here in the cards if I remember to do that and then we'll put a link down there in the comments as well so there's more detail there if you want to see how that works so we can move this and in the last video basically what we did was we ended up we just instantaneously changed our value from 0 to 1 and it moved from one thing to another but this time we're gonna make it slowly change over time we're gonna morph this value from the monkey head into the cube and we're gonna do it using a tween which is a way cooler way to do it we're gonna let the tween run off to the side and it's going to take care of all this for us and we'll do it with a neat like an elastic bounce what we're gonna do is we're going to stick the monkey head into the world scene and now we'll add a little bit of code and a new script so that when I hit the spacebar or hit the Escape key that we're gonna morph Suzanne from one form to another one [Music] there so now I hit the spacebar we're gonna morph the monkey is morph monkey we're gonna call and send it true if we're gonna hit the Escape key we're gonna call morph monkey and send it a false so now all we need to do is program between appropriately now this time when we do the interpolate property we're not going to interpolate ourself the object that we're going to be working on from the perspective of the script which is here we're on we're on the monkey cube spatial object but the property that we need to modify is on the mesh so it's on Suzanne so that's when we're gonna work with so dollar sign Suzanne then we need to find out what is the property that we're gonna actually change so if we click Suzanne we look at these blend shapes the one that we wanted because there may be more than one here the one that we want is called blend underscore shapes slash shrink-wrap add the quotes okay so we've told it what object we've told it what property we're gonna change now we need the initial value so this is if it's true so where you've started with a zero and we're going to iterate to a one and we're going to take one second to do it and we're going to use let's flip over here to our easing net and see what we like so I like I like ease out elastic for this one so head back to Godot and let's look at elastic ease out and that should do it now we just have to say tween start and we do the exact same thing as before if we hit the cancel button but in this case I'm gonna switch the zero and the one because we're going in two opposite direction and that should do the trick let's give that a run and see what happens okay so the other tween on the cube is still doing its job and that's running on the timer so here's us hitting the spacebar hit the spacebar and it turns into a cube we get escape and it bounces back into a monkey see how there's a little bounce at the end of the animation flawless victory so we've looked at lerp and that's got some neat things to it it's quick it's easy and it does what we want most of the time but tweens are a lot more powerful and we get to use all the neat functions and variations to go from one value to another based on what we have there in easing Snepp that helps us visualize that go to using stat net add that to your bookmarks for reals and use tweens I suggest you put these in everywhere you possibly can one thing I didn't really bring out when I was looking at the code is you notice when we use the tween we called the tween function just one time and it still ran from beginning to end when we use the lerp remember how it just ran just a little bit and it quit but with tweens it ran the whole time it ran the entire animation for beginning to end so that's another neat thing that you can do with tweens is you can just say you know you know if you've got some some tween set up and it animates your mouth motions or something because your character is talking you can just call it and it'll go and run and you don't have to worry about iterating through the entire blend shape on your own manually for whatever it's going to be use tweens wherever you can it's gonna make your game look a lot more polished and a whole lot more professional I hope you all learned a lot from that if you have any other comments or questions about how tween works feel free to leave questions down in the comments and I'll watch those for a little while shrink it back to you and help out if I can if you have any suggestions for other videos that you'd like to see leave those there as well the next video is probably going to be about how to use shape keys and armatures in your video game at the same time now if you guys could do me a big favor do me a solid and click the like and subscribe buttons down at the bottom I would really appreciate it I'm a I'm a very small channel at this point and your your thumbs up your subscription that sort of thing really helps the channel out tremendously and a thank you in advance for that if you want to learn more I should have a new video suggestion popping up up here another one right down over there so give those a click if you like and I will see you next time this is Brian carrier reminding you to be a scholar and a barbarian [Music]

Channel: Savvy Barbarian

Views: 7,204

Keywords: Godot, godot engine, godot game engine, unreal, unreal engine, unity, unreal game engine, unity engine, Blender, blender guru, godot guru, foss, linux, debian, ubuntu, mint, Gimp, Krita, indie games, indie game dev, indie dev, vs, compare, godot vs unity, godot 3d tutorial, linux gamer, game dev, savvy, barbarian, savvy barbarian, tween, tweens, tween tutorial, godot tween tutorial, lerp, lerp tutorial, intermediate, godot example, learn godot, learn blender

Id: pFR4DCUeNHo

Length: 38min 18sec (2298 seconds)

Published: Wed May 13 2020