# チュートリアル：グラフィックス講座 #3 – 2D スプライトベースのキャラクター

**URL:** <https://guild.rpgmakerofficial.com/t/topic/56>\
**Category:** チュートリアル\
**Tags:** tutorial, english\
**Created:** [2025 年 6 月 5 日午前 11:12 UTC](https://guild.rpgmakerofficial.com/t/topic/56 "2025-06-05T11:12:15Z")\
**Posts on this page:** 1\
**Showing post:** 3

<div class="post-metadata">

**Author:** ![GGG-Administrator](https://sea2.discourse-cdn.com/flex002/user_avatar/guild.rpgmakerofficial.com/ggg-administrator/32/6_2.png) [@GGG-Administrator](https://guild.rpgmakerofficial.com/u/GGG-Administrator)\
**Post date:** [2025 年 6 月 5 日午前 11:14 UTC](https://guild.rpgmakerofficial.com/t/topic/56/3 "2025-06-05T11:14:29Z")

</div>

## **STEP 2: Create a Sprite Animation**

* * *

### 1. In the **Scene window** , select the `AnimationPlayer` node.

The lower center panel will switch to **Animation** view.

* * *

### 2. At the top of the panel, click **Animation \> New** to create a new animation.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/rpgmaker_community/original/1X/1d257229789e098508e004efbe92e4ce82af230e.png)

* * *

### 3. Give it a name.

In this example, we’ll create a walk animation, so name it **Walk**.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/rpgmaker_community/original/1X/eaae122469921d8585f9fe391274ca3cca88331e.png)

* * *

### 4. A blank animation will be created.

By default, it lasts **1 second** , but that’s too long for a walk cycle—let’s shorten it.  
Set the **length to 0.4 seconds** using the timer icon at the top right.  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/rpgmaker_community/original/1X/cdb3bfbd5db8df82eabde438df0af394920a5414.png)

* * *

### 5. In the Scene window, select `Sprite2D`.

In the Inspector, go to **Animation \> Frame**.

* * *

### 6. Identify the first frame of the walking animation.

In the sample sprite, it’s in the second row (index starts at 0), so it begins at frame **5**.  
Enter **5** in the **Frame** field.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/rpgmaker_community/original/1X/50a03b5961a10488ecd3142b705a423eadaa404f.png)

* * *

### 7. Click the **🗝 (Insert Key)** button next to the Frame field.

![image](https://us1.discourse-cdn.com/flex002/uploads/rpgmaker_community/original/1X/d3418b619f3c32d95165866199d14b370ef0cbd6.png)

* * *

### 8. When prompted to insert a new keyframe, just click **Create**.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/rpgmaker_community/original/1X/e8eea2b028e837b480190f06c5ecaf01ace8fa4a.png)

* * *

### 9. A frame will be inserted into the Walk animation.

Now move the timeline to **0.1 seconds**.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/rpgmaker_community/original/1X/cb37bd866382eba4a2258d752aa7327d73ec6da2.png)

* * *

### 10. Set Frame to **6** , then click the key icon again to insert the next frame.

![image](https://us1.discourse-cdn.com/flex002/uploads/rpgmaker_community/original/1X/7b29cfcab918b43338b56f0a2ee9de8fa41d09c6.png)

* * *

### 11. Repeat this process:

- At **0.2s** → Frame **7**
- At **0.3s** → Frame **8**
- At **0.4s** → Frame **9**

You should now have 5 frames.

* * *

### 12. The frames might appear crowded—zoom in for better clarity.

Use **Ctrl + scroll** on your mouse or adjust the zoom bar in the lower right.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/rpgmaker_community/original/1X/0a431605e118ba1dea16a625fdbc812b04231252.png)

* * *

### 13. Enable looping for the animation.

Click the **loop icon twice** (next to the timer) to set it to **Ping-Pong Loop**.

![image](https://us1.discourse-cdn.com/flex002/uploads/rpgmaker_community/original/1X/fd47e5d00cbb0c195b1bfc1b636c79d1cd6321cc.png)

* * *

### 14. Press ▶ to preview the animation.

If it doesn’t play as expected, check:

- Each frame’s timestamp and value
- That looping is properly enabled (Step 13)

* * *

### 15. To use this animation in a visual script, register it to your Game Object.

Select your Game Object node (e.g., `sample_2DSprite`).

* * *

### 16. Because this is a new object, its `AnimationPlayer` isn’t linked yet.

Click the **Select AnimationPlayer** button and choose the correct node.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/rpgmaker_community/original/1X/a7ce8c9b990a9c8f3322ac2d9646b3a995791e6a.png)

