In this video we'll animate the gem.
We'll create a cycle where it moves up and down
and then we'll create the animation for when the player picks it up.
Before we used the Inspector on the right
and used those key items icons to create keyframes,
or did that in the animation editor directly.
This time we're going to use the shortcuts in the Toolbar.
Those are shortcuts to quickly key the transforms of your nodes,
the position, rotation and scale.
You can see you have a key icon to create key frames for the buttons
that are toggled up there.
Let's get started with the gem.
Click the location icon.
It should be the only one that's blue.
You can click the others to toggle them.
Then ensure that you have the pickup gem selected
and press the Insert key.
It's going to offer to create tracks for the position of the gem.
You can click create and see the first keyframe appear in here.
Now we're going to lengthen the animation,
so on the right we're going to set it to 2 seconds
so that the bouncing animation doesn't go too fast for the gem.
We'll also click the loop icon to make the animation loop.
In the bottom right you can increase the Zoom level
by dragging the slider to the right.
Place the time cursor around the middle of the animation,
move the gem up a little bit
and then you don't even have to go click up there,
you can just press the Insert key.
This is the shortcut to quickly insert a key
for the properties that are toggled on up there.
Then you can click and drag on the animation timeline
to see the gem move up and it will automatically
move back down to the start position.
We don't have to add more keyframes in there.
If you play with Shift + D you'll see it move up, down.
It doesn't look great because the transition is linear at the moment,
but before we fix it we're going to animate the shadow circle.
For the shadow circle we go to the toolbar,
turn off the location and turn on the scale
because it's the scale that we want to animate.
We'll place the time cursor at the start
and press Insert to create our first keyframe.
Then drag the time cursor to one second
and we're to scale it down.
You can use the select tool and Alt, click and drag to do that,
and use the Shift key to constrain
the scale to be uniform and then press Insert
and we'll insert a keyframe.
Now you can press Shift + D to see the animation.
It doesn't look too great at the moment because of that linear transition.
To improve it first I'm going to hide the collision shape 2D
to see my scene a little better.
Then I'm going to select the first key frames
for both the scale and the position.
So I click on the position keyframe here on the left
and then shift click on the scale keyframe.
I'm going to pull the easing curve to the left
so that the gem goes up quickly
and slows down and falls back down and accelerates.
It's going to make it bounce, you will see.
Press Shift + D, you can see it goes up a bit fast and then slows down
as it reaches its highest position.
Similarly, we're going to select the next two key frames
and pull the easing curve to the right.
This will make it go back down slowly
and then accelerate as it reaches the start keyframe.
You can then press Shift + D to see the animation
and see that this time the gem bounces a bit better.
We can do one last thing for this gem animation,
it's click the Autoplay unload button.
That way the animation will play automatically
at the start of the game.
Next, we'll create the destroy animation.
Go to the animation menu and create a new animation
that we'll name destroy.
For this one, we want to scale the gem
disappearing like this
and same thing for the shadow,
we're going to squash it until it has no scale.
Then we'll call the queue free function on our pickup so that it gets destroyed,
removed from the game entirely.
We'll start by keying the scale of both the pickup gem and the shadow circle.
Select the two sprites and press the Insert key
to create the two tracks simultaneously.
We're going to start at the full scale and then around .5 seconds
we're going to set both of their scales to zero.
We'll go to the Inspector, to the Transform tab
and set the scale to zero for the both of them.
This is going to scale them respectively, down to zero.
In the Inspector, when you select multiple nodes
that have the same properties
and you change that property, it affects all selected nodes.
Then press the Enter key to create the two scale keys.
Then you can click and drag to see the nodes disappear.
Like before the transition, the linear one is not great,
so we're going to make it accelerate.
Click and drag to select the first two keyframes
and we're going to pull the easing curve,
let's try in both directions.
We'll start by making it slow down.
This is not bad.
Then we'll try to make it accelerate.
Honestly, both can work.
You can see this one has a bit of oomph to it,
while the other feels good as well.
I think I prefer pulling the curve to the right,
having it accelerate like go into a void a bit quickly like so.
All right, that's our animation done,
well, not quite.
We need to call the queue free function on the node.
As we saw before we can do that from the animation.
Click the add track button in the animation editor
and select call method track.
It's going to call a function on the note of our choice.
We'll call it on the Area2D that will really need to rename.
Click okay in there
and then right click in the new function track,
select insert key and we're going to call
queue free in there.
There you go.
That's our animation done.
The last thing we want to do is perhaps shorten the animation
because there's no point having this empty bit of the timeline.
Click in the time field on the right of the animation interface
and press .5 to shorten the animation to 0.5 seconds.
The last thing we need to do is rename the area node.
Let's double click it and rename it to pick up.
An interesting thing you'll see if you reselect the animation player
is that name updates in the animation editor.
It automatically knows when you rename a node,
it's going to keep track of that in your animation as well.
There's one last thing that I want to point out with animations
saying that we destroy animation and then we go back to idle
and the gem is invisible.
Why is that?
Because we don't have a scale animation track in there.
In Godot when you play an animation,
you are directly changing the properties of the nodes
that you are animating.
If you don't have some tracks in some of the animations,
well, you can end up in this situation
where the scale of the gem stays where it was in the destroy animation.
It's not a problem for us because when we play destroy in the game,
we will free the gem,
so it will get removed from the game and the computer's memory entirely.
However, this can be inconvenient in the editor.
The one thing you can do is go to this reset animation,
this is a zero length animation that Godot generates for you
and stores the starting state of your nodes,
so that when you automate them anytime you can go back
to the reset animation and we'll reset the scene to its defaults.
With that in the next part we will code the ghost pickup.