🤖 2Dグリッドベース移動

はじめに

このチュートリアルでは Godot で 2D ゲームにおける「グリッドベース移動」を実装してみます。できるだけシンプルに。

そもそもグリッドベース移動って何なん？という方もいらっしゃるかと。グリッドベース移動とは、グリッド（格子状の線）で等間隔に区分されたゲームの画面上をキャラクターなどのオブジェクトが 1 グリッド（1 マス）ずつ移動する動きのことです。

少し昔のゲームを例にあげて恐縮ですが、「ファイヤーエムブレムシリーズ」「タクティクスオウガ」など、シミュレーションゲームでよく見かけます。あとは「ファイナルファンタジー」や「ドラゴンクエスト」シリーズなどの RPG も 2D グラフィック時代は、マップ上のキャラクター移動を観察すると、グリッドベース移動を行っています。テトリスなんかのパズルゲームでもピースやブロックの移動がグリッドベースになっていることが結構あります。

このように、グリッドベース移動はさまざまなジャンルのゲームで使用されていて、その汎用性はかなり高いと言えます。

Environment
このチュートリアルは以下の環境で作成しました。
・Godot のバージョン: 4.3
・コンピュータのOS: macOS 14.6.1

ちなみに、今回作ったプロジェクトは、GitHubリポジトリに置いています。

ウインドウの設定

Godot で新規プロジェクトを作成したら、まずはプロジェクト設定ですね。プロジェクト メニュー > プロジェクト設定 を開き、General タブのサイドバーから Display > Window を選択して、ウインドウのサイズとストレッチを設定します。

Size:
- Width: 240
- Height: 176
- Windows Width Override: 960
- Windows Height Override: 704
- Test Width: 960
- Test Height: 704
Stretch:
- Mode: viewport
- Aspect: keep

アセットのインポート

プロジェクトで使ったアセットは KENNEY のサイトからダウンロードさせていただいたものです。利用したのは 1-Bit Pack というアセットパックです。この素晴らしすぎる無料の素材に感謝せずにはいられません。

ダウンロードしたら、その Tilesheet フォルダ内の colored-transparent_packed.png ファイルをエディタのファイルシステムドックへドラッグ&ドロップしてプロジェクトにインポートします。

ファイルをインポートした直後は画像がぼやけた感じ（ブラ〜）になっているので、また プロジェクト メニュー > プロジェクト設定 を開き、General タブのサイドバー Rendering > Textures を選択して、デフォルトのテクスチャフィルタを Nearest に設定します。

Canvas Textures
- Default Texture Filter: Nearest

これでピクセルアート特有のエッジの効いた画像になるのです。

タイルマップでゲームの世界を用意する

タイルマップで背景を作っておかないと、プレイヤーキャラクターがグリッドベース移動できているのかわかりにくいので、まず最初のシーンとして、ゲームの世界をタイルマップで作ります。ちなみに、タイルマップの作り方は以下の記事が参考になるかと思います。今回のプロジェクトでは TileMapLayer ノードはひとつだけにしています。

参考記事： 🤖 TileMapLayerでタイルマップを作ろう

シーンドックはこんな感じになりました。シンプル。

タイルマップのお絵描きをする前に、TileSet エディタで Paint タブを開いて、Paint Properties > Physics > Physics Layer 0 を選択し、木とか墓のタイルに衝突形状を設定しておきます。これでキャラクターが通り抜けられないタイルになるはずです。

そして、 TileMap エディタで適当にお絵描きします。手入れの行き届いた墓地です。

プレイヤーキャラクターを作る

プレイヤーキャラクターのシーンを作成します。今回、グリッドベース移動させる対象がコレですね。

新規シーンを CharacterBody2D クラスのノードをルートノードにして作成します。ルートノードの名前を「Player」に変更しました。あとはルートノードに以下の子ノードたちを追加します。

Sprite2D
CollisionShape2D
RayCast2D

ここから Player シーンの各ノードを編集していきます。

Sprite2D ノード

Sprite2D ノードの各プロパティ編集後のインスペクタを先にお見せしておきます。

編集したプロパティについてそれぞれ説明します。

インスペクターの Texture プロパティに最初に用意したアセットファイル res://colored-transparent_packed.png をドラッグして適用しました。
Offset > Centered プロパティをオフにしました。これで、このノードの位置（Position プロパティ）がテクスチャの中央ではなく左上角になって、ちょうど 1 グリッドにキャラクターのスプライトが収まるようになります。
Region > Enabled をオンにしました。
Edit Region ボタンをクリックして、Region Editor を開き、ここで割り当てたいスプライトのテクスチャ領域を指定していきます。作業しやすいように、展開アイコンをクリックしてパネルを広げておきます。
パネル上部の snapモード で グリッドスナップ を選択し、続けて ステップ を 16px 16px にします。これでグリッドのサイズがスプライトシートのテクスチャ 1 つ分と同じサイズになりますね。この状態で、スプライトシート上でドラッグ操作により「王様」のテクスチャを範囲選択しました。

以上で Sprite2D ノードのプロパティ編集は終わりです。

CollisionShape2D ノード

