Hello and welcome to another episode in the Godot Basics tutorial series, Godot Tutorials is not affiliated with or sponsored by Godot Game Engine. In this episode, we will be taking a look at the animated Sprite class. The animated Sprite class is a sprite node that can use multiple textures for animation, basically Sprite animation. The animated Sprite class inherits from no 2D, ultimately inheriting from the node class. Basically, animated Sprite does have access to lifecycle scripts. The animated Sprite class does have a signal called animation finished and it is emitted when the animation plays the last frame. If the animation is looping, this signal is emitted every time the last frame is drawn. In this episode, we will not be taking a look at signals. The animated Sprite comes with three methods. The first method is called is playing and it just returns back a boolean value. The second method, and in my opinion the most important method is the play method. It takes in one mandatory argument, the second argument being optional and all it does is it plays the animation you pass into the first argument. And that name will depend on the Sprite frames resource that you pass into your animated Sprite class, which we will be taking a look at later. Now, the second argument is false by default. However, if you set this value to true, what you will do is play your animation backwards in reverse.

The third method is called STUP and all it does is it stops your animation from playing. The animated Sprite comes with properties as well. The first and most important property is called Frames, and it is of the sprite frames resource data type. Without a Sprite frames resource, you will not be able to play animations through the animated Sprite class. The second property is called PLINT, which is a boolean data type and the last property is called Speed Scale. Let's go ahead and take a look at the Sprite frame resource class. The Sprite frame resource class is just basically a library of sprites to be used inside of your animated Sprite class. The Sprite frame resource contains frames and animation data for playback, and of course, it inherits from the resource class. The Sprite frame resource class comes with one property called Brame's, which is just an array. However, on top of that, the Sprite frame resource class comes with several methods. The most important ones you'll find when starting out on your journey are the following. Add animation at frame set animation loop and set animation speed. When you want to create a Sprite frame resource, you first need to create an animation name. The name you provide inside of the add animation method is what will be used inside of your animated Sprite class. Now once you've added an animation, you can then start adding frames to that specific animation through the add frame method.

It takes in two mandatory arguments, the first being the animation name you created through the animation method, which will be in the first argument. And then the second argument is your texture frame, which is just basically your image file. The third argument will be the position you would like your texture frame to be at by default. This value is set to negative one, which means you want it appended at the end of your array for your specific animation, and it's good to just leave it at its default value. The third method in this animation loop, for example, you may want your animation to continuously loop and so you use the animation loop method, the first argument being the animation name you created through the add animation method. The second argument will be a bullion value. If set to true, you want your animation to loop if sets to false, you want your animation to run once. And then the last method is called animation speed. It takes in the animation name you provided again through the add animation method. And the second value is the value at which you would like your animation to play out. Basically how many frames per second would you like your animation to play? So again, to recap the order in which you would need to create your Sprite frame resource, first you must use the add animation method, then you need to add your frames. Next, you can choose several options. You can choose to set a loop and you can choose to set a speed. The two most important methods, again, are add animation and add frame.

Let's go ahead and take a look at some code. If you take a. Over here in the scene tab, you'll see we have a note to Code Root. First, we need to create our animated sprite node. And so if we type in here, we can find animated Sprite. We go ahead, we click it. And now it it appears in the scene tab you'll notice that there's an error and it's just letting you know that there are no Sprite frame resource attached to the animated Sprite to go ahead and alleviate this error. You go ahead into the inspector tab. With the animated Sprite highlighted under the frames, you'll notice it's empty. You can go ahead and click that. And I have two options because in this example, we've already created the resource file and Godot is smart enough to pick it up. However, in this case, by default, you should see available the new Sprite frames option. And so let's go ahead and click that. And if you click it again and you look towards the bottom of the Godot application, you'll see a window pops up called Sprite Frames.

And this is where you go ahead and edit your animations to the left. Here we can see the names of our animation. We are given one animation name called Default. Over here in this icon with the plus sign symbol. We can press that and creating new animation. And of course, to rename it, you can in fact, just click on it and just name it whatever you want. In this case, I'm just going to call it display. And now after I've created that, we have two different animations, one called default, one called display. If you go into the inspector type again and over here in the animation property, you can see that it changes its value to display, which is what we have in the Sprite frames tab. And of course, we have our default value because we have not deleted that. Now, if you want to delete an animation, you can just go ahead and highlight the animation you want. In this case, I'm going to highlight default. And over here with the trash can symbol, you can go ahead and delete that animation. And so now all we have is an animation called display to add animation frames. You can just simply click and drag images that are in your file system tab. So as you can see here in filesystems, I have a folder called Images and we have five different images. One, two, three, four, five. And these represent our animation. So I'm just going to go ahead and click and drag them onto the Sprite frames tab. And as you can see here, we have our five images are five individual frames and the first one starts at index position zero.

