Animate Faster with Godot 3.5's New Tween Animations

grill 3.5 introduced a new tween animation system that is much more convenient to use as you don't need tween nodes anymore it was designed for good o4 and adapted to godot 3.5 where the tween node still exists that way nothing breaks in existing projects and you can use the new tween system for new animations in this video we'll first create a move to mouse tween animation step by step then you will get an overview of the tween code for a mobile game's end screen and a 3d hand of cards this video is sponsored by our google courses more on that at the end let's put the new tween system to use we're going to code a sprite so that when we click somewhere on the screen it rotates and moves to the mouse cursor using tweens so i've prepared a scene here with a sprite you can use any sprite like the project icon if you want and there's an empty script attached to it just to get started quickly and we're going to start by detecting mouse button presses for that we define the unhandled input function this allows you to listen to button presses and the first thing we need is to filter the kinds of events that we get because we're going to get keyboard presses and other things we can say if the event is an input event mouse button like so this allows you to check for the kind of event that you get and the event is pressed that way this will be true only if we are pressing one of the mouse buttons left mouse click right mouse click etc we're going to call a function something like move to mouse and we're going to define that function below so i define the function we're going to start by creating a tween object to do that you call the create tween function and on that we know object you can call function to create and start animations so i'll call tween dot tween property to tween the position of my sprite this function takes four arguments the first one is the object to animate in this case it's the sprite to which we attach the script so we use the self keyword next is the property that we need to put in quotes here i'm going to animate the global position of the sprite you'll see why in a second so in quotes i write global position and then you need to give the final value for the animation so yeah i'm going to call the function get global mouse position to get the position of the mouse in the game world and not only on the screen this is why we animate the global position of our sprite because this function works with global coordinates and the final argument is going to be the animation duration so we can set it to one second note to say a couple of things if you've used the previous tween node you don't need to give the starting value between a property the starting value will be the position of your sprite so if you want to change the starting point of an animation you can say something like global position equals back to 2.0 of course we want to animate from the current position so we don't need to add that extra line and with just that you can run the scene and when you click the sprite will move to where you clicked the animations automatically play you don't need to call a tween dot start like before it's done automatically for you it's a bit more convenient now we can do another thing that's pretty cool we can chain function calls when creating the tween to give the animations that we add afterwards default properties so one of these functions is called set trends for set transition and we can give it one of the transition types to change how the ship animates because right now the motion is not grey so i'm going to use a one like the quintic one and after that you want to call set ease to change where the transition applies ease in means transition will apply at the start of the animation so the ship will accelerate ease out means this will apply at the end of the animation so the ship will slow down as it reaches the target you can try ease out and run to see that now the ship starts very fast and it slows down as it reaches the target position pretty cool i'm going to use ease in out so it's going to accelerate and then slow down later and let's add another animation that runs parallel to this one and you'll see this feature is pretty cool we're going to turn the ship towards the target position so first we need to calculate the target rotation of the ship and in this case um we're going to do it like this uh we're going to start from the sprite we're going to start from its position we're going to get the direction to the global mouse position this is going to give us a vector that points from the ship towards where we clicked and we're going to call the angle function on that vector to get the corresponding angle in radians now my sprite is turned to point up by default so i'm i have to add pi divided by 2 to that angle to offset it by 90 degrees and align it with the mouse position and then i can use the target rotation to animate the rotation of my ship to do that i'm going to call a function on the tween the first function i'll call is parallel this is going to make the next animation that i make with train property parallel to the first one meaning they will play together so we can call tween property and there again we're going to animate the sprite we're going to animate its rotation property and the final value is going to be the target rotation i'll make the animation a bit shorter and note that because we called set transition and set ease when creating the tween these properties will also apply to our second animation you can run the game and click to see that the ship is now turning and moving towards the mouse now it's not perfect i don't recommend using that in your games you can see the rotation is off at times but this is just to illustrate how you can run two three animations simultaneously if you remove the call to the parallel function you will view your second animation so now if i click first the ship will move to the target location and then it will rotate this change in the system makes it so you don't have to calculate delays in every animation to cue them one after the other now they just queue naturally if you use tween nodes before you should see how the new twin system saves you a bit of code and is a bit more intuitive as well this example uses very similar code to what we just did to animate three elements sequentially and this is like what you see at the end of mobile games where you get gems or stalls or something like that when you beat a level okay so let's look at the code for this um first i wanted to show a little trick that i found neat when you know exactly which nodes you're going to animate you want to put them in an array typically and one way you can do that is you select the nodes in the scene dock and click and drag them onto the array inside the brackets and it's going to get the notes and add the commas for you it's pretty neat okay so we have a function and a major rectangles appearing that gets called when we click the button you can see that the first line is creating a tween like we did before we create the tween change transition and the easing and then we use a for loop we set the starting point for that gem and then we animate it we first animate the scale and then in parallel we animate the rotation the interesting thing is that because tweens automatically queue unless you call parallel on them with the loop we'll get six animations in total two per gem the scale and the rotation and with just that you get this end screen in just a couple of lines of code this last example is a bit more complex when i click the deck of card it generates a few cards right and a hand dynamically and when i uh click to get a new hand it discards the card and it's going to generate a new head you can see that the number of cards is randomly generated this example is more complex so i'm going to focus on the tween code note that it's free and open source and you'll find a link in the description you can see the same pattern at first when we call the create and animate cards function we first create a tween and then set the transition and then we set the easing then if there are cards on the board we iterate over them and we tween them we make them move out of the screen we generate a random number of cards and uh for each of these we create a new card instance the code looks like this it's a few lines to set up the card um then we calculate the target transform of the card that's when you see it fanning out in the hand the calculations for that are here i'll leave you to check the demo for more information and finally the tween code itself is relatively simple we first tween the card scale so it scales up from the deck then we in parallel we animate the x translation the x position for that right and notice how we call set transition on this line on this animation and this transition will only apply to the translation animation we define here and finally we cue another animation we animate the transform of the card from where it is after popping from the deck to where it should be in the hand and this will automatically animate the position rotation and scale of the card you can find a link to download this project on our website you'll find a link in the description below it contains many demos of the new features in godot 3.5 including the ones shown here this video and open source demo is sponsored by our courses if you're a beginner you will love learn to code from xero with godot it's a complete course to get started with game development with tons of lessons and cool interactive practices if you are more experienced then go to node essentials is for you it's the biggest knowledge base about all the things you can do with kudos notes with that be creative have fun and we'll see one another in the next one bye

Channel: GDQuest

Views: 37,651

Keywords:

Id: dPYRmzu0cgA

Length: 12min 26sec (746 seconds)

Published: Sat Aug 20 2022