Sprites as Resources and Animations
When making a 2D game, game developers tend to use sprites (2D illustrations of any kind) to portray characters and worlds. Given this, knowing how to use and implement them into your own game is generally a good skill to have.
Sprites can be made in any digital art software, and if this is your first time working with them, simplistic pixel art is a decent option to go for. If you don't have an art software in mind, using https://www.piskelapp.com/ may prove helpful for this tutorial, and you can also use sprites you find online, given you have permission and give proper credit. When searching for sprites, you may find "sprite sheets" instead, which we will get to later.
Once you download a sprite, you can simply drag it into Godot, given it is a supported file type (jpgs and pngs will do just fine). You can use unsupported file types as well, but you would have to navigate through some extra menus if you wanted to do that. I would recommend sticking with supported files for now, and making a dedicated folder for sprites is always a good idea. For demonstrating purposes, I will be using this png of a mug throughout this tutorial that I made a while back.
IMPORTANT: If at any point during this tutorial your sprite comes out blurry, this is likely due to an issue with resolution. Most times, the way you can solve this is by navigating to Project -> Project Settings -> Rendering -> Textures -> Default Texture Filter, and swapping it to "Nearest"
In Godot, sprites are resources, which just means they are non-node objects that nodes use. This means you have to implement them a little bit differently, although it isn't really that hard. Lets start in a barebones 2D project, and make a quick Sprite2D. Once that is set up, drag in whatever sprites you chose and put them into an art folder.
From here, click in the menu next to "Texture," select "Load," and click on the sprite that you imported. You should see it now where you put the Sprite2D.
This is the first method to loading a resource. Alternatively, you can implement it in code via the "load" or "preload" functions.
func _ready():
# Godot loads the resource at compile-time
var imported_resource = preload("res://sprite.png")
get_node("sprite").texture = imported_resource
Godot handles resource management for you, so you don't have to worry about memory space and the shenanigans around it.
That wraps up the basic implementation of resources and sprite textures, but if you want to make you game look a little crisper, I would highly recommend learning a bit of Godot animation.
Animation is a big scary word, but luckily Godot makes implementing it relatively easy. To make proper animations using sprites, I would highly recommend using sprite sheets, which are collections of multiple animation frames in one image file. For the purposes of demonstration, I will be using a sprite sheet version of that mug png I used earlier.
If you want to make you own sprite sheet, the website I linked earlier may prove helpful, as it allows you to see what your sprite sheet would look like animated without having to test it in Godot.
To showcase how to use sprite sheets for animation, go back to the project you made and load the sprite sheet instead of the singular sprite into the Sprite2D.
You might notice that it has loaded the ENTIRE sprite sheet instead of just one individual sprite. We can fix this through a process called "slicing," which is basically telling Godot how many sprites there are within the sheet, so it can divide them. You can do this by clicking on the "animation" menu within the Sprite2D object, in which it will ask for how many horizontal and vertical frames (contextual name for sprites) the sprite sheet has. For my mug sprite sheet, there is 1 vertical frame and 8 horizontal.
Now that we have divided the sprite sheet into frames, we can choose which frame to showcase. Change the frame value to any whole number within range, with the increasing order being left -> right, top -> down, just to get a feel for it.
Now that we have the sprite sheet up and running, we have to figure out how to get it animated! First, we need to add a new node, called "AnimationPlayer." With that added to the project, a new menu should be brought up where you can make animations. In this menu, click on "Animation," then "New," and give it a name.
Here, you can click on the "+" next to "Add Track," then "Property Track," then your Sprite2D, and finally "frame," where you can begin adding keyframes. If you have never done animation before, keyframes are just indicators of what sprite you want to display at the given time within the animation. Basically, just put the keyframes in order of when you want them to happen. At this point, your project should look like this.
From here, the world is your oyster. If you right click on the track, you can add "keys" (keyframes) onto the track. In the inspector menu, you can change the "Value" of these keys, which is just the frame you want them to showcase. For my animation, I added in 8 keys, each with a value 1 index larger than the last, to cycle through my sprite sheet.
There is even more customization options that you can mess around with. For example, on the top right of the animation menu, you can change the total amount of time your animation makes, and you can make it loop!
Alrighty, so this is cool, but can I activate animations in the code? Yep, and pretty easily actually, it literally just takes one line of code:
$AnimationPlayer.play("name you gave your animation")
Given this, you can cycle between different animations for different actions (like moving left vs moving right, or getting damaged), and there is even more you can explore than just this. If you can call back to when you first set up the track, I had you choose the "frame" property, but you could realistically choose to animate ANY property of your node, including position, so have fun with it!