# チュートリアル：グラフィックス講座 #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:** 3\
**Page:** 1

<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:12 UTC](https://guild.rpgmakerofficial.com/t/topic/56/1 "2025-06-05T11:12:15Z")

</div>

このコースでは、ゼロから **新しい2Dスプライトキャラクター** を作成する方法を学びます。  
**2Dスプライトアニメーション** の基本的な操作を扱います。

以前のコースと同様に、このコースでも最初のコースで使用した **チュートリアルプロジェクト** を利用します。  
まず、プロジェクトを開いて準備を整えてください。

---

<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:13 UTC](https://guild.rpgmakerofficial.com/t/topic/56/2 "2025-06-05T11:13:21Z")

</div>

## **ステップ 1: 新しい 2D スプライトキャラクターゲームオブジェクトを作成しましょう**

* * *

### 1. 2D スプライトキャラクターの画像を準備します。

用意がない場合は、以下のサンプル画像を使用できます：

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

* * *

### 2. 画像を **ファイルシステム** にドラッグ＆ドロップしてインポートします。

* * *

### 3. 新しいゲームオブジェクトシーンを作成します。

中央エディタの **＋タブ** をクリックして新しいタブを開き、シーンウィンドウで **ゲームオブジェクト** を選択します。

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

* * *

### 4. 設定ウィンドウで以下を設定します：

- **オブジェクト名** : 任意の名前を選択
- **テンプレート** : `characters`
- **テンプレートタイプ** : `2DSprite Character Base`
- **グループ** : `Player`
- **入力デバイスで操作されるオブジェクト** : ✅ オン

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

* * *

### 5. 基本的な設定が事前に構成されたゲームオブジェクトシーンが作成されます。

未保存のタブを右クリックするか、 **Ctrl + S** を使用してすぐに保存し、お好みの場所に格納します。

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

* * *

### 6. キャラクター画像を読み込みます。

シーンウィンドウで `Sprite2D` を選択します。

* * *

### 7. **インスペクタ** で、ステップ 2 の画像を **テクスチャ** フィールドにドラッグ＆ドロップします。

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

* * *

### 8. キャラクター画像が読み込まれましたが、シート全体が表示されます。

個々のフレームに分割しましょう。

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

* * *

### 9. **インスペクタ** の **アニメーション** セクションで以下を設定します：

- **Hframes** （横フレーム数）: `5`（サンプル画像の場合）
- **Vframes** （縦フレーム数）: `4`（サンプル画像の場合）

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

* * *

### 10. **フレーム** 値を上下に動かして確認します。

画像が正しく分割されていれば、スプライトがアニメーションフレームを順に切り替えて表示されるはずです。

> 🔹 Godot ではフレームインデックスは **0** から始まるため、 **フレーム 7** は 8 番目のフレームです。

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

* * *

### 11. 衝突形状を調整しましょう。

まず、シーンウィンドウで **CollisionShape2D** を選択します。  
地面や敵との接触を定義する衝突領域を示す、薄い青色の四角形が表示されるはずです。

* * *

### 12. キャラクターのサイズに合わせて衝突形状を調整します。

角のハンドルを使ってサイズを変更します。

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

* * *

### 13. 次に **HitCollision** を選択して同様に調整します。

これは敵からのヒットを検出するもので、壁の衝突領域よりわずかに大きいのが理想的です。

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

* * *

### 14. 最後に、現時点では **AttackCollision** を無効にします。

これはキャラクターの攻撃領域を定義しますが、アニメーションによって異なるため、今回はオフにしておきます。

- `AttackCollision` を選択
- **インスペクタ** で **Disabled** をチェック

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

> 形状がまだ邪魔に感じる場合は、`AttackCollision` の隣の👁アイコンをクリックして表示を非表示にします。

* * *

### 15. すべてが問題なければ、シーンを再度保存します（タブを右クリックするか、 **Ctrl + S** を使用）。

* * *

## 💡 ヒント：表示切り替え vs 無効化

シーンウィンドウの👁アイコンは、 **エディタでの表示** のみを切り替えます。  
ランタイムでのノードの動作には影響しません。

ノードの動作を実際に無効にするには、以下のいずれかを行います：

- **インスペクタ** の **Disabled** チェックボックスを使用
- またはノードを削除

---

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