* * *

### 17. Click the **Auto-Register Animations** button.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/rpgmaker_community/original/1X/4a0db91b206892bdfb94bd20e8b85ce98f238976.png)

* * *

### 18. Expand the **Animation Sets** section.

You should see your newly created **Walk** animation listed.  
If you’re making a side-view game, you’re now ready to go!

 ![image](https://us1.discourse-cdn.com/flex002/uploads/rpgmaker_community/original/1X/c472281cbe403bb8d502cc3019368ec3058d8b03.png)

* * *

## 📝 Notes: When Using Custom Sprites

### 🔧 Animation Set Advanced Settings

By default, ACTION GAME MAKER flips the animation horizontally based on movement direction.  
For most side-view games, this is fine. But if you want different animations for:

- Forward and backward steps
- 4-direction or 8-direction top-down games

…you’ll need to manually configure the animation set:

| Setting | Description |
| --- | --- |
| **Animation** | Specifies which animation to play |
| **Auto Y Flip** | Toggles automatic horizontal flipping. Disable for manual control |
| **Eight Direction** | Defines which animation plays based on facing direction |
| **+Add Direction Variant** | Allows multiple animations per direction |
| **+Add Animation Category** | Adds custom animation groups (advanced use only) |

🧭 Example: Top-down 4-direction settings

 ![image](https://us1.discourse-cdn.com/flex002/uploads/rpgmaker_community/original/1X/d4a2f7575c5d4b6a3971d4a43aeb5d42de2ccc83.png)

* * *

### 🧍‍♂️ Character Facing Direction

Characters are assumed to **face right** by default.  
If your sprite faces **left** , you must enable this setting:

- Go to `BaseSettings`
- Check **Enable Auto HFlip**

 ![image](https://us1.discourse-cdn.com/flex002/uploads/rpgmaker_community/original/1X/a70b5a5b80de1933b69877cd96ffe2f1045b7e27.png)

* * *

### 🚫 Note About `AnimatedSprite2D`

Although Godot includes a dedicated node called `AnimatedSprite2D`,  
**ACTION GAME MAKER does not support it**.  
All sprite animation should be done with `AnimationPlayer`.  
**However, it is possible to indirectly use `AnimatedSprite2D` by applying the methods described below.**  
This approach is especially recommended when dealing with multiple sprite sheets.

> [@TIPS: Utilizing AnimatedSprite2D for Sprite Animation](https://guild.rpgmakerofficial.com/t/topic/345):
>
> In ACTION GAME MAKER, the only node available for animation playback in Visual Scripts is AnimationPlayer. You cannot directly play animations with AnimatedSprite2D, which is a node in Godot speciali…

* * *

## ✅ Conclusion

That wraps up the **Graphics Course**!

This tutorial covered the basics, but Godot’s `AnimationPlayer` is extremely powerful.  
By combining it with ACTION GAME MAKER’s tools, you can create rich, expressive characters.

Feel free to share your creations on social media or the official Guild!

* * *

### 👉 Explore Other Courses:

**2. Scripting Course**  
For those who are fine using default characters but want to build various mechanics and systems.

> [@Tutorial: Script Course #1 – Let's Create a Shooting Attack](https://guild.rpgmakerofficial.com/t/topic/59):
>
> In this course, you’ll learn the basics of scripting in ACTION GAME MAKER. In Part 1, we’ll be creating a basic attack system. warning Notes on Using Visual Scripts bookmark_tabs Visual Script…

**3. Expression Enhancement Course**  
For those who want to add cool, Godot-style visual effects.

> [@Tutorial: Expression Enhancement Course #1 — Using Particles](https://guild.rpgmakerofficial.com/t/topic/64):
>
> This tutorial course is designed for those who want to try out various visual effects. Before starting this course, we recommend completing the following tutorial: This course continues using the s…

---

_[View the full topic](https://guild.rpgmakerofficial.com/t/topic/56)._