【Unity初心者】お金をかけずに2D RPGを作る!Step1キャラ実装編 (ゼロから歩きアニメーションまで)

はじめに

Unityでゲームを作り始めました! プログラミング経験はC#あり、でもUnityは初めて。 目標は見下ろし型2D RPGを完全無料で作ること!

この記事では環境構築からキャラクターの4方向歩きアニメーション実装までをまとめます。


環境・使用ツール(すべて無料)

ツール 用途 Unity Personal ゲームエンジン(無料) Visual Studio Community C#コードエディタ(Unity同梱) Tiny RPG - Forest(Asset Store) キャラ・タイル素材(無料)


使用アセットについて

Tiny RPG - Forest

  • 価格:完全無料

  • 制作者:Ansimuz

  • 特徴:見下ろし型RPG向け・ゼルダ風・ピクセルアート

  • 有料ゲームへの使用:Standard Unity Asset Store EULAに基づきOK✅




アセットのフォルダ構成

Tiny RPG Forest/Artwork/
├── sprites/
│   ├── hero/
│   │   ├── idle/
│   │   │   ├── hero-idle-front(正面待機)
│   │   │   ├── hero-idle-back(後ろ待機)
│   │   │   └── hero-idle-side(横待機)
│   │   ├── walk/
│   │   │   ├── hero-walk-front-1〜6(正面歩き6フレーム)
│   │   │   ├── hero-walk-back-1〜6(後ろ歩き6フレーム)
│   │   │   └── hero-walk-side-1〜6(横歩き6フレーム)
│   │   ├── attack/
│   │   └── attack-weapon/
│   ├── mole/
│   └── treant/
└── Environment/
    ├── tileset/
    ├── tileset-sliced/
    ├── sliced-objects/
    └── waterfall animation/

Step 1:キャラクターを配置・動かす

1. シーンにキャラクターを配置

Hierarchy → 右クリック → Create Empty
→ 名前を「Player」に変更
→ Inspector → Add Component → Sprite Renderer を追加
→ Sprite欄に「hero-idle-front」をドラッグ
→ Transform → Scale を (2, 2, 1) に変更

2. コンポーネントを追加

Add Component → Rigidbody 2D
 └ Gravity Scale → 0(見下ろし型なので重力不要)
 └ Constraints → Freeze Rotation Z ✅

Add Component → Capsule Collider 2D

3. C#スクリプト作成(基本移動)

Projectウィンドウで右クリック
→ Create → C# Script
→ 名前:「PlayerController」

Step 2:4方向スプライト切り替え

移動方向に応じて正面・後ろ・横のスプライトを切り替える実装。

PlayerController.cs(4方向切り替え版):

using UnityEngine;

public class PlayerController : MonoBehaviour
{
    public float moveSpeed = 5f;

    public Sprite idleFront;
    public Sprite idleBack;
    public Sprite idleSide;

    private Rigidbody2D rb;
    private Vector2 movement;
    private SpriteRenderer spriteRenderer;

    void Start()
    {
        rb = GetComponent<Rigidbody2D>();
        spriteRenderer = GetComponent<SpriteRenderer>();
        spriteRenderer.sprite = idleFront;
    }

    void Update()
    {
        movement.x = Input.GetAxisRaw("Horizontal");
        movement.y = Input.GetAxisRaw("Vertical");

        if (movement.y < 0)
        {
            if (idleFront != null) spriteRenderer.sprite = idleFront;
            spriteRenderer.flipX = false;
        }
        else if (movement.y > 0)
        {
            if (idleBack != null) spriteRenderer.sprite = idleBack;
            spriteRenderer.flipX = false;
        }
        else if (movement.x > 0)
        {
            if (idleSide != null) spriteRenderer.sprite = idleSide;
            spriteRenderer.flipX = false;
        }
        else if (movement.x < 0)
        {
            if (idleSide != null) spriteRenderer.sprite = idleSide;
            spriteRenderer.flipX = true;
        }
    }

    void FixedUpdate()
    {
        rb.MovePosition(rb.position + movement.normalized * moveSpeed * Time.fixedDeltaTime);
    }
}

Step 3:4方向歩きアニメーション

Animatorは使わずC#スクリプトで直接フレームを切り替える方法で実装。 停止時は待機スプライト、移動時は6フレームのアニメーションを再生。

PlayerController.cs(歩きアニメーション版・最終形):

using UnityEngine;

public class PlayerController : MonoBehaviour
{
    public float moveSpeed = 5f;
    public float animationSpeed = 0.1f;

