Godot Tutorial -- Sprite Animation Video Lecture | Godot Game: Learn and Master - Game Development

hello this is Mike again from scratch
welcome back
Godot tutorial today we're going to be
covering animatable sprites or sprite
animation this actually isn't the way
you would animate a sprite in your game
most likely it'll work it's a way of
doing it but this is a way of creating
animatable sprites don't worry I'll
cover exactly what I'm talking about
there at the very end and in the next
tutorial we'll be covering animation
specifically which is how you would
probably go about doing things but in
the meantime we are going to be looking
at creating an animated sprite that is a
sprite with multiple frames of graphics
available to give you the ability to do
like a flipbook style animation it's
gonna be a fairly short tutorial the
topic isn't going to take it an
incredibly long time to cover once again
there is a text-based version of this
it's already live and there's also a
link to all of the the PNG files I use
for this examples if you want to follow
along exactly as I am go to game from
scratch comm and look up the tutorial
here for a sprite animation in Godot
they are and you can get the assets
we're using as well as the code example
that we're about to create okay without
further ado let me go ahead now just
gonna create a new new project here I
call it sprite animation and create load
that up so I'm gonna get the traditional
work out of the way so first got a hey
you bugger alright so let's make a node
as our root node great that we shall
save our scene you seen is a good name
and we shall set it as the default
I imagine you guys can do this in your
sleep by this point if you can't once
again remind you that all of these
tutorials assume you have seen the
previous tutorial so I do not recover
anything I have done so if I do
something in this tutorial that makes
you go the hell did he just do it was
probably covered in a previous tutorial
so make sure you go back through them
first if it isn't if I cover something
and I don't or if I do something but I
don't cover it I haven't covered in the
past please let me know in the comments
and I'll make sure that I uh I address
it somewhat so there we got our scene
set up now let's go ahead and close this
so all we're really basically going to
do this time is create this animatable
sprite and it's a node it's actually
called and I made it sprite that's right
here I'll just go ahead and add once
your scene
it's positioned just like any other note
so it has positional information or
spatial information now the key thing is
this guy is this your frames collection
this is where each individual frame of
animation comes from in this case I'm
actually going to use a sequence of
animations that I've already created in
my app folder as you can see right here
it's just sequence of images go together
to make a walk cycle and that's
basically it
so what we're going to do is we going to
go ahead and we're going to add all of
these images into our project and we do
that with import 2d texture now if you
want it of course you could do this with
a sprite sheet probably would do this
for the sprite sheet but in this case
I'm just going to use the individual
frames because that's what I already
have so let's navigate to them there as
I said in my temp directories I just
grabbed the mod nice thing is you can
shift-click grab select multiple and
just go ahead and open them default
settings are fine we'll go ahead and
we'll make a folder called frames select
the route create folder focus rhymes and
we'll put them there choose now import
all right so if we go check our file
system you will see we now have te X
file for each and every frame we just
created so now let's head on back we got
our node will go to inspector and I mean
it's right selected so we go to that
frame setting we drop it down and we do
a new sprite frames so basically frames
is a collection of three frames and now
let's go ahead and edit those it brings
up a separate editor as you can see over
here it's it's just for doing a sequence
of frames of animation and you just do
an open go into our frames folder and
let's select all of them now the frame
is going to be done in the order that
they're loaded if you need to move them
around you can move them up and down in
sequence in case yours aren't organized
like mine were fortunately my frames
were actually in the same order that
they're animated but if you actually
need to move them you can up-and-down
did I just screw that one up
I did so let's move that back but if you
need to rearrange them you can if you
need to add more at the beginning or the
end or whatever or after before after
the currently selected you can but
that's about the extent of it
you can grab a frame if you wish
although the frames of our animation are
in here starting from zero and going to
24 as I had 25 frames total you could
select an individual one click X to get
rid of it that's about the extent of it
and once you're done here let's just
switch on back to our scene pick our
animated sprite and there you go you can
see it automatically grabbed out the
first frame now this is actually set by
this value so if you'd rather have it be
the fourth frame you can start at the
fourth frame if you wish but we now have
an animatable sprite and that's kind of
cool we can go ahead now and animate
this guy that's going to involve just a
simple script let's go ahead and attach
that to this we shall call it
let's give it a path put it in the root
and we shall call it and I made it
sprite script dot good run that and go
ahead and create get rid of all this
junk and we're going to do this in the
process so on tick so we set process as
true like so and obviously we need to
implement it so process takes Delta as a
parameter and now our logic our script
logic is going to be fairly simple here
first we're going to actually need a
variable up here for the amount of time
that's elapsed set it off to zero to
start like so and now what we're going
to do is each frame we implement our
elapsed time
oh yeah no plus equals operators equals
temp elapsed plus Delta so add the
amount of time that's elapsed since the
last call to Tempe elapsed and what
we're going to do is if temp elapsed
it's greater than tenth of a second then
we're going to go ahead and
get the frame this gets the currently
displayed frame of animation and we
check to see if it is it by though you
don't need to do that self it's a it's a
habit of mine we have explained that a
few times I don't know rely to do it to
be honest it's completely not needed
especially now that the co completion is
a lot better in Godot you don't need to
do these things you used to have to so
it does a much better job of resolving
now this mouse over seems to be stuck
there we go
zero base so we got to take one away
from that so basically we're checking to
see if the current frame is the last
frame and if it is we loop back to zero
so set frame to zero otherwise we now
want to self that set frame ads get
frame +1 so logic here is we get the
current frame that we're at and we're
adding 1 to it so basically frame plus
plus it's our logic and either way at
the
our outer live so if a tenth of a second
has the elapsed we want to start our
counter over again like so that's it so
once again we come in each time our
frame tix we add the amount of time
elapsed since the last tick to our
temple elapsed variable if we're if with
more than a tenth of a second has
elapsed we move on to the next frame oh
sorry if more than a tenth of a second
check happens we check to see if we're
at our last frame if it is we loop our
animation back to the beginning
otherwise we move on to the next frame
and we just simply reset our counter so
we'll go ahead and let's just assume
this work so I'll go ahead so I'll save
this I believe I said everything all up
so I should just now be able to play it
and have an error what did I do
I didn't if out okay try this again
there we go and as you can see an
animated sprite app that's all there is
to it make that a little bit more
visible for you so let's go on back to
our sprite object so as you can see each
individual frame of animation is
collected in this frames thing and this
frame value is the currently run frame
however you can also you control the
animated sprite as one entity so for
example if we want to scale it or
position it so let's scale it to three
times this applies to all of the frames
of animation not just one you can't
actually control the frames themselves
there are just source images so you
still treat an animate sprite as one
entity so its position its rotation its
scale etc is all done for what and that
that controls all of the frames that
exist within this animation so you go
now you can see a little bit bigger and
we'll go ahead and play that and there
you go so if we want to to increment the
speed obviously you come back into our
script and we could turn this into
twentieth of a second instead and we're
going to move faster and obviously we're
walking on the spot this is not the belt
and don't know if you really wanted to
you could add that logic in here as well
so each tick 0.5 and you say set the
shin goes get session dot X I thought I
don't know why that didn't complete this
one and get position dot y so go ahead
and run that and my error occurs what
did I do wrong set position skip
position X plus 1 get position dot Y
that position in base the data expected
1 oh yeah that's my bad belief it's a
vector 2 and let's close that out all
right and as you're seeing
we're also solute moving I guess one is
not sufficient let's go with three and
there you go so you've actually got
movement going with your animation as
well so you don't just have to walk on
the spot obviously now this is an option
this is a way you can do your sprite
animation if you want to keep it really
simple
this is definitely an option now using
the animated sprite if you have a multi
frame sprite animation exactly what we
do it is the class you're going to want
to use the only thing you're probably
gonna want to do differently is the way
you do animation this method this thing
I'm doing right here
Godot has a much much much more elegant
animation system built right in
multi-channel multi-layer keyframed
animations from hell and we're going to
see that next so this if you want to
keep it simple this option works you
could do it entirely in code with this
type of logic and as you did see it uh
it does what you want it does work this
is a frame rate independent animation
going on so you can go the code route
but there is a much much much more
elegant animation system that we're
going to see short
so stay tuned for the next tutorial for
specifically animating and it's not just
sprite it's animating just about
everything in Godot they've done a
really cool job so I hope you enjoy that
one but this was it I'll give you a
quick recap of exactly what we just
covered so let me just shut that guy
down so basically you if you want to
have multiple frames of animation you
come in you create an animated sprite
node animated sprite note has a property
called frames frames is a collection of
sprite frames we just go ahead and just
make a new one and then edit it brings
up the spray frame editor you load in
your individual sprite frames to use and
then kind of done to be honest you've
got a set of properties on here that the
key one is frame which is the current
index of the frame and then we go over
to our script yeah we really wish they
made exiting of these editors cleaner or
that if there was a closed editor thing
because as it stands now this whole I me
over here selecting out and then
switching over thing is irritating so I
hope they fix that soon but anyways go
into scripts what we're gonna do is on
the process we get the current frame
then we check to see if it is past the
total length of frames if so we roll
back by calling set frame on the zeroth
frame otherwise we set frame to the next
frame in the collection get frame
returns a number that currently
represents the index of the current
frame you're dealing with that's it it's
a very simple straightforward process
so sprite based animation in Godot is
incredibly incredibly simple now you can
do much more complex animation so stay
tuned we'll be covering that shortly
thanks very much