-
まず、ゲームシーンを作成し、GameTitle という名前にして、タイトル画面のシーンとして設定します。
-
次に、ゲームオブジェクトを作成し、その名前に TitleControl を付け、テンプレートは空オブジェクトを選択します。このオブジェクトは後で UI や操作オブジェクトを格納するために使用されます。
- TitleControl 内で、MoveAndJumpSetting の重力を 0 に設定します。
Sprite2d ノードを追加し、その中にゲームタイトル画面の背景画像を追加します。
- さらに、3 つの Panel ノードと 2 つの Label ノードを追加します。
2 つの Label ノードはそれぞれ「ゲーム開始」と「ゲーム終了」のテキスト表示として使用し、フォントサイズを適切な大きさに調整します。
追加した Panel2 を「ゲーム開始」の背景として、Panel3 を「ゲーム終了」の背景として使用します。これらの Panel の「テーマのカバー–スタイル」で StyleBoxFlat を選択し、背景色を純粋な黒に設定します。
最初に追加した Panel を 2 つの選択肢の背景枠として使用します。完了後の表示は以下のようになります。
- 新しい AnimationPlayer ノードを追加します。
最初のアニメーションを追加し、InitStart という名前にして、デフォルトの選択画面に使用します。持続時間を 0.1 に、スナップを 0.1 に設定します。
「ゲーム開始」のフォント色を別の色（ここでは緑色）に変更し、キーフレームを設定します。
「ゲーム終了」のフォント色も直接キーフレームを設定します。
Panel2（「ゲーム開始」の背景）の「可視性–モジュレーション」にキーフレームを設定します。
Panel3（「ゲーム終了」の背景）の「可視性–モジュレーション」を透明に変更し、キーフレームを設定します。
設定後は以下のようになります：
- 2 番目のアニメーションを追加し、QuitSelect という名前にして、プレイヤーが「ゲーム終了」を選択したときのアニメーションに使用します。
持続時間を 0.2 に、スナップを 0.1 に設定します。
アニメーションの開始時点で、「ゲーム開始」と「ゲーム終了」のフォント色、Panel2 と Panel3 の「可視性–モジュレーション」にキーフレームを設定します。
アニメーションの末尾まで進めます。
「ゲーム開始」のフォント色をデフォルトの白色に戻し、キーフレームを設定します。
「ゲーム終了」のフォント色を緑色に変更し、キーフレームを設定します。
Panel2（「ゲーム開始」の背景）の「可視性–モジュレーション」を透明に変更し、キーフレームを設定します。
Panel3（「ゲーム終了」の背景）の「可視性–モジュレーション」を不透明に変更し、キーフレームを設定します。
完了後は以下のようになります：
- 3 番目のアニメーションを追加し、StartSelect という名前にして、プレイヤーが「ゲーム開始」を選択したときのアニメーションに使用します。
持続時間を 0.2 に、スナップを 0.1 に設定します。
アニメーションの開始時点で、「ゲーム開始」と「ゲーム終了」のフォント色、Panel2 と Panel3 の「可視性–モジュレーション」にキーフレームを設定します。
アニメーションの末尾まで進めます。
「ゲーム開始」のフォント色を緑色に変更し、キーフレームを設定します。
「ゲーム終了」のフォント色をデフォルトの白色に戻し、キーフレームを設定します。
Panel2（「ゲーム開始」の背景）の「可視性–モジュレーション」を不透明に変更し、キーフレームを設定します。
Panel3（「ゲーム終了」の背景）の「可視性–モジュレーション」を透明に変更し、キーフレームを設定します。
完了後は以下のようになります：
- 次に、TitleControl ノードに VS スクリプトを追加します。
スクリプトで状態図を以下のように作成します（デフォルト状態を初期状態に設定）：
（1）「開始」オプション選択状態で、信号 anima_StartSelect を送信し、オプション切り替えのサウンドを再生します。
（2）「終了」オプション選択状態で、信号 anima_QuitSelect を送信し、オプション切り替えのサウンドを再生します。
（3）「ゲーム開始」状態で、実行可能なアクションとして「シーンの終了」を追加します。
（4）「ゲーム終了」状態で、実行可能なアクションとして「ゲームの終了」を追加します。
接続設計：
プロジェクト設定で「上」「下」「確認」の 3 つの入力マッピングを追加します。
（1）デフォルト、「開始」オプション選択状態 → 「終了」オプション選択状態：入力「down」
（2）デフォルト、「開始」オプション選択状態 → 「ゲーム開始」：入力「確認」
（3）「終了」オプション選択状態 → 「ゲーム終了」：入力「確認」
（4）「終了」オプション選択状態 → 「開始」オプション選択状態：入力「up」
- 最初の GameTitle シーンに戻り、TitleControl 下の AnimationPlayer に gdscript スクリプトを追加します。
TitleControl ノードをクリックし、右側の信号エントリを見ると、刚才作成した 2 つの信号が表示されています。
2 つの信号をそれぞれダブルクリックして、AnimationPlayer のスクリプトに接続します。
AnimationPlayer のスクリプトに自動的に 2 つの信号メソッドが作成されます。それぞれの信号メソッドに、図のように対応するアニメーションの再生スクリプトを入力します。
また、以下のコードをコピーして貼り付けて上書きすることもできます。
extends AnimationPlayer
func _on_title_control_anima_quit_select(signal_name: String, value: Variant) -> void:
play("QuitSelect")
pass # Replace with function body.
func _on_title_control_anima_start_select(signal_name: String, value: Variant) -> void:
play("StartSelect")
pass # Replace with function body.
- 最初の GameTitle シーンに戻り、UI ノード下の UIObjectRoot 内で TitleControl をインスタンス化します。
- SceneTransition 画面に切り替え、GameTitle とゲーム開始後に切り替わるべきシーンを追加し、接続します。
GameTitle を初期シーンとして設定し、次のシーンに接続します。接続の切り替え条件は「前のシーンが終了した」に設定します。
これで、アニメーション切り替えと簡単な 2 行の信号スクリプト、そして主にノーコード状態スクリプトに依存するタイトル画面の作成方法が完成しました。アニメーション効果は必要に応じて変更できます。
次に、いくつかの最適化案を紹介します。
- TitleControl 内で、選択肢の下に Label ノードを追加し、「Enter キーで確認」というヒントを表示します。
-
タイトルシーンでバックグラウンドミュージック（BGM）を再生します：
まず、プロジェクトデータベースのオーディオデータベースに移動し、再生したい音楽を BGM として追加します。
TitleControl の VS スクリプトに入り、デフォルト状態で実行可能なアクションとして「音の再生」を追加し、追加した音楽を選択します。これでゲーム実行時に BGM が再生されます。 -
シーン切り替え時に音楽も切り替えます：
シーン切り替えの接続条件で、「切り替え前の演出」で BGM 効果を「停止」、「切り替え後の演出」で BGM 効果を「再生」に設定し、必要な音楽を選択します。
