1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

[Unity]2D牧場ゲームを作ってみる その2[マップ作成]

Posted at

前置き

子供からの夢で「牧場物語やルーンファクトリーみたいな牧場ゲームを作ってみたい!」と思っていました。
QiitaでUnityを使った2Dゲームはないかと調べたところ、素晴らしい記事を発見しました。

こちらの神記事を参考に2D牧場ゲームを作成していこうと思います。

前回作成したもの

今回作成するもの

  • 1.マップの作成
  • 2.マップに衝突判定を設定

1.マップの作成

1-1.マップの画像を分割

  • マップの素材はマップチップ - ぴぽや倉庫からお借りしました。時間があったら自分でマップを作成したいと思います。

  • ダウンロードした画像をSprite Editorでいい感じに画像を分割します。

image.png

1-2.TileMapとTilePalette

  • この2つは、タイルの画像を設定してマップ上にタイルのように敷き詰める機能のことです。

  • 右クリック > 2D Object > Tilemap > Rectangularで新しいTilemapが追加できます。

image.png

  • そうすると、Gridというオブジェクトが追加されえその中にTilemapが追加されます。
    image.png

  • 次にWindows > 2D > Tile Paletteを押すと、以下のような画面が表示されます。

  • 今は森と洞窟、畑などの画像だけを追加しました。

image.png

  • 画像の左上のプルダウンを押すとCreate New Paletteという項目があるので、そして新しいパレットを作成します。
  • Nameは分りやすい名前(今回はGround)、GridCellSizeはデフォルトで大丈夫です。

image.png

  • 次に先ほどSprite Editorで分割したマップの画像をPaletteにドラッグ&ドロップすると、タイルを保存するために、保存先のフォルダを指定する画面がでます。
  • とりあえず好きな名前の専用フォルダを作成して選択します。

1-3.TileMapの編集

  • Tilemapから描きたいタイル(画像は芝生)を選択、画像の右上の筆アイコンを選択します。
  • (複数のTilemapがある場合は、Active Tilemapを切り替えます)
  • Scene画面に好きなようにタイルを設置していきましょう。

image.png

  • 完成形は上のマップになります。芝生と畑を設置しました。

1-4.レイヤの上下関係を設定する

  • 以下の順番で、レイヤーの上下関係を設定していきます。(下が一番上になる)

    • 歩くマップのあるレイヤー(map_walk_layer)
    • 障害物のあるレイヤー(map_collision_layer)
    • アイテムの置いてあるレイヤー(map_item_layer)
    • キャラクターが歩くレイヤー(map_char_layer)
  • InspectorTilemap Rendererより、Sorting Layerの▼を押し、Add Sorting Layerを押します。

image.png

  • +を押し、Layerを追加した後、名前を変更しましょう(わかりやすい名前なら何でもいいです)
    image.png

1-5.歩ける・歩けないTileを分ける

  • 先ほど作成したTilemapmap_walkと名前を付けます。
  • 新しくTilemapを2つ作成し、map_collisionmap_itemと名前をつけます。

image.png

  • map_walkTimemapには、Sorting Layermap_walk_layerと設定しましょう。
    • map_collisionにはmap_collision_layermap_itemにはmap_item_layerと設定しましょう。

image.png

  • 歩けるTilemapmap_walkを除いた、map_collisionmap_itemは以下のようになります。

image.png

2.マップに衝突判定を設定

  • 次は、キャラクターや木に衝突判定を設定していきましょう。

2-1.衝突判定を設定

  • キャラクターにはBox Collider 2D、マップにはTilemap Collider 2Dのコンポーネントを追加していきます。

  • キャラクターの衝突判定を設定していきます。

  • Box Collider 2DEdit Colliderのボタンを押し、Collider(緑の枠)の大きさを調整しましょう。体の下部ぐらいにしましょう。

image.png

2-2.RididBody2Dの設定を変更

  • 前回はキャラクターのRigidbody2DBody TypeKinematicに設定しました。
  • しかし、Kinematicは標準の衝突判定が無効になります。
  • ただDynamicにすると、物理演算が有効になり、キャラクターが画面外に落ちてしまいます。
  • Gravity Scaleを0にすることで落ちなくなります。

image.png

  • もう一つの設定で、Freeze RotationのZをチェックしておきましょう。
  • そうすることで、キャラクターが障害物にぶつかった時に変な挙動をしなくなります(試しにZをチェックしないで動きを確認してみましょう…)

2-3.コードを修正

  • 最後は前回のコードMoveControllerを修正します。
  • このコードで、「山や川にぶつかったら移動させない」みたいな動きができるようです。
public class MoveController : MonoBehaviour {
    public readonly float SPEED = 0.1f;
    private Rigidbody2D rigidBody;
    private Vector2 input;

    void Start() {
        this.rigidBody = GetComponent<Rigidbody2D>();
        // 衝突時にobjectを回転させない設定
        this.rigidBody.constraints = RigidbodyConstraints2D.FreezeRotation;
    }

    private void Update() {
        // 入力を取得
        input = new Vector2(
            Input.GetAxis("Horizontal"),
            Input.GetAxis("Vertical"));
    }

    private void FixedUpdate() {
        if (input == Vector2.zero) {
            return;
        }
        // 既存のポジションに対して、移動量(vector)を加算する
        rigidBody.position += input * SPEED;
    }
}

完成

Videotogif (4).gif

次回作成するもの(仮)

  • キャラに話しかけたときにメッセージを出す

参考にしたサイト

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?