2D Animation in Godot
Tags: godot, gamedev, animation, game
Published: 2020-11-24 08:56:56

I think making 2D animations in Godot is relatively easy. But at first it can be a little complicated until you get used to it.
So, in this article, I will focus on **2D** and explain how to create illustrations for animation and how to move them using **AnimationPlayer** in Godot.


You may refer to [this article](https://hideckies.github.io/posts/how-to-create-a-pixel-art-using-affinity-designer/) for details on how to create pixel art.



# 1. Create illustrations for animation.
First of all, it is necessary to arrange the illustrations used in the animation frame by frame.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ph3kmtz0yxu9nnkq5ltf.png)

*This time I would like to use this character, which is loved all over the world(I can’t deny the possibility that no one in the world knows him). He appears in [my game](https://landbox.app/) by the way. Please play it if you are interested!

If you want to make a runnning animation, make each of the 5 frames as shown in the image above.
When you actually make the animation using AnimationPlayer in Godot, the movement is **1 -> 2 -> 3 -> 2 -> 1 -> 4 -> 5 -> 4 -> 1 …**

Then export it as **.png** to your Godot project.
As a result, the contents of your Godot project should look like this:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f1pn6y2wjo7lquycu3pv.png)


# 2. Make a scene to animate
Here, create a scene named “Human”(Since it is assumed to move, I use KinematicBody2D here). In addition, add three child nodes - Sprite, CollisionShape2D, AnimationPlayer -

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yhnrqvkmwc905bjrwroo.png)


# 3. Make a Sprite
Next, load the **.png** you created as Sprite texture.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/aghwtebvmbdhlqvujkhm.png)

As a result, the viewport is reflected this:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/m1qr9gue3c5eee8mrl04.png)

As you know, this is not natural. Five people are lined up! No… this is not! We want only one person to run!

Therefore edit the item named “**Animation**” in Sprite in addition.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/besdgulynjrajpw5od8w.png)

The created illustration consists of **5 frames**, so if you set Hframes to **5**, you can display only one frame.
You see!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zn6u1x0v2zwwoveg5l0x.png)


# 4. Make AnimationPlayer
Click the **AnimationPlayer** node to open the **Animation** edit screen at the bottom.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mxu85l1coftu9g01rbb7.png)

Then click **Animation** button as shown below to create new animation:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zr8t36erv9temknaiouo.png)


So the dialog opened, click “**new**” and enter the new animation name(for example, “**Run**”)
Then, the animation edit screen at the bottom changed.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d8lup6476141qbcgn07e.png)

Now let’s actually make the **Run** animation!

Click **Sprite** node at first, then edit **Frame** on the item named **Animation**.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n042xplwies9f53z9bdd.png)


Try entering a number such as **1, 2, 3, etc…**
Human movement should change.

Then, click the key mark on the right with this number set to **0**.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/p3rx08jdy9s1tmnoxrti.png)


As a result, selected **0** frame is displayed in animation edit screen as shown below:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ccb8b1tu7w681vw0xvl8.png)


Next, at the top of this edit screen, where the time scale is lined up with 0, 0.5, 1, 1.5 …, click **0.5**.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kzezxxxlhu7w2g7eazhl.png)


As before, this time set the **Frame** to **1** in Sprite’s Animation item and then click the key mark.
You should be able to see that frame **1** has been added at position **0.5** on the time scale.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kn6z78j1csb3riyq5a7u.png)

In the same, as mentioned in **Section 1**, add frames in the order of 1 -> 2 -> 3 -> 2 -> 1 -> 4 -> 5 -> 4 -> 1…(However, note that 0 is the first frame here, so <span style="color: red;">**0-> 1-> 2-> 1-> 0-> 3-> 4-> 3-> 0 …**</span>)

It’s difficult to explain in words, but for the time being it looks like as below:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kva0raj4rxi5ersal8do.png)

By the way, to change the length of the animation time, change the value of the **timer mark** on the upper right. This time it is 4 seconds, so it set to **4**.
And to make the animation loop, click the **loop icon** next to that.

Let’s run!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/phh13hmkoz7xwztoc8hv.gif)


Um… very slowly isn’t it?
Let’s move faster!

Reduce the frame movement to **0.1** second intervals and change the animation length to **0.8** seconds.
At this time, by changing the **Snap** at the bottom to **0.1**, you will be able to move the time scale by 0.1.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jbtus2pvf3nv9n5171ae.png)


How about this…

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6lmont9cvhwx6qy1rivn.gif)


Good!



If you want to play the animation in GDScript…

```python
func _ready():
	var animationPlayer = $AnimationPlayer
	animationPlayer.play("Run")
```

It’s done.
Hope it helped😃