Sprite sheet Mastery in Godot: Learn to Handle Every Type Like a Pro

Welcome to our comprehensive tutorial on using sprite sheets in Godot game engine. In this video, we'll cover all the different types of sprite sheets you'll find on the internet, including splitted sprites, single sprite sheets, uneven items, and defective sprite sheets. 

Whether you're a beginner or an experienced developer, this video will help you become an expert in working with sprite sheets in Godot game engine. So, don't miss out and watch this video till the end to learn how to use sprite sheets like a pro and improve your Godot game development skills.

Video Tutorial

Text Version of Video

Split sprites

Let's start with the easy one. The first type of sprite sheet you'll come across is "Splitted sprites". 

These sprite sheets come with separate images for each frame, like this walking animation with 6 images. 

To use them, all you have to do is add an AnimatedSprite node. Then, in the inspector panel, you'll find a "frame" option. Create a new spriteFrame and open the spriteFrame panel. You can set a name for your animation by double-clicking here, and then just drag and drop all the images you have. 

Now, just click on your AnimatedSprite node and in the inspector select the animation you just created and then turn on playing.

Single sprite sheet

Now, let's move on to the second type of sprite sheet you'll often encounter: the "single sprite sheet." 

These sprite sheets come with all the animation frames as a single PNG file but don't worry, you won't have to use a regular sprite node to split the image and then add an animation player to cycle through different frames.

Instead, I'll show you an efficient way to do that in AnimatedSprite node. This time, instead of drag and dropping the image, you'll click on this icon that says "add frames from a sprite sheet.

 Then, select your sprite sheet, and in the top, specify how many vertical and horizontal frames your sprite sheet contains.

In this sprite sheet, there are 8 vertical and horizontal frames. If you only want to use specific frames from the sprite sheet, you can select them manually But, if you want to use all the frames, just press this button and finally click "ADD". 

Now, you have all the individual frames, and if you want you can increase the animation speed from here or from the inspector. Just turn on playing, and you have your beautiful animation.

Uneven items

The third kind of sprite sheet is "Uneven items." 

These sprite sheets contain items of different sizes. To get a particular item from the entire sprite sheet, we'll be using a regular sprite node.

So, just add your sprite in the texture property, and in the region section, enable it. Now, in the bottom, you'll see a new TextureRegion tab, open it and in the top, set the snap mode to "auto-slice," and this will detect and break the different images present in the sprite sheet. 

You can now select whatever image you want to use but, keep in mind that this isn't always accurate, as you can see in this example where it failed to detect and split these bottles. So, the next option is to use grid-snap or pixel snap, both are pretty similar. Now, you just have to drag and select the item you want to use.

also, for fine adjustments, you can set the region from the inspector.

Defective sprite sheet

Now, the final type of sprite sheet you'll encounter is a "Defective one." For example, I have this sprite sheet. But when I add this sprite sheet to an AnimatedSprite node, you'll notice that it's not evenly spaced out. That means you can't simply divide the image.

Now you have two options. If you know how to do image editing, then you can split the image into individual frames of the same size but, if you are like me who is not good in editing. then you have to animate it using sprite node and animation player.

for this first set the sprite sheet in the texture property then in the animation specify the number of frames your sprite sheet contains. 

Now you will see that the image is not aligned. And to solve this we have to use the region property. So, enable the region and now in the TextureRegion. drag the area which only covers all of the frames. you should also see in the editor while dragging and try to drag in such a way that the first frame is roughly at the centre.

Once you are satisfied with the first frame. go to the animation player and create a new animation. now come back to your sprite node and you will see a key icon after frame. click on the key to add a key frame. now move the pointer and click on the key to add another keyframe. you can also just keep pressing the key icon and the pointer will move forward automatically.

now if you play the animation. you will see, not all the images are centred. so, move the animation pointer at the second frame and now you have to move the image left or right by changing the x value in the region. 

For example, switching between first and second frame I can see that the image in the second frame is shifted toward the left so to move it to right. I will decrease the value of x and now you can see both image is perfectly aligned. 

Similarly, on comparing the second and third frame. I can see that the image is more at the right side so to shift it to the left. I will increase the value of x and now you can see, first three frames are perfectly aligned. Now you just have to repeat this same process for all the frames.

Once you are done, make sure you set the update mode from continuous to discrete. And your animation is ready.

I know the last one gets a bit complex but that's what I do when I get some defective sprite sheet. if you have some easy option, then write down in the comments. I really need it. Also, if you find this video helpful then do leave a like and subscribe to my channel for more Godot related content.

for now, thanks for watching and I will see you in the next one.