Godot 4.7.2を使い、タイトル画面、3択の質問画面、正解画面、不正解画面を行き来するサウンドノベル風ミニゲームを実際に作りました。
今回使った中心的なノードは、これまで学習してきたPanel、Label、Buttonです。画面の切り替えにはButtonのpressedシグナルと、各Panelのshow・hideを利用しました。ゲーム進行のためのスクリプトは書いていません。
この記事は一般的な機能紹介を寄せ集めたものではなく、私自身がGodotの画面を操作し、ミニゲームを組み立て、F6で実行して分岐を確認した記録をもとにしています。完成版を操作している様子から制作手順まで、約18分の動画にも残しています。
今回完成したゲーム
完成したのは、選択肢によって結果が変わる小さな分岐ゲームです。
- タイトル画面で「スタート」を押す
- 「あなたは男性ですか」という質問と3つの選択肢が表示される
- 「いいえ」を選ぶと「正解です」と表示される
- 「はい」または「どちらでもない」を選ぶと「残念」と表示される
- 「戻る」を押すとタイトル画面へ戻る
動画の冒頭では、この仕組みをサウンドノベル風に装飾した完成例も実際にプレイしています。進む方向によって、帰還、異世界で寿命を迎える結末、ラスボス討伐という異なる文章へ分岐させました。
複雑なゲームではありませんが、ボタンを押した結果によって画面が変わり、再び最初から遊べます。自分で動かしてみると、基本ノードだけでも「ゲームの流れ」を作れることが実感できました。
使用したノードと機能
今回主に使ったものは次のとおりです。
Control：UI全体のルートPanel：タイトル、質問、正解、不正解の各画面Label：タイトル、質問、結果の文字表示Button：スタート、3つの回答、戻る操作Signalのpressed：ボタンが押されたことを各画面へ伝えるshowとhide：Panelの表示・非表示Sprite2D：装飾版で使った背景画像Anchor Preset：PanelやUI部品の配置
この時点で知っていた基本機能を組み合わせることを優先し、新しいコードを大量に覚える形にはしませんでした。
新しいUIシーンにタイトル画面を作る
前回まで使っていたプロジェクトを開き、左上の「シーン」から新規シーンを追加しました。「ユーザーインターフェース」を選び、ルートにControlを作成します。
Controlの子にPanelを追加し、その下へLabelとButtonを追加しました。それぞれの役割が後から分かるように、次の名前を付けています。
- Panel：
TitleWindow - Label：
TitleLabel - Button：
StartButton
Labelの表示は「タイトル」、Buttonの表示は「スタート」に設定しました。
TitleWindowはAnchor Presetで中央へ置き、Panelの大きさを手で調整しました。サイズ変更で位置がずれたときは、もう一度Anchor Presetの中央を選ぶと戻せます。実際の制作でも何度か中央へ合わせ直しました。
TitleLabelはPanel上部、StartButtonは中央付近へ配置し、文字サイズも見やすい大きさへ変更しました。Labelを大きくしようとして横に細長くなってしまい、サイズを修正してから再配置する場面もありました。こうした小さなやり直しも、実際にUIを作ると起きやすい部分だと思います。
複製を使って3択の質問画面を作る
タイトル画面と似た構造の画面を一から作り直すのではなく、Panel、Label、Buttonを選択して右クリックし、「複製」を使いました。配置や文字サイズなどの設定も引き継げるので、同じ構成の画面を増やす作業がかなり楽になります。
複製したPanelはQuizWindow、LabelはQuizLabelへ変更しました。回答用Buttonは3つに増やし、次の名前にしました。
Answer1：「はい」Answer2：「いいえ」Answer3：「どちらでもない」
QuizLabelの質問文は「あなたは男性ですか」としています。Answer1を左、Answer2を中央、Answer3を右側へ配置しました。「どちらでもない」は文字数が多く、そのButtonだけ文字サイズを小さくして収めています。
QuizWindowの作業中はTitleWindowを一時的に非表示にしました。複数のPanelが同じ場所に重なるため、編集中の画面以外を隠すと選択しやすくなりました。
正解画面と不正解画面も複製で用意する
続いて、結果を表示するPanelを2つ作りました。ここでもTitleWindowのセットを複製しています。
正解用は次の名前です。
- Panel：
CorrectWindow - Label：
CorrectLabel（表示は「正解です」） - Button：
CorrectButton（表示は「戻る」）
不正解用は次の名前です。
- Panel：
WrongWindow - Label：
WrongLabel（表示は「残念」） - Button：
WrongButton（表示は「戻る」）
似たノードが増えてくると、どのButtonなのか分かりにくくなります。実際に作りながら、後で見ても役割が分かる名前へ早めに変更しておく方がよいと感じました。
初期状態ではTitleWindowだけを表示し、QuizWindow、CorrectWindow、WrongWindowは非表示にします。
pressedシグナルで画面を切り替える
画面遷移にはButtonのpressedシグナルを使いました。
StartButtonを選択し、インスペクター横の「シグナル」タブからpressedを選びます。スタートを押したときは、QuizWindowをshowし、同時にTitleWindowをhideするよう接続しました。
つまり、1回のボタン操作で次の2つを行います。
- これから見せたいPanelを
show - 今表示しているPanelを
hide
この組み合わせを回答Buttonにも設定しました。今回の最終的な分岐は次のとおりです。
| 押すButton | 隠す画面 | 表示する画面 | 結果 |
|---|---|---|---|
| StartButton | TitleWindow | QuizWindow | 質問を表示 |
| Answer1 | QuizWindow | WrongWindow | 残念 |
| Answer2 | QuizWindow | CorrectWindow | 正解です |
| Answer3 | QuizWindow | WrongWindow | 残念 |
| CorrectButton | CorrectWindow | TitleWindow | タイトルへ戻る |
| WrongButton | WrongWindow | TitleWindow | タイトルへ戻る |
スクリプトで状態を管理しているわけではありませんが、この規模ならPanelの表示と非表示だけで一連の画面遷移を作れました。
quiz.tscnとして保存し、全分岐を実行確認
設定後、シーンをquiz.tscnとして保存し、F6の「現在のシーンを実行」で動かしました。
最初にタイトルとスタートボタンが表示され、スタートを押すと3択画面へ移動しました。その後、実際に3つの回答を順番に試しています。
- 「はい」→「残念」→戻る
- 「いいえ」→「正解です」→戻る
- 「どちらでもない」→「残念」→戻る
この確認によって、どの回答からも意図した結果へ移動し、タイトルへ戻れることを確かめました。設定しただけで終わらせず、すべての選択肢を押して動作を確認した点も、この記事の元になっている実作業の一部です。
Sprite2Dで背景画像を入れるとゲームらしくなった
基本UIだけの状態でも分岐は完成しましたが、見た目はかなり簡素でした。そこで、各Panelの下にSprite2Dを追加し、ファンタジー風の背景画像を設定した別バージョンも作りました。
画像は、Godot左下のファイルシステムへ先に追加します。その画像をSprite2DのTextureへドラッグ＆ドロップすると、背景として表示できました。
ここで実際に気をつけたのが、シーンツリー内の順番です。Sprite2DをPanelのすぐ下に置き、LabelやButtonより前に描画される位置関係にしました。順番が悪いと背景が文字を隠してしまうためです。
背景と文章を変えるだけでも、同じ画面遷移の仕組みをサウンドノベル、クイズ、簡単なRPG風の選択イベントへ応用できます。
実際に作って分かったこと
今回の制作で特に実感したのは、次の4点です。
1. 基本ノードだけでもゲームの形になる
学習を始めたばかりだと、たくさんのノードやGDScriptを覚えないとゲームにならないように感じます。しかし、Panel、Label、Button、Signalだけでも、選択、分岐、結果、再スタートというゲームの基本的な流れを作れました。
2. 複製はUI制作の手間を大きく減らす
同じレイアウトの画面を何度も作る場合、複製すればサイズや配置を引き継げます。ただし、複製後にノード名と表示テキストを整理しないと、後のSignal接続で混乱しやすくなります。
3. showとhideは小規模な画面遷移を理解しやすい
表示したいPanelと隠したいPanelを明示的に選ぶため、画面がどう切り替わるのかを追いやすい方法でした。一方、画面や分岐が大幅に増える場合は、接続数も増えるため、将来的にはスクリプトや別の状態管理も検討した方がよさそうです。
4. 最後はすべての経路を押して確かめる
Signalの接続先を間違えても、エディター上の見た目だけでは気づきにくいことがあります。今回のような3択でも、正解だけでなく不正解2パターンと戻る操作まで確認するのが大切でした。
まとめ
Godot 4.7.2で、Panel、Label、Button、Signalを組み合わせ、スクリプトなしの分岐ミニゲームを完成させました。
今回行ったことは次のとおりです。
- タイトル、質問、正解、不正解の4画面をPanelで作成
- ノードの複製で同じ設定を再利用
- 3つのButtonから結果画面へ分岐
pressedとshow・hideで画面を切り替え- F6で全選択肢と戻る操作を実際に確認
- Sprite2Dへ背景を設定してサウンドノベル風に装飾
私自身もGodotを学習している途中ですが、覚えた機能を組み合わせて実際に動くものを作ると、それぞれのノードの役割が一気に分かりやすくなりました。
制作の全操作と完成版のプレイは、動画で確認できます。
コメント