Godot Tutorial -- Keyframe Animation using AnimationPlayer Video Lecture | Godot Game: Learn and Master - Game Development

hello this is Mike again from scratch
welcome back to our ongoing Godot
tutorial series today we are going to be
covering keyframe animation this is
actually building on our last tutorial
covering sprite animation which we
actually did programmatically as with
all of the tutorials in this series I'm
assuming you've read the previous or
watched the previous ones up to this
point in this case though it's mandatory
I'm actually going to build on the last
tutorial we worked on what you see in
front of you right now is the end result
of the previous tutorial it's an
animated sprite where the number of
frames set up for animation and then
using code this code specifically we we
animated that character this code worked
by every 20th of a second we move on to
the next frame of animation until we hit
the last frame then we go back to the
first and do it all over again now the
end result was this nice little walk
animation which works quite perfectly so
if you wanted to you could work
completely in code however there is a
very very comprehensive animation system
built into Godot and once you start
getting into more complex animations
it'll definitely be invaluable also as
you will see you can do a lot more than
just moving position or animating a
sprite so let's take a look at that
first thing we're gonna do is we're
gonna get rid of this existing code so
instead of all that we'll just do a pass
so now our code shouldn't really do
nada it's exactly what we want next up
we're gonna want to add another node to
our scene this key and critical node so
let's go to our root and we add an
animation player right there
add one of these to our world and that
is good so we now have an animation
player now we needs an animation you'll
notice with this selected we have a new
toolbar down here this is your timeline
so this can control going across the
range of your animation so eight seconds
at this point or zero seconds at this
point now what we need is an animation
and that can be created by pressing this
new button here this will create a new
animation for the animation player we
will call it walk cycle so and now we're
going to click this pencil icon over
here that bring up the animation editor
it's a little window right on top and
like I said we're going to work
with keyframes unfortunately do not know
the etymology of the word keyframe but
some oral sixes existed as long as
computer related animation has I
actually think it goes back to draw an
animation where they actually used to do
key frames of animation so basically
they would do specific scenes and then
someone else would come along and
interpolate the results in between in
computers it's much more profound
results what you do is you set key
frames of animation within your timeline
so what you're saying for example is at
the zero width frame I want this guy to
be here at the tenth frame I want him to
be here and at the twentieth frame I
want it to be here and then what the
computer does is interpolate the results
in between so it does a smooth
transition between those two states and
that is essentially how you do animation
so instead of having to animate every
single frame like if you've ever done
like a drawing at the corner of a book
and then you flip through your animation
your flip book style animation you had
to draw every single frame yourself it's
monotonous its time-consuming it's
irritating in this case you just do your
quote and quote keyframes and the
computer does the rest of the work for
you now it doesn't have to be animation
it can be just about anything if you've
done programming work in the past and
you've done something called a tween
tween is keyframed animation it's just a
programmatic version of it tween refers
to the in-between or as you can say in
between keyframes so a tween is the
thing that's doing that calculation
between two points well in this case in
animations case the software is doing it
all for you if that was all Greek to do
not worry it will all make sense in a
second when we demonstrate it if you
happen to be Greek the expression all
Greek to you probably means absolutely
nothing
so definitely ignore it in that case so
let's look at our first keyframe
animation first thing what we're gonna
do is we're gonna take this node right
here and we're gonna move it to say I
don't know here that's it that's all we
want to accomplish so first things first
you'll notice up here at the very very
top you have a new menu here so when
you've got your editor up and this will
set up a different menu for you you see
this handy little key thing that's
critically important you gotta use three
icons here location rotation and scale
now a keyframe for position can have up
to all three of those items keyframes so
basically it's saying store the
information for this translation
in this key frame so we can we can store
location we can store rotation and we
can touch you can store scaling as well
in this case we only want location so
it's the only one these are all toggle
button so if we wanted rotation as well
we can okay let's scale click it but we
only want to track location so we want
to start at the very beginning so we
almost always want to have at zero a
keyframe set so we'll go ahead and we'll
set the keyframe you just hit this key
and you'll get this little pop-up you're
saying create new track for property
transform forward slash position and
insert key and yes that's exactly what
we want to do so now if you look down
here we have our track of animation for
the transform4 slash POS value and we
have this little blue dot which is
actually a keyframe now you can have
multiple tracks or multiple concurrent
animations within a single animation
which is very cool and something we're
going to use in a second so now we want
to look at how do we set our next key
well this is going to be a very simple
animation sequence because we're just
going from point A to point B and
letting the computer figure out
everything in between so now let's just
move to point B yeah we'll call point B
say they are and now what we need to do
I did this wrong my bad
the timeline is very important so the
midnight process it's going to go back
because that's the only keyframe we got
so what we want to do is set it to the
end of our animation and then end it
there so we're going to make this walk
cycle takes a 2 seconds so we set our
length in seconds to 2 you'll notice
your timeline here now goes into to its
100% calculation and you can see your
scale here your upper axis is 0 to 2 now
this is controlled using this zoom
container so if you want to have more
detail or less detail you usually can so
let's zoom it a bit so we have this nice
in-depth overkilled view of them so now
we want to do is move to our very last
position in our timeline and we want to
create a new key so now that we're in
our last position let me update this
position over here and yeah that'll work
so that position right there and now we
do set another key so you'll see we now
have a blue dot for each key in the
sequence now you could go in here I'm
going to show you really quickly I could
do another key and seed there the
animation is actually all just showing
you the interpolation it's going to do
so we only have the two key set but
the computer is figuring out the
in-betweens for us that's the power
keyframe animation very quite cool so we
hit play and preview our animation like
so and head back so but one thing to
show you quickly I'll go somewhere in
the middle and I will insert another
keyframe right here and but you'll
notice you now have this other keyframe
now this is a little problematic UI wise
but you can left-click this keyframe
right here okay I got to turn that guy
off you left-click to select it and then
you can drag it and move it somewhere
else or you can also turn this guy right
on that this guy right here on and then
you can click it and you can edit the
value yourself you can also edit the
easing we won't cover that today but
that's basically how transitions work in
and out of this particular keyframe
we're gonna stick with linear for today
which basically it's going to be a
straight line or a very the progress
between the two keyframes is 100% linear
so they move at the same speed etc but
you can change that with this easing
value right here but the key thing is
you can change this
so we're keyframing the X&Y position I
could set hand set it to a different
value right here if I wished so to
directly edit keyframes you can do that
usually this guy right here
but for that guy turned off you'll see
this keyframe I can move it around and
it's selected in white as opposed to
blue when that is the case you can hit
delete and get rid of it so if you want
to manipulate keyframe so that's how you
go about doing so but that is our simple
animation now we've got one of two ways
to play this we have this animation now
we created it in our animation player
and it's called walk cycle now we want
when we start our application up we're
gonna want to go ahead and run this
animation the easiest way is this guy
now realistically you're not going to
use it very often because all this says
is when the scene loads up or when this
when this animation player technically
loads up play this animation so now if I
hit play there we go we got our
animation automatically occurring very
cool however or we want to loop it we
can turn looping on and play the same
thing and back to zero and around it
goes so we can very easily have this
animation start as soon as we start our
application
but truth is you're not going to do it
that way very often you're generally
going to do it programmatically and
programmatically is also equally easy
let's just we'll do it right in our
animation player and Whydah script for
that and you shouldn't play or dot GD
now we'll create that guy and in a ready
call we will just call play and then you
pass the name of your animation so the
same end result but chances are you're
probably going to start your animations
using using code as opposed to playing
them automatically when you start unless
of course you have something like an
animated title screen that literally you
want to play it as soon as you start
your app but as you can see doing it in
code it's very very simple very very
easy you just provide the name of the
the animation you used and you call the
play function of the animation player of
course you could call this by get node
animation player dot play somewhere in
your root node or wherever you want to
call the animation from as well so
that's the two ways you can go about
starting this guy's so you can set it as
an automatic or you doing a code so
let's on head on back to our animation
let's go back to 2d view so next thing
we wanted to is actually walk this isn't
a very convincing animation so far it's
not convincing at all actually now the
neat thing and here's where the power of
good dos animation system really starts
to shine and I'll show you something
very very very cool right now so we've
got our single track here updating the
position now what we want to do is
actually update the walking frame as we
go so we have 24 animation 24 frames of
animation that we're going through if we
want to update that - now if we go back
here we select our sprite with our
animation up and going you'll notice all
the sudden we've got this key icon
beside all of these properties just
about every property has a key beside it
that is because they can all be
keyframed and that is a powerful tool
let me just show you again we got our
very simple animation so we're at the
very very beginning we want to go ahead
and we'll set our key our initial frame
to 0
press enter and then we just hit this
key and we get this little puppet saying
create a new track for property frame
and a sort of key and say yes
now we'll go to our very last frame like
so hey what did you loop back very last
frame what so we're at 2 and then we
just want to go to our last frame just
23 or 24 24 and we'll set a key there so
we got our second set of keys like no
and let's see what happens nothing yeah
okay this is because I haven't set
something so select our frame transform
and you want to come in and drop this
guy down this is how your your
interpolation between points is going to
happen and we wanted to be continuous to
say it's kind of equivalent of saying
linear before I don't know why that
one's not set by default nobody you're
always going to want that setting but
that's what you want to do so now that
we've got that let's go ahead and press
play and there you go you've just
created your first keyframed animation
same end result but as you can see it's
pretty powerful you can animate anything
you want so if we wanted to go ahead and
set one more in here let's go to will
actually show you now let me show you
two things another thing you could do
we're using very simple settings we're
setting one key and one key or you can
also create keys in the middle here so
let's go to say this timeline if we
wanted to slow the walk down initially
so we didn't want to have as many steps
at this point instead of interpolating
it from 0 to 24 we could say 0 to say 3
and then 3 to 24 so let's insert a new
key here but we'll set the this one it's
slower so set this key so you see the
new cue is created so you can have
multiple keys in your animation and now
let's see the result of that so there
you go initially slow and then fast
coming out so you can have you don't
need to have this linear progress you
can have as many keys and you want to do
your transforms you could also have your
set waypoints so I could keep setting
keys for position and move it all around
the map etc
so truth the matter is I do want this
linear as opposed to like that so I will
just go ahead and delete that guy yeah
but as I said anything weird that the
key beside it can be over time animated
so let's add one more so we're at frame
0 now and let's go find opacity there
the opacity starts at 1 and let's keep
that yep we'll create a new one for that
and then about that far in we show
instead have somebody let's go 50%
opacity there press Enter set your next
key and then we'll go to the very end
and we'll set our opacity to zero like
so and now not only are you animating
and walking you're also fading to black
very very powerful you can animate the
hell out of anything you want it's a
very cool system and it's that easy to
use at the same time now that I stopped
this guy or a past the animation can
also just select it select the track you
want and click X and it's gone
but that's that's it that's that's all
that's involved in animation very very
cool there's a lot more here there's
stuff we're not seeing yet like let me
just drop down this tracks menu here you
can do duplications you can set the
transitions between them again this is
the same thing we were looking at before
the if I came in here in the edit mode
that's the same as the easing let's turn
that off but what it's really cool a
little confusing to use but let's add
one more track here and it's a call
function track and sometimes in your
animation you're gonna want to call back
to code and that's exactly what we've
just done we just created a new sequence
there's no there's no keys in it at all
but this is when this key is hit it's
going to go ahead and call the function
and it's going to call the function in
your root class which I don't actually
have one let's go ahead and create
script for our scene itself like so and
let's create a new function called
half way like so so we want to go ahead
and call this function now when we get
halfway through so now if we're saying
we got it do that selected make sure
that's our track just click this little
plus icon here and it'll add a keyframe
right there they're very beginning so
let's move that guy I don't know
halfway how long's two SEC's so one
second in so right there
now we wanna go to edit mode you'll edit
it and then enter value we give the name
of the function we want to call no
brackets like so so halfway there we are
going to call the function halfway and
that should do it
I've had some issues with this guy in
the past but now let's go ahead and play
there's our animation halfway girl
called halfway got called halfway got
called a very powerful way that you can
actually put you to basically program
whatever you want in your animation
system so you can put code in there that
gets called just like any other keyframe
so instead of changing a value over time
you're gonna give it calling each time
you hit a keyframe for a call func track
it's going to go ahead and call that
particular function the one other thing
to show you there let's go ahead and say
that's some parameter
here's STR and then space and a B you
can also I'm guessing you can guess at
this point
pass it parameters so if the first one
is a float of value 42 and the second
one is a string oh say there all right
so here's the same thing but now it's
being passed parameters and I put two
one missing bracket let's try that again
the I shouldn't have the quotes double
set of quotes
that's edit that out so as you see you
can easily pass parameters in with these
animations now another thing you're
thinking oh all you can do a lot of
programming here what if I want to do
something at the end of our animation we
could easily set a keyframe with a call
func at the end of your animation but
you're not gonna want to do that that's
kind of overkill because what you can do
with your animation set and let's go
back to our scene grab our animation
player you go to each events click the
event and you can have on animation
finished or when the animation changes
actually those are pretty much the only
two you're gonna use and those basically
you could have it so you can fire off an
event on your animation player when the
animation player changes the animation
it's currently playing or you can have
it set that when the current animation
plays finished so you could chew them up
this way using events of course you
could do with call function there's
nothing preventing you but that's
definitely another option so that's
essentially it right now we've just
created this one you can have multiple
obviously just keep pressing here and
keep adding more you can duplicate your
existing one so now we have two called
call walk cycle now let me show you
something very very cool before we move
on
let me go back to I guess before we
finish technically I'm going here and
I'm gonna grab our root node and I'm
gonna add a button to this scene and
we'll call that guy that all right so
let's add the text to our button let's
go with change me change me alright so
that was set let's put a script on this
guy call it change me button really come
up with a naming convention because I am
horrible about naming good old scripts
alright so here we got now a button that
we're going to do something really kind
of special with let's go on back let's
select our button let's wire up the
event for this sucker
I hear uh-huh button event pressed
connect to our button nekked yeah so we
now have our on button pressed event
let's get rid of all this junk what we
want to do is get our parent get our
node animation oops
animation come on there we go so we want
to get our animation player
now let's grab them let's grab reference
to that so when they press the button
we're gonna go ahead and grab our
animation player and now we're gonna
play around with it a bit we're gonna
change the key value we're actually
gonna programmatically grab this frame
here no no this one this position value
and we're gonna grab the second key and
we're gonna change where it's pointing
so you can see you can programmatically
alter these key values and change your
animation as a result so right here
first thing we knew obviously is our
animation so animation dot yet let's see
first we want to do is oh sorry track
animation dot yeah oh yeah animation we
got to tell it which one first
walk cycle you know what that's the one
I'm gonna grab a reference to so we
actually don't need the animation player
we just need the animation like so
so now animation and you've got your
tracks you can so you can get the number
of tracks you've got and then once
you've got that you can use all the it's
all index based so we're going to use
these track functions and we're going to
track get key value and we're going to
use so we want yeah animation track is 0
its 0 base so this would be 0 this would
be 1 so we want to get 0 there are
functions to get the the index of
something by its name so we could search
for it by this name or whatever but
we're just gonna cheat a bit so we want
alright animation come on am i running
and I'm editors being stupid on me
alright zero and then we want to get the
the index of the keyframe we want so
this is 0 this is 1 we want to change
this 1 so 1 all right come on 1 so that
will return the value of the key there
so it's actually not even what I want
but let me show you now that we're there
so we'll just print that out so right
now let's go ahead and play this and
print you'll see the value is 318 and
647 it's always that because that is the
end target that is the position right
here of that keyframe so that is how you
get that but we actually want to do was
I'll leave that in there for now so
animation dot track set key value so
that's kind of what I did wrong
so it's track 0 keyframe 1 and now we
send in the new value our value there is
a vector - so we're gonna passing that
vector 2 and we will now instead send it
to 400 and 400 for absolutely no reason
so let's just go ahead and that
stop let's play and I have an error
probably missing a parenthesis I am and
done all right so there's our normal
animation running and anytime I want I
can go ahead and press change me and
that keyframe is now different
so programmatically you can do just
about anything you want with this system
at the very beginning we have you can
call functions basically at word
keyframes are you can have it call back
on you when it or you can use the events
for when it changes or when it hits the
end or as you see right here you can
actually programatically grab the
animations and muck with the tracks or
the key values themselves and update
them as you go so you can do a ton here
pretty much anything you want but you
can have these nice editing tools you
can override them as you just saw so
that's about it that's all I'm going to
cover today so I'm gonna do a quick
recap now of everything we just looked
at we came in we took our existing
animation for instead of being crowed
based and we instead added this
animation player this animation player
class then when it's selected brought up
this guy down here we added a new
animation called walk cycle using this
button right here and then hit the
editing tools to bring up this guy now
it's a matter of it adds these new
options so you select the note that you
want to animate or the yeah so the node
that you want to animate here and you
can do location rotation and scaling
sets right here so just wherever you
want to change you set a key here your
timeline is down here so where you want
to change it to you go to that location
and you can set another key there very
common to set key at the very beginning
and very end of your timeline you're
gonna do that a lot so that is how you
can edit various keyframes you can have
as many as you want in between you can
change the way the interpolation happens
between them you can change the length
of your animation right here or the
stepping amount between and between the
frames the one thing you're gonna
probably run into is this guy right here
needs to be set to continuous unless of
course you have it where each keyframe
is kind of a standalone thing so if
you're gonna like jump without any
transitions between them which case you
would use discrete instead but generally
you're what you're going to want to
because that's where the magic happens
that's what causes the inbetweening
between the two keyframes to happen so
you can once you've got your keyframe
set you can toggle this button on to
make it so that you can select and edit
the value in line so that's just select
I could drag it and move it around now
or I click this and now I can click it
and edit the values and then finally we
looked at in your multiple tracks you
could come in here a new connection or
add a function called track you add the
function in you create a keyframe by
adding this hit kidding this Plus adds a
new keyframe in the time line somewhere
hey that guy just did yeah turn that
editing off so now I can position it and
then you can now edit that guy put in
the name of the function you wish to
call pass in any parameters you wish and
you are off to the races or I can turn
that guy back to select mode and delete
it that's about it for there on top of
that then you've got in your animation
player you'll have these events
available to you for animation changed
and finished also renamed I don't know
what one area that would ever call or
entering exit the tree to close out of
there or you can directly encode like
what we just saw right here you can get
the animation player it's just a node
looks like any other I get the animation
by passing in its name and then you can
sit there and you can muck with the
track values or the keyframes in those
tracks as much as you wish and
essentially that is animation in Godot
as you can see by these these pluses or
so these he's available within
properties just about everything with a
value that changes can be keyframed so
the sky is the limit on what you can
actually key frame within a Godot and as
you can see from the programmatic things
being exposed there is a lot you can
also do dynamically you can reorder it
and really cover on this before but you
can reorder the position here by using
these plus and minus arrows or you can
get rid of them by clicking the X here
that's it I hope you enjoyed that that
was keyframe animation in Godot and as
you saw it's an it's an alternative to
the programmatic approach we took with
our sprite animation I very powerful
very very very feature heavy I hope you
enjoyed that thank you very much bye