Animated Sprite 2D

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 that you can find in Open Game Art.

Folder structure

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

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.

Adding an AnimatedSprite2D

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

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.

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.

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

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

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.

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