Unityで2DRPGゲーム入門メモ（フィールドを作成してプレイヤーを動かすまで）

# YouTube で解説
<iframe width="560" height="315" src="https://www.youtube.com/embed/w1-HIqC7sx0?si=pwYVYJROOhH1W3Ob" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

* 2023年10月6日18時に公開

# はじめに

Unityというゲームエンジンを使ってドラクエ風RPGを作る開発過程で、プレイヤーがフィールドを歩くまでをゆる〜く入門してみました。プログラミングやゲーム制作を全く知らない超初心者でも、動画や記事の通りにやれば動くと思います。レトロなゲーム作りに挑戦している人にとって、参考になれば幸いです。

## 画像入手方法

下記のサイトから、無料で画像を入手できます。

- ぴぽや倉庫
https://pipoya.net/sozai/

- itch
https://itch.io/

動画内では、下記の２つを使用しました。

フィールド：https://pipoya.itch.io/pipoya-free-rpg-world-tileset-32x32-40x40-48x48
船：https://pipoya.itch.io/vehicle-ship-sprites


# ゲーム開発スタート

Unity Hub を開いて、左上の「New project」から、新しくプロジェクトを作成。
バージョンは、Cluster でワールド制作と同じ「2021.3.4f1」を使っています。

## Unityダウンロード(2021.3.4f1)
- Unity Hub

https://unity3d.com/get-unity/download

- 2021.3.4f1 のバージョンを Unity Hub にダウンロード

https://unity3d.com/jp/get-unity/download/archive

ダウンロードが完了したら、Unity Hub から右上の「New Project」をクリック。
バージョンは「2021.3.4f1」を使用して、「2D」で、Project name にプロジェクトの名前を書き、「Create project」をクリックしてください。

![スクリーンショット 2023-09-04 9.49.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/7b3bae1c-3343-4240-69d6-d5a22a7ca9bb.png)

## 画像をAssetsに保存

Assets の中に新しいフォルダ「Images」を作成。
入手してきた画像は、Images の中に保存。

画像はカットしたいので、画像を選択したら Sprite Mode を「Multiple」に変更し、「Sprite Editor」をクリックして「Apply」。

新しく Sprite Editor が立ち上がるので、Slice から下記のように変更して、「Slice」をクリック。

![スクリーンショット 2023-10-06 2.45.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/87bb181a-6250-a9a0-d260-2e12e8bee786.png)

最後に「Apply」をクリックしたら閉じてOK。同様に、船の画像も下記のように変更。
この時、Pivot を「Bottom Left」に変更するように注意してください。「Center」のままだと、後々マップチップを敷いた時に、その中に入らずはみ出してしまって、フィールドをうまく歩くことができなくなるので注意。

![スクリーンショット 2023-10-06 2.47.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/7449a0ba-a7b9-e85f-2335-42790fe71ade.png)

こちらも、最後に「Apply」をクリックしたら閉じてOK。

## フィールド制作

1. Assets の中に新しいフォルダ「Pallets」を作成。
2. 上の「Window」のバーから 2D → Tile Palette 選択。
3. 「Create New Pallete」で「FieldPalette」を Pallets フォルダの中に作成。
4. フィールドとして入手した画像をぱレッドの中にドラッグ&ドロップ.
5. マップチップが生成されるので、Pallets フォルダの中に保存。
6. Hierarchy から 2D object → Tilemap → Rectangular で「FieldMap」を作成。
7. Inspector → Cell Size で X と Y を 0.32 に変更。
8. Tilemap はひとつコピーして、それぞれ「Roads」と「Walls」に変更。
9. Walls の Order in Layer は 1 以上に変更。

あとは、「Roads」と「Walls」それぞれ下の画像のように色塗りしていくだけ。

![スクリーンショット 2023-10-06 3.06.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/56b73435-c91b-bdae-9a77-90a1585379ad.png)

## プレイヤー制作

1. Hierarchy → Create Empty で「Ships」作成
2. Ships の空オブジェクトの中に、2D Object → Sprites → Square で「Image」作成
3. Image の Sprite に画像を当てはめ。
4. Image の Order in Layer は 1 以上に変更。

下の画像のように、船が表示されていれば成功。

![スクリーンショット 2023-10-06 3.14.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/0c44bd76-9bf0-f58d-56ec-a9c7973e1d0f.png)

## プログラミング（プレイヤー操作）

Assets の中に「Scripts」というフォルダを作成し、スクリプトを追加

```ShipMove.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class ShipMove : MonoBehaviour
{
    // Update is called once per frame
    void Update()
    {
        float x = Input.GetAxisRaw("Horizontal");
        float y = Input.GetAxisRaw("Vertical");
        transform.position += new Vector3(x, y);
    }
}

```

Ships にドラッグ&ドロップでアタッチして実行すると、十字キーで動くと思います。
動画では解説していませんでしたが、 Main Camera も Ships のオブジェクトの中の子要素に入れると、カメラも同時に動いてくれます。

## アニメーション追加

1. Assets の中に新しいフォルダ「Animations」を作成。
2. Create → Animator Controller で「ShipAnimatorController」を作成。
3. ShipAnimatorController を Ships にアタッチ。
4. Create → Animation で「ShipMoveDown」を作成。
5. Create → Animation で「ShipMoveLeft」を作成。
6. Create → Animation で「ShipMoveRight」を作成。
7. Create → Animation で「ShipMoveUp」を作成。
8. ShipAnimatorController ダブルクリックで、新しくウィンドウが立ち上がるので、そこに上記4~7のアニメーションをドラッグ&ドロップ。
9. 上の「Window」のバーから Animation → Animation 選択。
10. ShipAnimatorController がアタッチされた Ships を選択した状態で、４つのアニメーションにキーフレームが追加できるので、それぞれ20フレームおきにイイ感じに追加。

## アニメーターをトリガーで操作

1. 「Any State」を右クリックから「Make Transition」をクリックして、それぞれのアニメーションのステートに追加。
2. 「Animator」画面の左上の「Parameters」から。４つのトリガー追加。それぞれ名前は下記の通り。
- MoveDown
- MoveUp
- MoveRight
- MoveLeft

それぞれの Transition を選択し、Conditionsに該当するトリガーを追加。
その他にも、全ての Transition に下記の設定を加えて、常にトリガーが実行された瞬間にアニメーションが動作するように変更してください。

- HasExitTime にチェックをつける
- ExitTime を 0 に変更
- Transition Duration も 0 に変更
- HasExitTime のチェックを外す

実行して、トリガーが作動して船の向きが変わっていれば成功です。

# さいごに 

3DでもUnityで地形を作ってプレイヤー操作に挑戦↓↓↓

https://youtu.be/VNxcIbZi5OY

Udemy講座で3Dのワールド制作をガッツリやりたい方はこちら↓↓↓

https://www.udemy.com/course/unity-cluster/?referralCode=4FFB3909A9F1BEC2F693