このノードで CharactorBody2D ノード（ルートノード）に対して衝突形状を設定します。編集後のインスペクタはこんな感じになりました。

2Dワークスペース上はこんな感じになっています。

では、編集したプロパティについて確認していきます。

Shape プロパティに 新規 RectangleShape2D リソースを適用します。
適用した RectangleShape2D のプロパティのうち Size を (x: 16 px, y: 16 px) に設定します。これは 2Dワークスペースで視覚的に調整してもOKですね。
Sprite2D ノードのテクスチャの位置に合わせるため、 Transform > Position プロパティの値を (x: 8, y: 8) にします。

RayCast2D ノード

このノードはグリッドベース移動での衝突判定にとても便利です。2Dワークスペース上はコリジョン形状が矢印型で表されます。この矢印とオブジェクトが重なった場合に衝突を検知するというわけです。これを利用して、プレイヤーキャラクターの前方にあるオブジェクトとの衝突を検知させ、その先には進めないようにするなど制御することができます。反対に、このノードがないと、たとえプレイヤーキャラクターと障害物のタイルにそれぞれ衝突形状が設定されていても、キャラクターを障害物の方へグリッドベース移動させると、衝突せずに通過できてしまいます。

編集後のインスペクタはこのようになりました。

2Dワークスペース上はこんな感じです。

プロパティをそれぞれ確認しますね。

Enabled を On（デフォルト）のままにしておきます。これで衝突判定が可能になります。
Transform > Position プロパティを (x: 8, y: 8) にしました。Sprite2D のテクスチャの中央に位置を合わせるためですね。
Target Position を (x: 16, y: 0) にしました。これは暫定的に初期値を設定しているだけで、実際はスクリプトでプレイヤーキャラクターの移動操作に合わせて値を変更することになります。
Collide With は Areas は Off、Bodies は On（デフォルト）のままにしておく。先にタイルセットに設定した木や墓のタイルは物理ボディなので Bodies にチェックが入っていれば、衝突が検知されます。

Player ノードにグリッドベース移動を実装する

インプットマップを設定する

先にキーボードのキー入力でプレイヤーキャラクターを動かせるように、プロジェクト設定のインプットマップにアクションを追加していきます。プロジェクトメニュー > プロジェクト設定 を選択して Input Map タブを開き、以下の４つの Action を追加します。

move_right: D キー
move_left: A キー
move_down: S キー
move_up: W キー

*上下左右の矢印キーを割り当ててもOKです。

Player ノードにスクリプトをアタッチして編集する

Player （ルート）ノードにスクリプトをアタッチします。できあがったコードがこちらです。簡単ですが、説明のコメントを入れています。

extends CharacterBody2D


# インプットマップのアクションに相応するキーに方向ベクトルの値を設定した辞書
const inputs = {
    "move_right": Vector2.RIGHT,
    "move_left": Vector2.LEFT,
    "move_down": Vector2.DOWN,
    "move_up": Vector2.UP
}

# タイル一つ分の縦横サイズと同じ 16 を格納
var grid_size = 16

# RayCast2D を参照
@onready var ray_cast_2d: RayCast2D = $RayCast2D

# インプットマップのアクションのいずれかが入力されたら、引数に inputs のキーを渡して move 関数を呼び出す
func _unhandled_input(event):
    for action in inputs.keys():
        if event.is_action_pressed(action):
            move(action)

# 入力されたキーに合わせて RayCast2D の方向を更新し、衝突判定がなければ 1 グリッド移動
func move(action):
    var destination = inputs[action] * grid_size
    ray_cast_2d.target_position = destination
    ray_cast_2d.force_raycast_update()
    if not ray_cast_2d.is_colliding():
        position += destination

これでグリッドベース移動が制御できるようになったはずですね。

World シーンに Player シーンのインスタンスを追加する

Player シーンが完成したので、そのインスタンスノードを World シーンに追加します。

World.tscn シーンを開いて、ルートの World ノードに Player.tscn シーンのインスタンスノードを追加します。

2Dワークスペースで、画面のだいたい中央あたり（適当）に Player ノードを配置します。

グリッドベース移動の動作確認をする

作業が完了したので、実際にグリッドベース移動が問題なくできるかどうか確認してみたいと思います。

特に RayCast2D ノードの矢印型コリジョン形状も確認したいので、先に デバッグ(Debug) メニュー > Visible Collision Shapes を有効にしておきます。

Main Scene に World.tscn を設定してプロジェクトを実行します。王様がグリッドベース移動で墓地をうろついています。とんでもない奇行ですね。

一回のキー入力で、タイル 1 つ分だけ移動しているのがおわかりいただけますでしょうか。わざと木や墓のタイルの方向に移動しようとしても、衝突判定によって移動できないことも確認できました（ご丁寧に、矢印が赤く表示されますね）。

おわりに

今回は 2D ゲームにおけるグリッドベース移動を実装してみました。比較的簡単に実装できたのではないかと思います。さらに発展させれば、プレイヤーや敵のキャラクターを自動でグリッドベース移動させるなどできそうな気がしますね。あなたのゲーム開発のお役に立てたなら幸いです。