タイルマップ上をグリッド移動するカーソルの実装例

　タイルマップを使ったゲームでは、マス目に沿ってカーソルを移動させる処理(グリッド移動)が必要になることがよくあります。
特に、シミュレーションRPGやタクティクス系のゲームでは、マス単位で移動するカーソルは不可欠です。
　
　本記事では、UnityのTilemap機能を活用し、キーボードやマウスでカーソルを移動できるシステムを実装する方法を紹介します。
カメラの制御には Cinemachine を利用しています。

＜実装動画①　キー入力でのカーソル移動＞

＜実装動画②　左マウスクリックでのカーソル移動＞

　マップチップ画像には、ねくらマップチップ様を利用させていただいております。

ねくらマップチップ様
https://nekuramap.wixsite.com/nekuramap

　アイコン画像には、icon rainbow 様を利用させていただいております。

商用可の無料(フリー)のアイコン素材をダウンロードできるサイト『icon rainbow』様
https://icon-rainbow.com/

　ありがとうございます。

１．実装内容の紹介

　本記事では、UnityのTilemapを使用して、グリッド上を移動するカーソルを実装します。
対象は初心者の向けになっていますが、最後の方では中級者以降の方に向けた発展例を紹介しています。

　技術的な内容としては、下記のような内容になります。

・Tilemap.CellToWorld() を使用し、タイルの座標をワールド座標に変換
・Vector3Int を用いたマス目単位の移動処理
・矢印キーによるカーソル移動
・マウスクリックによるカーソル移動
・R3(UniRx) を活用したスムーズな入力処理（発展例）

　このほかに、Cinemachine の機能を活用して、カーソルをカメラが追従するようにしています。
また、タイルマップが画面外を映さないようにしたり、カーソルが画面外に出ないようにしたりする機能も Cinemachine で実装可能ですが、
どちらもこの記事では割愛しています。

　これらタイルマップへの Cinemachine の活用事例については、下記の教材を参考にしてください。

　=>　２ＤタイルマップＲＰＧ　手順９

　Cinemachine のカメラには、ゲームオブジェクトを追従する Follow 機能があります。
上記の記事は、カメラ = [移動するプレイヤーの追従]を行うという形で実装されている記事ですが、
追従する機能はゲームオブジェクトであれば何でも追従可能です。

　よってこの部分をカメラ = [移動するカーソルの追従]という形に置き換えて考えてみてください。

２．活用方法

　こちらのカーソル機能は、以下のようなゲームで活用できます。

・ターン制ストラテジー（シミュレーションRPG, タクティクスゲーム）
・マス単位でキャラクターを移動するパズルゲーム、ボードゲーム、など

　マウスクリックやキー操作による、グリッド単位でのカーソル移動が可能になるため、プレイヤーに直感的な操作感を提供できます。

３．制作方法

１．タイルマップの制作

　まず、タイルマップを作成し、ゲームシーンに配置します。

　ここでは簡易的な手順のみ紹介します。
タイルマップの作成手順については、ほかの記事も参考にしてください。

＜タイルマップの作成＞

・Hierarchyで GameObject > 2D Object > Tilemap > Rectangular を作成
・Grid の子オブジェクトとして Tilemap が生成される
・Tile Palette を開き、使用するタイルを作成・配置

＜Tilemapコンポーネントの設定＞

・TilemapRenderer を確認し、表示されていることをチェック
・TilemapCollider2D（必要に応じて追加）

　=>　２ＤタイルマップＲＰＧ　実装手順を考える
　=>　２ＤタイルマップＲＰＧ　手順３
　=>　２ＤタイルマップＲＰＧ　手順４

２．カーソル用のプレハブ制作

　次に、カーソルとして使用するプレハブを作成します。

　こちらも簡易的な紹介にとどめています。

＜カーソル用のオブジェクトを作成＞

・Create Empty で新規ゲームオブジェクトを作成し、名前を Cursor などに変更
・Transform の Position は (0, 0, 0) に設定

・上記の Cursor を選択した状態で、GameObject > 2D Object > Sprite を Cursor の子オブジェクトとして作成
・カーソル用のスプライト画像 を設定（例：赤い枠の画像）
・Transform の Position は (0, 0, 0) に設定

　このように親子関係を利用してカーソルを作成しておくことで、カーソルの初期位置やサイズの調整は子オブジェクト側で調整可能になります。
特にサイズ(Scale)については子オブジェクトで調整するとよいでしょう。

