SRPGタクティカルゲーム開発チュートリアル
Part 1: マップとカーソルのハイライト
Godot Engine バージョン4.4
このチュートリアルでは、Godot 4.4を使用してファイアーエムブレム風の SRPG（シミュレーションRPG）を作成する方法を学びます。タイルマップの作成、カーソルによるマスのハイライト表示を構築していきます。
デモプレイはこちらから！
アセットのダウンロードはこちらから！
1. マップ構成
まずはマップのベースを構築します。今回がタイルのサイズは16pxで作成しています。
手順:
Node2D ノードを作成し、名前を Map に変更。Map の子に TileMapLayer を2つ追加:1つ目は
Map という名前にし、タイルセットで移動可能な地形を作成。2つ目は
Objects という名前にし、建物や壁などの移動不可能なオブジェクトを配置。
2. ハイライトカーソルの作成
プレイヤーがマウスカーソルでマスを確認できるように、カーソルの位置にハイライトを表示します。
手順:
新しい
Sprite2D を作成し、名前を Highlight に設定。半透明のハイライト画像（例えば青系の色）をスプライトに設定。またはお好みの画像を用意して使ってみてください！
以下のスクリプトをアタッチ:
extends Sprite2D
@export var tile_size := 16 # 1タイルのサイズ（ピクセル）
@onready var tilemap: TileMapLayer = %Map # マップのTileMapLayer参照
func _process(_delta): # マウス座標を取得 var mouse_pos = get_global_mouse_position() # マウス座標からタイル座標を計算 var cell = mouse_pos / tile_size cell = Vector2i(floor(cell.x), floor(cell.y)) # ハイライトをタイルの位置にスナップ global_position = cell * tile_sizeこれにより、カーソルを動かすと、対応するタイルが常にハイライトされるようになります。
3. カメラ設定
次にカメラの設定を行います！
Camera2Dを追加します。スクリプトを作成してcamera_2d.gdにします。作成してスクリプトに下記のコードをコピーして、
Camera2Dにアタッチします。
extends Camera2D
@export var speed: float = 300.0 # カメラの移動速度（ピクセル/秒）
# 毎フレーム呼ばれる処理。入力に応じてカメラを移動させるfunc _process(delta: float) -> void: var direction := Vector2.ZERO
# 上方向の入力と上限チェック if Input.is_action_pressed("ui_up") and position.y > limit_top: direction.y -= 1 # 下方向の入力と下限チェック if Input.is_action_pressed("ui_down") and position.y < limit_bottom: direction.y += 1 # 左方向の入力と左限チェック if Input.is_action_pressed("ui_left") and position.x > limit_left: direction.x -= 1 # 右方向の入力と右限チェック if Input.is_action_pressed("ui_right") and position.x < limit_right: direction.x += 1
# 方向ベクトルがゼロでなければ移動 if direction != Vector2.ZERO: position += direction.normalized() * speed * delta
これで矢印キーでカメラを移動することができるようになります！
4. マウスカーソルの変更（オプション）
お好みでマウスカーソルを変更してみてください！
Project Settingsを開いて、検索のところにmouseで検索してDisplay → Mouse CursorのCustom Imageに設定したいマウスカーソルの画像を選択します。
次のパートでは、ユニットの配置と移動の処理を実装していきます！