Now, in order to run this, you can go ahead and press the play button. However, you could also press the checkmark next to the plane property in order to play the animation. Nothing's going to run because over here you can see our animation property is still highlighted to default, even though we deleted it. And so just keep that in mind when editing your animated Sprite and Sprite frames. So I'm going to go ahead and move this into the middle and notice that there's nothing playing or nothing showing because our animation set to default when in fact it should be set to display. So I'm going to go ahead and press display. And now you can see the image appear on the screen. Now, if we come back to the playing property and we check market to true, you can see on the screen how it runs, but it's running really fast. And that's because our speed over here in the bottom left of our Sprite Frames tab, you can see that it's set to five, basically five frames per second. And so if we would like to change it to one frame per second, we can just edit that value. Go ahead and press playing. And you can see that our brains change.

Once per second, on top of the speed, we can also change whether our animation loops or not through the toggle switch. Now, I'm going to go ahead and delete everything and we're going to look at how to do this through code. So if you look into our tab again, you'll see an error. And that's because in the inspector tab, I went ahead and I deleted the frames. The frames property is empty and that's because we're going to handle everything through code. So I have two scripts, an animated Sprite script and a Sprite frame script that just returns back a resource value. So as you can see here in the scene tab, I've attached a script for animated Sprite. And if we look at the script, you can see that it extends from the animated Sprite class. So we get all the properties and methods available to us from the animated Sprite class. I have one virtual method, the ready virtual method. And the first variable is our instant's object. And we are creating a new Sprite frame resource instant's object from that instance object. I have a method called get frames that returns back our frame resource. So let's go ahead and take a look at these Sprite frames, resource class. So in our frame resource class, as you can see here, we extend from Sprite frames. So we have the property and methods available to us from that resource class. I gave it the class name called Sprite Frame Resource. I have a constant value called name and we give it the value play numbers and that is the name we will give our animation. I have five variables that hold basically are images that we're going to pass into the frame method.

These are the same images you saw before. Image one, two, three, four and five. In the get frames function, we return back a Sprite frames data type. Now, if you look here, all we really do is return back ourselves using this keyword. And that's because our class is, in fact, the Sprite frames class a resource class. Now, as you can see here, we do have the four methods we went over in the slide show. First, we use the add animation method. We give it a name, then we add our frames because we have five images we need to call the add frame method five times. The first argument is the name. The second argument is the image. The third optional argument is where we want our image to be positioned in the array. And because we don't pass in a third argument, it will append itself to the end of the array. And so you can imagine here, as long as we order it correctly in this case, we add image one first, then image to second, image three, third image for fourth, an image five fifth. We will get them in the order of one, two, three, four and five. Lastly, we set our optional settings. In this case, we set the animation to loop by passing in the true value as the second argument. The first argument, again, being the name of the animation you wish to apply this setting to. Then we set the animation speed. The first argument being, again, the animation name you'd like to set this setting for. The second argument is how many frames per second you would like to play given through a float value. In this case, we say we would like to play one image per second or one frame per second.

Now, if we go back to the animated Sprite script, you can see that through the get frames method. We do, in fact, return back a Sprite frames data type. And lastly, we want to get the name from our instance object property called name. And so you can see here we call the instance object variable, followed by the notation followed by the name property. And we get back the name, which in this case is called play numbers. Now, in order to get our animated Sprite to run, we must first load that frame resource and to load that frame resource. We use the set sprite frames method, which takes in one argument, which is your frame resource or your Sprite frames resource file. And so in this case, you can see we peson the variable called Frame Resource, which holds our animation name called Play Numbers and the five frames. And then lastly, in order to play it, we use the play method followed by name notice. We omit the second argument, which means that we would like to play our animation one through five. And so if you go ahead and press play, you'll see that our images are in fact running one image per second. Now, one cool thing is if we go ahead and give this value true in the play method and we were to play notice how we start from five and we go backwards. So that's something you can do here through code. 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. Thank you for clicking the subscribe button. I'm going to go ahead and upload this onto GitHub, so please feel free to play around with the animated Sprite class and the Sprite. Raimes resource class, and I look forward to seeing you in the next episode. Have an amazing day.