Animated Sprite 2D
Tags: godot, gamedev, tutorial, gdscript
Published: 2024-01-03 00:52:16

Today's article is a simple one but a very powerful tool to have under your belt.

We're going to create an animated coin collectible in our game, and to do that, we're going to explore the `AnimatedSprite2D` node.

## Source file

For the rotating coin sprite, I'm using the [free coin asset](https://opengameart.org/content/rotating-coin) that you can find in [Open Game Art](opengameart.org).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ytsd5peos0mjkd3nwqwt.png)

## Folder structure

We're going to create two folders structure, one to store our sprites and other to store our items.

```ASCII
res:///
├─ Objects/
│  ├─ Items/
│  │  ├─ Coin/
├─ Sprites/
│  ├─ Objects/
│  │  ├─ Items/
│  │  │   ├─ Coin/
```

The **Objects** folder will contain our scenes and scripts while everything under the sprites folder will be, well, sprites.

## The Coin Scene

Let's create a new Scene under the **Coin** folder and name it `Coin.tscn`, this will be a `Node2D` scene.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/05m7j1t9tnw5cobethgd.png)

### Adding an `AnimatedSprite2D`

Right click the main Coin node, select **Add child node** and search for **AnimatedSprite2D**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dllhjejk98pjgnlsah2t.png)

Now that we have our `AnimatedSprite2D` node under our coin, let's add our Coin sprite to it.

### Adding the Sprite to our `AnimatedSprite2D`

In the scene panel on the left side, select your `AnimatedSprite2D` (it can be named as Sprite2D), and on the right side, in the inspector, select **Sprite Frames > New Sprite Frames**.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eq1invkk78sjh7bcjj1j.png)


This will open tab in the bottom panel called **Sprite Frames**, here is where we're going to import our coin sprite sheet.

But before we add, let's "fix" the framerate to 8, because that's the number of frames our sprite sheet has.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y6qr78eibqvgkrg08gr8.png)

Now, click on the icon on the right of the folder icon to import our spritesheet, it's called: **Add frames from sprite sheet**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rwdach6smjgpf21yim9a.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xjrm26t76sy2ftfdn31l.png)

When you click **open** this window will appear, this will let us split our spritesheet into smaller sprites

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d66hlwt9o6bxryxjwfbg.png)

As you can see, there are vertical and horizontal lines, this tells the engine how the spritesheet should be split. Lets adjust these rows using the tools on the right side of this window.

Since we have just wone row and 8 sprites, let's set Horizontal to 8 and Vertical to 1. Once you have your sprite sheet splitted, select the frames you want to add and press **Add x Frames**, in our case, it should be 8.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uh9jq9auhy92ounvwwwt.png)

You can press play and you'll see the coin rotating in your scene! 😁

## CONGRATULATIONS!

🎉 Bravo on successfully completing this tutorial! Today's article might be simple, but the tool you've just added to your game development toolkit is undeniably powerful.

## Thank you

As always, thank you for reading and I hope you're enjoying it and learning from it!

I see you, in the next article 😄

## Learn more

[Animated Sprite 2D Official documentation](https://docs.godotengine.org/en/stable/classes/class_animatedsprite2d.html)