Hello and welcome to another episode in the Godot Basics tutorial series. In this episode we will be taking a look at the tween class a tween class as a class provided by Godot that smoothly animates a nodes properties over time and it's useful for animations requiring new miracle property to be interpolated over a range of values.
And when you don't know the final value in advance the tween class inherits from the node class which inherits from the object class which means we do have access to life cycle scripts. The tween class comes with three properties the playback process mode which is just an enum the playback speed which is a float value and the repeat property which is just a boolean be playback process mode is just an enum of type tween process which is just two values 0 1 1 0 representing that you're going to run in the process physics step where they value 1 which is set by default which means you'll be running in the idle step you can also think of it as in which life cycle do you want the animation to run on physics process or process.
My recommendation is not to change this value as you are trying to get the smoothest animation possible over a specified amount of time. Now playback speed is just a multiplier. Basically how fast do you want the animation to be. And so the value 1.0 is given by default which is normal speed. Of course you can change this float value anything below 1 you're going to divide. And so for example zero point five would be half as fast as normal and two would be twice as fast as normal three three times fast as normal etc.
The last property value given to you by the tween node is repeat and all that basically does is do you want the animation to loop and I've set the true it will loop and offset set false. It won't. On top of that a tween comes with four signals tween all completed tween completed tween started and tween step in this episode. I won't be going over how to implement signals but just keep in mind we have four signals and to summarize it basically we can send a signal when all twins are done on the class. When a specific tween is done on the class or finished on the class when a tween has started and you have to specify which tween you're starting and of course a signal that sends every time an animation is running so basically on every step of the animation.
And again you have to specify which tween you're talking about or which object. Now to recap the tween class is based on tween motion or inspired by tween motion and basically the computer calculates frames in between the start position of the object and the end position of the object.
It would like the game object to be at and on top of that you're able to specify a set of parameters or arguments to determine the computer's calculation. Now the tween class comes with values for your methods in order to customize the calculation of your tween motion. The
The first thing that though gives you that allows you to customize the tween motion is transition type transition type is an interim value and basically all this means is how do you want your tween motion to behave in the middle of the animation. The second type of enum that Godot provides you is the ease type enum and basically this allows you to customize how your tween motion behaves on startup and towards the end of your tween motion. A third value that tween methods will ask you to provide is a duration which has a flow value and basically how long do you want this animation to last.
Keep in mind the lower this duration value the faster your tween motion appears. And lastly Godot also allows you to set a delay argument and methods and all that basically does is tells the tween motion how much time and second it needs to wait before it starts its duration. So just keep that in mind. Let's take a look at the ease type enum Godot provides you with this enum which is just 4 values 0 through 3. The first one is called Ease In and basically you start slowly and you speed up towards the end. Ease out is the opposite.
You start quickly and you slow down towards the end. Ease In and Out is a combination of both a first and second enum types and basically because is in is first. That means we start slowly and because ease out is last that means we slow down towards the end and we do the same thing for the last one is out in which is the fourth enum type because ease out is first, That means we start quickly and because Ease In is last, That means we speed up towards the end and we have transition types.
I won't go into too much detail about this but basically you can think of it as what kind of graph do we want to use and provides us with a lot of choices specifically at the time of making this video, Godot gives us eleven choices. The first one being the most commonly used which is linear.
Now what I want you to think about a tween class and these enum properties we went over is that a tween motion we're using is just a graph position over time or position based on time and again Godot comes with create customized graphs. Other animation software and let you make your own but the dough makes this very easy for us to implement our own customized tween animation. Let's go ahead and take a look at that and the dough you can find this graph in the tween class documentation portion you can find on the Godot engine Web site and again here we have everything we have our eleven choices.
The first one being linear and on top of that we have our four different Ease Types. Ease in, out ,in out, out in. Now in Godot, We must combine the transition type with the Ease type. There is no way to get out of this. Now keep in mind that the linear option does not allow customization on Ease type it is set by default to ease out in only. And that's because you want that linear motion. So just keep in mind ease out in means you start quickly and you end quickly and therefore you get what appears to be this smooth yet linear motion. But Regardless outside of the linear transition type,
We are able to customize the other 10 transition types with different Ease Types and due to the different combinations you can have. You'll notice here that really one type of transition type based on the combination of each type allows us for different types of graphs that our object will position itself in over time. So keep in mind that the x axis is time zero to the final amount of time set by your duration value and the y axis is position or data that interpolate ing between the initial value and the final value at the top.
So if you're ever curious about what kind of tween motion you're going to have you can always take a look at a good no tweeting Cheat Sheet now that though has many different methods for animation calculation in this episode we'll only go over 4 but I think you may find interesting in your beginning journey into Godot and that includes the follow method follow proper team method interpolate method and interpolate property method. Now when we go over these examples you're going to see argument types which are named a variance and just keep in mind that only the specified variance down below are allowed to be used and that includes boolean integer float vector 2.
The list goes on. You can even interpolate color just note that the interpolation data has to be basically anything that deals with numbers so you cannot interpolate strings for example on top of that. The tween class comes with other methods for playing the animation and you're going to need to call at least the start method in order to start your tween motion animation provided to you by the tween class. And on top of that you can also stop a specific tween stop all tweens resume any stopped tweens and you can also reset the animation of your tween.
Just keep in mind that you need to call the reset method during the animation if the animation is completed and you call reset. You will not reset your animation. Let's start with the follow method a follow method takes in quite a lot of arguments. The first three arguments have to deal with the object whose values you want to edit or change the next two arguments deal with the target object which is the object in which you wish to be affected by and then next is the float duration followed by transition type Ease type and delay. These
These are optional arguments. They have default value set to them. So just keep that in mind. And here's a simple example of the follow method. So and also keep in mind that the method examples will be done in pseudocode. We'll assume that we've somehow implemented the tween class we can use the following method and so in this case we call self and a method inside string quotation marks or double quotation marks but the name that's in our current class followed by an initial value. In this example with 0.
But most cases you'll want to use a property value that's in your current class. The next two arguments is the object in which we want to be affected by and the method name that can be found on the other object node. And lastly the duration we want this. In this case the values we get return back to us in the other object method to last. In this case that would be 5 seconds. Now again to re summarize what this does is the self method will get code and a value or values will be passed in as it's based on the return value of other object the method and it will last five seconds.
And so in this case the follow method is good when you don't know, In a sense what the final value will be at the last second and that's why it's been given the name follow the next method is the follow property method. They follow property function is similar to the follow method function and that you need to provide an object in which you wish to have values change and provide an object in which you wish to be affected by the differences we need to provide a note path property. So you need to provide in string or double quotations the property value inside the object class in which you wish to change you need to provide an initial value.
Keep in mind that has to be a variant that's a number. And on top of that you provide an object target and the node path to that target property and a float value which represents the duration. And again it also takes in transition type E type and delay which are optional. Let's go ahead and take a look at an example. Also keep in mind you can download all of this from get hub and play around with the code. In this case we have fellow property we have the self keyword which represents wherever they follow property. Function is being called in.
In this case this is our known path property. And what we're saying is we want to grab the position and on top of that we want our initial value to be our current position which is again position as a vector to data type and we wish to be affected by an object or other object and be affected by their position value and we want this to last for two seconds. Now keep in mind again that the node path is a string value that represents the object's property. So let's say we don't want position. Let's say we want the x value of the position.
Well what we're going to need to do is type out a word position followed by the double colon symbol and then either the x axis or the y axis. So in this case in this case we would like our position x value to follow. The other objects position x of value. So keep that in mind when dealing with note path properties is that you need to use the double colon symbol when trying to get a value inside of that property value. Again in this case the x axis of the position so position called an X is the same as position x.
Now the third method provided to us is interpolate method and interpolate is different than follow because when dealing with interpolate we know what the final value is. And so take a look here we have variant initial value and variance. Final value. And again our first argument is an object which is just most likely these self keyword followed by the string value of the method name. And based on the initial value and the final value along with the duration we're going to pass the changes between the values to our method over the duration.
So in this case we have interpolate method with the self keyword and we have a method called set health and our initial value is 0. And our final value is one hundred and we're going to interpolate between the values of zero and one hundred over ten seconds. So in ten seconds in every step we're going to pass that value to our function called set health over 10 seconds. So basically imagine a snore lax being healed and that's the one thing to note about interpolate method. The interpolation between two values will be passed to a method.
And lastly we have interpolate property which is basically the same thing as interpolate method. The only key difference is that are not path which is a string value will represent our property name instead of the method name. But the most important thing to keep in mind is we need an initial value and we need a final value. So in this example we would like to interpolate between our current position value so in this case self keyword a look by the position property and string values which is again a note path data type and our initial value is our current position so we can use get underscore position and the final value will be the target nodes position value.
Now keep in mind the difference between interpolate property and the follow property is that our values are static and so even if in this case the target icon node is changing its position value over time we are not going to update the position value instead of interpolate property. If you would like to update based on any new values that the target icon node has in its position value you will use follow property.
So that's something to keep in mind interpolate the values are static they will not update the follow methods will change their value if values have changed during the animation process. Well that is quite a lot. We went over so again keep in mind I'm going to upload these for method examples on to get up so please feel free to download that and play around with it tween class. Well that's all I have for you in this episode. Thank you so much for joining me. Thank you for clicking the Like button and thank you for clicking the Subscribe button.
If you have any questions or comments please feel free to leave them in the comments section down below.
I look forward to seeing you in the next step. Have an amazing day!