はじめに
この記事は、Godot 4.xで脱出ゲームを作る連載の第3回です。
- 第1回：環境構築とプロジェクト作成
- 第2回：Claude Code + godot-mcpのセットアップ
- 第3回：Claude Code + godot-mcpでスプラッシュ画面を実装する（今回）
前提条件
- Claude Code + godot-mcpのセットアップ完了（別記事「GodotをClaude Codeと連携させる」参照）
- Godot 4.7がインストール済み
-
scenes/splash.tscn（空のControlシーン）が作成済み（第1回参照）
まずは最初に成果物
-
スプラッシュ画面
-
仮のタイトル画面
1. Claude Codeに指示する
GodotプロジェクトのルートディレクトリでClaude Codeを起動し、以下のように指示します。
第2回の記事の手順に沿って、scenes/splash.tscnにスプラッシュ画面を実装して。
構成は以下の通り：
- Splash (Control) ※ルートノード、Rect全面
- BackgroundColor (ColorRect) ※Rect全面、黒背景
- LogoTexture (TextureRect) ※中央配置、Keep Aspect Centered
その後、scripts/splash.gdを作成して以下を実装：
- フェードイン（1秒）→ 待機（1.5秒）→ フェードアウト（1秒）
- 完了後にres://scenes/title.tscnへ遷移
- @export変数で各時間をインスペクタから調整可能に
2. Claude Codeの動作ログ
Claude Codeは以下の順で作業を進めました。
2-1. プロジェクト構造の把握
まず既存のファイル構成を確認したうえで、splash.tscnの上書きとsplash.gdの新規作成を行う方針を決定しました。
2-2. scenes/splash.tscnの編集
Write(escape-game-sample/scenes/splash.tscn)
⎿ Added 22 lines, removed 2 lines
最初の書き込みは一度エラーが出ましたが、自動でリトライして成功しました。
生成されたsplash.tscnの内容は以下の通りです。
[gd_scene format=3 uid="uid://c5iyg7tjmhtbp"]
[ext_resource type="Script" path="res://scripts/splash.gd" id="1_splash"]
[node name="Splash" type="Control"]
layout_mode = 3
anchors_preset = 15
anchor_right = 1.0
anchor_bottom = 1.0
grow_horizontal = 2
grow_vertical = 2
script = ExtResource("1_splash")
[node name="BackgroundColor" type="ColorRect" parent="."]
layout_mode = 1
anchors_preset = 15
anchor_right = 1.0
anchor_bottom = 1.0
grow_horizontal = 2
grow_vertical = 2
color = Color(0, 0, 0, 1)
[node name="LogoTexture" type="TextureRect" parent="."]
layout_mode = 1
anchors_preset = 15
anchor_right = 1.0
anchor_bottom = 1.0
grow_horizontal = 2
grow_vertical = 2
stretch_mode = 5
2-3. scripts/splash.gdの作成
Write(escape-game-sample/scripts/splash.gd)
⎿ Wrote 16 lines to escape-game-sample/scripts/splash.gd
scripts/フォルダの存在を確認してからスクリプトを生成しました。
3. 生成されたコードの解説
3-1. splash.gd
extends Control
@export var fade_in_duration: float = 1.0
@export var wait_duration: float = 1.5
@export var fade_out_duration: float = 1.0
func _ready() -> void:
modulate.a = 0.0
var tween := create_tween()
tween.tween_property(self, "modulate:a", 1.0, fade_in_duration)
tween.tween_interval(wait_duration)
tween.tween_property(self, "modulate:a", 0.0, fade_out_duration)
tween.finished.connect(_on_tween_finished)
func _on_tween_finished() -> void:
get_tree().change_scene_to_file("res://scenes/title.tscn")
3-2. 手動実装版との違い
Claude Codeは指示された構成をベースにしつつ、一点独自の判断をしました。
modulate.aの適用対象がルートノード（self）になっている
手動実装版ではLogoTexture（TextureRect）にのみフェードをかけていましたが、Claude CodeはルートノードのSplash全体にフェードを適用しました。
| 実装 | modulate適用対象 | 挙動 |
|---|---|---|
| 手動実装版 | LogoTexture | ロゴのみフェード。背景は最初から表示される |
| Claude Code版 | Splash（ルート） | 背景・ロゴまとめてフェード。起動時は真っ暗から始まる |
ルートノードにフェードをかける方がコードがシンプルで、かつ背景色ごとフェードインするので演出として自然なため、今回はこちらの実装を採用します。
3-3. ノード構成の補足
生成されたsplash.tscnではLogoTextureのアンカーがRect全面（anchors_preset = 15）になっています。画像が設定されていない状態では問題ありませんが、ロゴ画像をセットする場合はインスペクタでCustom Minimum Sizeを指定してサイズを調整してください。
4. 動作確認用の仮タイトルシーンを用意する
遷移先のscenes/title.tscnがまだ存在しない場合、Claude Codeに作成を依頼します。
scenes/title.tscnを仮で作成して。
ルートはControl（Rect全面）で、Labelノードを追加して「(仮) タイトル画面」と表示するだけでOK。
5. 起動シーンの設定と動作確認
5-1. Main Sceneの設定
プロジェクト > プロジェクト設定 > Application > Run > Main Scene にscenes/splash.tscnを設定します。
5-2. 実行
F5でゲームを実行し、以下の流れで動作すれば成功です。
- 真っ暗な画面からフェードインして表示される
- しばらく待機した後フェードアウトして消える
- 自動的に「(仮) タイトル画面」に遷移する
5-3. うまく動かない場合
| 症状 | 確認ポイント |
|---|---|
| シーンが開かない |
Main Sceneがsplash.tscnに設定されているか |
| フェードしない |
scripts/splash.gdがSplashノードにアタッチされているか |
| 遷移時にエラー |
scenes/title.tscnが存在するか |
6. 追加指示：テキストの表示
スプラッシュ画面にタイトルテキストを追加してみます。Claude Codeへの指示は一行で十分です。
スプラッシュ画面の中央に黄色いテキストで「Escape Game」を表示してください
6-1. Claude Codeの動作ログ
Read 1 file (ctrl+o to expand)
Update(escape-game-sample/scenes/splash.tscn)
⎿ Added 12 lines
既存のsplash.tscnを読み込んで差分だけを追記しました。生成された内容は以下の通りです。
[node name="TitleLabel" type="Label" parent="."]
layout_mode = 1
anchors_preset = 15
anchor_right = 1.0
anchor_bottom = 1.0
grow_horizontal = 2
grow_vertical = 2
theme_override_colors/font_color = Color(1, 1, 0, 1)
text = "Escape Game"
horizontal_alignment = 1
vertical_alignment = 1
6-2. 生成内容の解説
| プロパティ | 値 | 意味 |
|---|---|---|
anchors_preset = 15 |
全面 | 親ノード全体を覆う領域に配置 |
horizontal_alignment = 1 |
Center | テキストを水平方向に中央揃え |
vertical_alignment = 1 |
Center | テキストを垂直方向に中央揃え |
theme_override_colors/font_color |
Color(1, 1, 0, 1) |
黄色（RGBA） |
anchors_preset = 15（全面）＋縦横中央揃えの組み合わせで、あらゆる画面サイズで中央に表示されます。
6-3. フォントサイズの調整
フォントサイズはClaude Codeへの追加指示、またはインスペクタから調整できます。
Claude Codeへの指示例：
TitleLabelのフォントサイズを72に変更して
手動で変更する場合：splash.tscnのTitleLabelノードに以下を追加します。
theme_override_font_sizes/font_size = 72
TIPS：テキストをロゴ画像に差し替える
セクション7で追加したTitleLabel（テキスト）を、自前のロゴ画像に置き換えたい場合のやり方です。
手順
まず assets/images/ にロゴ画像（PNG/SVGなど）を配置します。ファイルを用意したらClaude Codeに一言指示するだけです。
assets/images/logo.png に画像を置いたので反映して
Claude Codeの動作ログ
Claude Codeはまず assets/images/ フォルダを確認しにいきます。画像がない状態で指示した場合は以下のように案内されます。
assets/ フォルダに画像ファイルがまだない状態です。
ロゴ画像を用意するには2通りあります：
1. 画像ファイルを用意する — PNG/SVG などを assets/images/logo.png などに配置してもらえれば、
LogoTexture の texture プロパティに紐付けます
2. Godot エディタで設定する — TitleLabel を削除した上で、エディタで LogoTexture のインスペクタから
Texture にドラッグ&ドロップする形でも対応できます
画像を配置して再度指示すると、以下のようにsplash.tscnを差分更新してくれます。
Write(escape-game-sample/scenes/splash.tscn)
⎿ Added 2 lines, removed 12 lines
生成された差分の内容は以下の通りです。
# 追加：ロゴ画像をext_resourceとして登録
[ext_resource type="Texture2D" path="res://assets/images/logo.png" id="2_logo"]
# LogoTextureにtextureプロパティを追加
[node name="LogoTexture" type="TextureRect" parent="."]
...
texture = ExtResource("2_logo") ← 追加
stretch_mode = 5
# TitleLabel（テキストノード）は丸ごと削除
ポイント解説
Claude Codeが行った変更は3つです。
-
ext_resourceの追加：logo.pngをGodotのリソースとして.tscnに登録 -
LogoTextureへのテクスチャ紐付け：texture = ExtResource("2_logo")の1行を追加 -
TitleLabelの削除：テキストノードを丸ごと取り除いて差し替え
画像ファイルさえ用意すれば、あとはClaude Codeが.tscnのリソース登録から参照設定まで一括でやってくれるため、Godotエディタでインスペクタを操作する必要はありません。
注意：画像を差し替えたい場合も同様に
assets/images/に新しいファイルを置いて「logo.pngを新しい画像に差し替えて」と指示するだけでOKです。
まとめ
今回はClaude Code + godot-mcpを使って、自然言語の指示だけでスプラッシュ画面の実装を行いました。
| 作業 | 手動の場合 | Claude Codeの場合 |
|---|---|---|
| ノード追加 | エディタで1つずつ追加 | 指示1回で一括生成 |
| スクリプト作成 | エディタで新規作成・入力 | 自動生成 |
| ファイル保存 | 手動で保存 | 自動 |
| 追加指示・修正 | エディタで再編集 | 自然言語で追加指示するだけ |
| 画像の設定 | 画像を置いて手動でドラッグ＆ドロップ | 画像を置いて指示するだけで自動反映 |
Claude Codeが特に力を発揮するのはノード構成の作成・スクリプト生成・差分追記です。「テキストを黄色にして」「中央に配置して」といった曖昧な指示でも正しいGodotのプロパティに変換してくれるため、エディタとドキュメントを行き来する手間が大幅に減ります。
画像アセットの紐付けも「ファイルを置いて一言指示」するだけで完結するため、手動操作が必要な場面はほとんどありません。
次回はtitle.tscnを本実装し、タイトル画像と「はじめる」ボタンを配置してゲーム本編へ遷移する仕組みをClaude Codeで実装します。