　参考画像です。

　フレーム画像には、下記のサイトを利用させていただいております。

無料イラストかわいいフリー素材集フレームぽけっと
https://www.illust-pocket.com/

＜プレハブ化＞

・作成したカーソルを作成しておいた Prefabs フォルダなどにドラッグ＆ドロップしてプレハブとして登録
・ヒエラルキーにある Cursor オブジェクトを削除

　参考画像です。

３．クラス(スクリプト)制作

　カーソルの移動処理を管理する CursorController クラスを作成します。
このクラスはカーソルのプレハブに直接アタッチはせず、専用のオブジェクトを作成して利用します。

using UnityEngine;
using UnityEngine.Tilemaps;

public class CursorController : MonoBehaviour
{
    [SerializeField] private Tilemap tilemap;             // タイルマップ(複数ある場合には、利用したい Tilemap をアサイン)
    [SerializeField] private GameObject cursorPrefab;     // カーソルのプレハブ

    private GameObject cursorInstance;                    // 生成したカーソル
    private Vector3Int currentPosition;                   // カーソルの現在位置
    private Vector3Int initialPosition = Vector3Int.zero; // カーソルの生成初期位置（必要に応じて変更）


    private void Start() {

        // 初期カーソル位置設定
        currentPosition = initialPosition;

        // カーソルの生成
        cursorInstance = Instantiate(cursorPrefab, tilemap.CellToWorld(currentPosition), Quaternion.identity);
    }
    
    private void Update() {

        if (Input.GetKeyDown(KeyCode.UpArrow)) {
            MoveCursor(Vector3Int.up);
        }

        if (Input.GetKeyDown(KeyCode.DownArrow)) {
            MoveCursor(Vector3Int.down);
        }

        if (Input.GetKeyDown(KeyCode.LeftArrow)) {
            MoveCursor(Vector3Int.left);
        }

        if (Input.GetKeyDown(KeyCode.RightArrow)) {
            MoveCursor(Vector3Int.right);
        }
    }

    private void MoveCursor(Vector3Int direction) {

        currentPosition += direction;

        // タイルマップの範囲内に収める処理(移動先にタイルが存在するか確認し、存在している場合のみ移動)
        if (IsPositionValid(currentPosition)) {

            // カーソルの移動
            cursorInstance.transform.position = tilemap.CellToWorld(currentPosition);
        }
    }

    /// <summary>
    /// タイルマップの範囲内かどうかをチェック
    /// </summary>
    /// <param name="position"></param>
    /// <returns></returns>
    private bool IsPositionValid(Vector3Int position) {

        // タイルが存在するか確認
        return tilemap.HasTile(position);
    }
}

　Start メソッドでカーソルの初期位置を設定し、カーソルのインスタンスを生成しています。

　Update メソッドでは、矢印キーが押されたときにカーソルが移動するようにしています。

　MoveCursor メソッドでは、currentPosition に direction を加算し、Tilemap.CellToWorld() を使ってカーソルのワールド座標を更新しています。
これにより、タイルマップ上のグリッド単位でカーソルが動くようになります。

　GetKeyDown と GetKey の違いについてですが、Input.GetKeyDown(KeyCode.UpArrow) の場合にはキーを押した瞬間に1回だけ処理を実行します。
Input.GetKey(KeyCode.UpArrow) はキーを押し続けている間ずっと処理を実行します。

　もし Input.GetKey(KeyCode.UpArrow) を使うと、キーを押しっぱなしにしている間、毎フレーム MoveCursor(Vector3Int.up) が呼ばれ、カーソルが高速で移動してしまいます。
そのため、基本的には GetKeyDown を使用し、もしも押しっぱなしで移動させたい場合には、必要に応じて移動の間隔を調整したり、インターバルを挟む処理を追加すると良いでしょう。

　IsPositionValid メソッドでは、Tilemap.HasTile メソッドを利用し、指定した位置にタイルマップが存在するか確認しています。
このメソッドは、タイルマップが存在している場合には true、存在していない場合には false を返しますので、その情報を MoveCursor メソッド内で利用し、
タイルマップが存在している場合のみ、移動する処理を行うように制御しています。そうしないと、カーソルが画面外にも移動するようになってしまい、不具合の原因となるためです。

４．アタッチ

　Hierarchy にて Create Empty を行い、CursorController 用のオブジェクトを作成します。名前も同じにしておくとよいでしょう。
こちらに CursorController スクリプトをアタッチします。