    [Header("待機スプライト")]
    public Sprite idleFront;
    public Sprite idleBack;
    public Sprite idleSide;

    [Header("歩きスプライト")]
    public Sprite[] walkFront; // 6枚
    public Sprite[] walkBack;  // 6枚
    public Sprite[] walkSide;  // 6枚

    private Rigidbody2D rb;
    private Vector2 movement;
    private SpriteRenderer spriteRenderer;

    private int currentFrame = 0;
    private float frameTimer = 0f;
    private string lastDirection = "front";

    void Start()
    {
        rb = GetComponent<Rigidbody2D>();
        spriteRenderer = GetComponent<SpriteRenderer>();
        spriteRenderer.sprite = idleFront;
    }

    void Update()
    {
        movement.x = Input.GetAxisRaw("Horizontal");
        movement.y = Input.GetAxisRaw("Vertical");

        bool isMoving = movement != Vector2.zero;

        if (isMoving)
        {
            if (movement.y < 0) lastDirection = "front";
            else if (movement.y > 0) lastDirection = "back";
            else if (movement.x != 0) lastDirection = "side";

            if (movement.x > 0) spriteRenderer.flipX = false;
            else if (movement.x < 0) spriteRenderer.flipX = true;

            frameTimer += Time.deltaTime;
            if (frameTimer >= animationSpeed)
            {
                frameTimer = 0f;
                currentFrame = (currentFrame + 1) % 6;
                UpdateWalkSprite();
            }
        }
        else
        {
            currentFrame = 0;
            frameTimer = 0f;
            UpdateIdleSprite();
        }
    }

    void UpdateWalkSprite()
    {
        if (lastDirection == "front" && walkFront.Length > 0)
            spriteRenderer.sprite = walkFront[currentFrame];
        else if (lastDirection == "back" && walkBack.Length > 0)
            spriteRenderer.sprite = walkBack[currentFrame];
        else if (lastDirection == "side" && walkSide.Length > 0)
            spriteRenderer.sprite = walkSide[currentFrame];
    }

    void UpdateIdleSprite()
    {
        if (lastDirection == "front" && idleFront != null)
            spriteRenderer.sprite = idleFront;
        else if (lastDirection == "back" && idleBack != null)
            spriteRenderer.sprite = idleBack;
        else if (lastDirection == "side" && idleSide != null)
            spriteRenderer.sprite = idleSide;
    }

    void FixedUpdate()
    {
        rb.MovePosition(rb.position + movement.normalized * moveSpeed * Time.fixedDeltaTime);
    }
}

Inspectorの設定

Player Controller (Script) の各欄に設定:

待機スプライト:
・Idle Front → hero-idle-front
・Idle Back  → hero-idle-back
・Idle Side  → hero-idle-side

歩きスプライト(各6枚):
・Walk Front → hero-walk-front-1〜6
・Walk Back  → hero-walk-back-1〜6
・Walk Side  → hero-walk-side-1〜6

ハマったポイント

① Sprite Shapeと間違えた

2D Object → Sprite を選ぼうとしたらSprite Shapeのメニューが出た。

解決策:

Hierarchy → 右クリック → Create Empty
→ Add Component → Sprite Renderer

② Rigidbody 2Dが外れてエラー

MissingComponentException: There is no 'Rigidbody2D' attached to the "Player" game object

スクリプトアタッチ後にRigidbody 2Dが外れていた。再度追加して解決。

③ Animatorが干渉してキャラが消えた

Animator Controllerをアタッチしたままにしていたため 再生時にSprite RendererのSpriteがMissingになった。 Animatorを外して解決。

④ スプライトのスライス設定ミス

アニメーションフレームを追加しようとしてスライスしたが 1枚絵を4分割してしまった。 Tiny RPG Forestのidleは1枚絵のため、スライス不要だった。


完了チェックリスト

  • [x] キャラがシーンに表示されている

  • [x] WASDで上下左右に動く

  • [x] 移動方向に応じてスプライトが切り替わる

  • [x] 移動中は歩きアニメーション(6フレーム)が再生される

  • [x] 停止時は待機スプライトに戻る

  • [x] 左移動時にスプライトが反転する


次回予告

Step 2:マップ作成・カメラ追従

Tiny RPG ForestのタイルセットでRPGらしいマップを作ります!



Unity Personal / Tiny RPG - Forest使用 / 完全無料構成


いいなと思ったら応援しよう!

パパレットスタディ 倉木 勉 よろしければ応援お願いします!