はじめに
この記事は、Godot 4.xで脱出ゲームを作る連載の第4回です。
- 第1回：環境構築とプロジェクト作成
- 第2回：Claude Code + godot-mcpのセットアップ
- 第3回：Claude CodeとMCPでスプラッシュ画面を実装する
- 第4回：Claude CodeとMCPでタイトル画面を実装してシーンを遷移する（今回）
前回（第3回）ではスプラッシュ画面を実装しました。今回はタイトル画面の構築とメイン画面への遷移を、引き続きClaude Codeへの自然言語指示で実装していきます。
この記事で作るもの
- ビューポートサイズの調整
- タイトル画面（背景・ロゴ・明滅するスタートボタン）の作成
- タップでメイン画面へ遷移する仕組み
- メイン画面（背景のみ）の作成
前提条件
- Claude Code + godot-mcpのセットアップ完了（第2回参照）
-
scenes/splash.tscnとscripts/splash.gdが作成済み（第3回参照） - タイトル画面・メイン画面用の画像素材が
assets/images/に配置済み
1. ビューポートの設定
まずプロジェクトの基準解像度を調整します。
プロジェクト > プロジェクト設定 > ディスプレイ > ウィンドウ で以下を設定します。
| 項目 | 値 |
|---|---|
| ビューポート幅 | 1870 |
| ビューポート高さ | 841 |
| ストレッチ > モード | canvas_items |
| ストレッチ > アスペクト | expand |
設定後、project.godot には以下のように書き出されます。
[display]
window/size/viewport_width=1870
window/size/viewport_height=841
window/stretch/mode="canvas_items"
window/stretch/aspect="expand"
canvas_items モードにすることでUIノードも含めてスケーリングされます。expand を指定するとアスペクト比を維持しつつ画面いっぱいに広がります。この設定の詳細は第5回（レスポンシブ対応編）で改めて扱います。
2. タイトル画面の作成
2-1. Claude Codeへの指示
GodotプロジェクトのルートディレクトリでClaude Codeを起動し、以下のように指示します。
プロンプト：
scenes/title.tscnを作成して。構成は以下の通り：
- Title (Control) ※ルートノード、Rect全面
- BgTitle (TextureRect) ※bg_title.pngを全画面表示、stretch_mode=Scale
- TxtTitle (TextureRect) ※txt_title.pngをBgTitleの上に表示、Keep Aspect Centered
- BtnTapToStart (TextureButton) ※btn_tap_to_start.pngをTxtTitleのY軸下側に配置
2-2. 生成されたシーン構成
Claude Codeが生成したシーンツリーは以下の通りです。
Title (Control) ← ルートノード
├── BgTitle (TextureRect) ← 背景画像
├── TxtTitle (TextureRect) ← タイトルロゴ画像
└── BtnTapToStart (TextureButton) ← スタートボタン
生成された title.tscn の内容です。
[gd_scene format=3]
[ext_resource type="Script" path="res://scripts/title.gd" id="0_script"]
[ext_resource type="Texture2D" path="res://assets/images/bg_title.png" id="1_bg"]
[ext_resource type="Texture2D" path="res://assets/images/txt_title.png" id="2_txt"]
[ext_resource type="Texture2D" path="res://assets/images/btn_tap_to_start.png" id="3_btn"]
[node name="Title" type="Control"]
layout_mode = 3
anchors_preset = 15
anchor_right = 1.0
anchor_bottom = 1.0
grow_horizontal = 2
grow_vertical = 2
script = ExtResource("0_script")
[node name="BgTitle" type="TextureRect" parent="."]
layout_mode = 0
offset_right = 1920.0
offset_bottom = 1083.0
texture = ExtResource("1_bg")
expand_mode = 1
stretch_mode = 1
[node name="TxtTitle" type="TextureRect" parent="."]
layout_mode = 0
offset_left = 294.0
offset_top = 93.0
offset_right = 1602.3657
offset_bottom = 831.0
texture = ExtResource("2_txt")
expand_mode = 1
stretch_mode = 6
[node name="BtnTapToStart" type="TextureButton" parent="."]
layout_mode = 0
offset_left = 700.0
offset_top = 539.0
offset_right = 1239.0
offset_bottom = 728.0
texture_normal = ExtResource("3_btn")
2-3. 生成内容のポイント解説
画像の重ね合わせ（z軸の順序）
Godotのシーンツリーでは、後に記述されたノードが前面（z軸上位）に描画されます。BgTitle → TxtTitle → BtnTapToStart の順に記述することで、ロゴとボタンが背景の手前に表示されます。
stretch_mode の使い分け
| ノード | stretch_mode | 意味 |
|---|---|---|
| BgTitle |
1（Scale） |
画面全体に引き伸ばす |
| TxtTitle |
6（Keep Aspect Centered） |
アスペクト比を維持して中央配置 |
TextureButton でシンプルな画像ボタン
TextureButton の texture_normal に画像を指定するだけで画像ボタンになります。Label や StyleBox を使わずに実装できるため、デザインの自由度が高いです。
3. 明滅アニメーションの実装
3-1. Claude Codeへの指示
プロンプト：
Tap to Start を2秒ごとに明滅させてください（最低輝度は25%）
3-2. 生成されたスクリプト（title.gd）
extends Control
func _ready() -> void:
$BtnTapToStart.pressed.connect(_on_btn_tap_to_start_pressed)
_start_blink()
func _start_blink() -> void:
var tween := create_tween().set_loops()
tween.tween_property($BtnTapToStart, "modulate:a", 0.25, 0.5)
tween.tween_interval(0.5)
tween.tween_property($BtnTapToStart, "modulate:a", 1.0, 0.5)
tween.tween_interval(0.5)
func _on_btn_tap_to_start_pressed() -> void:
get_tree().change_scene_to_file("res://scenes/main.tscn")
3-3. 明滅アニメーションのポイント解説
set_loops() で無限繰り返し
create_tween().set_loops() を呼ぶことで、シーンが破棄されるまでTweenが無限に繰り返されます。
明滅の1サイクルは2秒で以下の流れになります。
| フェーズ | 時間 | 透明度の変化 |
|---|---|---|
| フェードアウト | 0.5秒 | 100% → 25% |
| 消灯待機 | 0.5秒 | 25% 維持 |
| フェードイン | 0.5秒 | 25% → 100% |
| 点灯待機 | 0.5秒 | 100% 維持 |
シグナルの接続
$BtnTapToStart.pressed.connect(_on_btn_tap_to_start_pressed) でボタンの pressed シグナルをスクリプトのメソッドに接続しています。GDScript 4では .connect() を使ってコードから接続するのが定番のスタイルです。
4. メイン画面の作成
4-1. Claude Codeへの指示
プロンプト：
scenes/main.tscnを作成してください。
bg_stage_001.pngをBgTitleと同じようにフルスクリーン表示してください。
4-2. 生成されたシーン
[gd_scene format=3]
[ext_resource type="Texture2D" path="res://assets/images/bg_stage_001.png" id="1_bg"]
[node name="Main" type="Control"]
layout_mode = 3
anchors_preset = 15
anchor_right = 1.0
anchor_bottom = 1.0
grow_horizontal = 2
grow_vertical = 2
[node name="BgStage001" type="TextureRect" parent="."]
layout_mode = 0
offset_right = 1920.0
offset_bottom = 1083.0
texture = ExtResource("1_bg")
expand_mode = 1
stretch_mode = 1
タイトル画面と同じ構成で、背景画像だけを表示するシーンです。次回以降、ここにホットスポットやアイテム取得の仕組みを追加していきます。
5. メイン画面への遷移
プロンプト：
title.tscnのTap to Startがタップされたら、main.tscnに遷移してください
_on_btn_tap_to_start_pressed() の中で get_tree().change_scene_to_file() を呼ぶことでシーンを切り替えます。
func _on_btn_tap_to_start_pressed() -> void:
get_tree().change_scene_to_file("res://scenes/main.tscn")
change_scene_to_file() はGodot 4で推奨されるシーン遷移のAPIです。引数にはシーンファイルの res:// パスを指定します。
6. 動作確認
ゲームを実行し、以下の流れで動作すれば成功です。
- スプラッシュ画面が表示されフェードイン/アウトする
- タイトル画面に遷移し、背景とロゴが表示される
- 「Tap to Start」ボタンが明滅している
- ボタンをクリック/タップするとメイン画面に遷移する
うまく動かない場合
| 症状 | 確認ポイント |
|---|---|
| タイトル画面が表示されない |
splash.gd の next_scene_path が res://scenes/title.tscn になっているか |
| ロゴが背景に隠れる | シーンツリーで TxtTitle が BgTitle より後に配置されているか |
| ボタンをタップしても遷移しない |
scripts/title.gd がTitleノードにアタッチされているか |
| メイン画面でエラーが出る |
scenes/main.tscn が存在するか。bg_stage_001.png が assets/images/ にあるか |
まとめ
今回はClaude Code + godot-mcpを使って以下を実装しました。
| やったこと | ポイント |
|---|---|
| ビューポート設定 |
canvas_items + expand でマルチ解像度対応 |
| 背景画像表示 |
TextureRect + stretch_mode=1（Scale） |
| 画像の重ね合わせ | シーンツリーの記述順がz軸の順序になる |
| 画像ボタン |
TextureButton の texture_normal に画像を設定するだけ |
| 明滅アニメーション |
Tween.set_loops() で modulate:a を無限繰り返し |
| シーン遷移 |
get_tree().change_scene_to_file() でパスを指定 |
Claude Codeへの指示は「ノード名・画像ファイル名・配置の概要」を伝えるだけで、.tscn の記述・スクリプトの生成・シグナルの接続まで一括でやってくれます。特に今回の 「ボタンの明滅アニメーション」 のような演出は、実装方針（Tween.set_loops()）まで含めて提案してくれるのが便利です。
次回はメイン画面にレスポンシブなホットスポットを配置し、クリックでアイテムを取得する仕組みを実装します。
成果物
タイトル画面
↓
Tap to Startを押す
↓
メイン画面