　その後、ヒエラルキーにある Tilemap、および Prefabs フォルダ内にある Cursor プレハブの参照を Inspector にアサインして設定してください。

　参考画像です。

５．動作確認のための実行とデバッグ

　Unity Editor の Play ボタンを押して実行し、矢印キーやマウスクリックでカーソルが移動することを確認してください。

＜実装動画①　矢印キーの入力でのカーソル移動＞

＜実装動画②　左マウスクリックでのカーソル移動＞

　デバッグの方法としては、Debug.Log(currentPosition); を MoveCursor 内に記載して Console ビューに出力し、タイルマップ上のカーソル位置を確認できます。

　同じ様に Debug.Log(tilemap.HasTile(currentPosition)); を MoveCursor 内に記載することで、移動可能なマスかをチェックしている部分を確認できます。

　もしもうまく移動しない場合には、こういった方法を活用して、どこに問題点があるかを切り分けてチェックしてみてください。

４. 発展例

　Update でのキー入力を R3(UniRx) を使ったリアクティブプログラミングで Start メソッド内に書き直すことも可能です。

　例えば、上方向のキー入力を書き直してみた例です。追加分のみ記載しています。

using R3;
using UniRx;   // 利用している方を記載します。

public class CursorController : MonoBehaviour
{
    [SerializeField] private float moveInterval = 0.2f; // 移動の間隔(秒) を追加

    void Start() {
        this.UpdateAsObservable()
            .Where(_ => Input.GetKey(KeyCode.UpArrow))
            .ThrottleFirst(System.TimeSpan.FromSeconds(0.2f))
            .Subscribe(_ => MoveCursor(Vector3Int.up));
        }
    }

　上方向キーを押しっぱなしにして0.2秒ごとにカーソルを移動させることができます。

　同様に他のキーについても、Start メソッド内に追記することで置き換えが可能です。
その場合には Update メソッド内の処理は不要になりますので、Update メソッドごと削除してください。

　マウスクリックでの移動の場合は、Start メソッド内に下記のような形で実装できます。

    void Start() {
        // マウスによるクリック移動
        this.UpdateAsObservable()
            .Where(_ => Input.GetMouseButtonDown(0))
            .ThrottleFirst(System.TimeSpan.FromSeconds(moveInterval))
            .Subscribe(_ => MoveCursorToMouseClick());
    }

    /// <summary>
    /// マウスクリックした地点にカーソル移動
    /// </summary>
    private void MoveCursorToMouseClick() {
        Vector3 worldPosition = Camera.main.ScreenToWorldPoint(Input.mousePosition);

        // 座標のズレ分の調整値
        Vector3 offset = new Vector3(0.5f, 0.5f, 0);
        Vector3Int cellPosition = tilemap.WorldToCell(worldPosition + offset);

        currentPosition = cellPosition;

        // タイルマップの範囲内に収める処理(移動先にタイルが存在するか確認し、存在している場合のみ移動)
        if (IsPositionValid(currentPosition)) {

            // カーソルの移動
            cursorInstance.transform.position = tilemap.CellToWorld(currentPosition);
        }
    }

　ゲーム画面を左マウスクリックした際、そこにタイルマップが存在するならカーソルを瞬時に移動させます(テレポート移動)。
グリッド単位を保持したまま移動可能です。

５．まとめ

　本記事では、CursorController クラスで基本的なカーソル移動処理を実装し、また、R3(UniRx)を使った発展的なアプローチを紹介しました。

　今後のさらなる発展方法としては、ゲーム管理クラスを作成するようになったら、Start メソッドの利用は廃止してみましょう。
代わりに同様の処理を持つ初期設定用のメソッド(InitializeCursor メソッド、SetupCursor メソッドなど)を作成して、それをゲーム管理クラス側から実行する方式での実装方法に切り替えるとよいでしょう。

　タクティクス系のゲームを作る際になどに活用してみてください。

このページを編集するこのページを元に新規ページを作成

印刷する

コメント（0）

タイルマップ上をグリッド移動するカーソルの実装例 - i-school 先頭へ

コメントをかく

名前	ユーザIDを使用しないで書き込む	ユーザーIDを使う	ログインする
画像コード	画像に記載されている文字を下のフォームに入力してください。
備考	「http://」を含む投稿は禁止されています。
本文
利用規約をご確認のうえご記入下さい

i-school