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 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.

*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 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:

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 -

3. Make a Sprite

Next, load the .png you created as Sprite texture.

As a result, the viewport is reflected this:

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.

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

4. Make AnimationPlayer

Click the AnimationPlayer node to open the Animation edit screen at the bottom.

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

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

Now let’s actually make the Run animation!

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

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.

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

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.

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.

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 0-> 1-> 2-> 1-> 0-> 3-> 4-> 3-> 0 …)

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

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!

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.

How about this…

Good!

If you want to play the animation in GDScript…

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

It’s done.
Hope it helped😃