2020/11/17(火) [n年前の日記]
#2 [godot] Godot Engineでタイトル画面その他を作成
Godot Engine 3.2.3 x64 を使って3D表示の簡単なシューティングゲームっぽいものを作る。
今回は、タイトル画面、ゲームオーバー画面、ステージクリア(You Win)画面を作成してみる。
今回は、タイトル画面、ゲームオーバー画面、ステージクリア(You Win)画面を作成してみる。
◎ タイトル画面を作成。 :
タイトル画面のシーンを作成。シーン → 新規シーン。
以下のようなノード構成を作成。
ルートノードを Title にリネーム。
res:// 直下に Title.tscn として保存。
以下のようなノード構成を作成。
ルートノードを Title にリネーム。
Title (Node2D) │ └─ CanvasLayer │ ├─ ColorRect │ ├─ Label │ └─ Button
res:// 直下に Title.tscn として保存。
◎ 各ノードをレイアウト。 :
以下のような見た目になるように、各ノードのプロパティを設定した。
- ColorRect で指定色の矩形を描画できる。青色にして、画面一杯に表示される size にした。
- Label で文字を描画できる。ゲームのタイトル「Simple Shoot'Em Up」を表示させた。使ったフォントは Vegur-Bold.otf。
- Button でマウスクリックに反応するボタンを置ける。「START」と表示させて下のほうに配置した。
◎ スクリプトを書く。 :
Title にスクリプトをアタッチして、res://scripts/Title.gd として保存。
ボタン(Button)を押した時に発行される pressed() シグナルにメソッドを接続する。
Title.gd の最後に、_on_Button_pressed() というメソッドが追記された。ボタンをマウスでクリックすると、このメソッドが呼ばれる状態になった。
スクリプトファイル Title.gd を修正する。内容は以下。
_Title.gd
これで、ボタンをマウスクリックすると Main.tscn にシーンが切り替わる状態になった。
ボタン(Button)を押した時に発行される pressed() シグナルにメソッドを接続する。
- Button を選択
- ノードタブをクリック → シグナルをクリック
- pressed() を右クリックして「接続」
- Title を選択して「接続」
Title.gd の最後に、_on_Button_pressed() というメソッドが追記された。ボタンをマウスでクリックすると、このメソッドが呼ばれる状態になった。
スクリプトファイル Title.gd を修正する。内容は以下。
_Title.gd
extends Node2D func _ready(): pass # Replace with function body. #func _process(delta): # pass func _on_Button_pressed(): get_tree().change_scene("res://Main.tscn")
- get_tree().change_scene("res://Main.tscn") で、res://Main.tscn にシーンを切り替える、という指定をしている。
これで、ボタンをマウスクリックすると Main.tscn にシーンが切り替わる状態になった。
◎ ボタンにショートカットキーを割り当て。 :
この状態では画面上のボタンをマウスでクリックしないと反応しないけど、できればキーボードを叩いた時も反応してほしい。Buttonノードにはショートカットキーを割り当てることもできるので、その設定をする。
Button を選択して、Shortcutプロパティを設定。
これで、スペースキーやEnterキーを叩いてもボタンが反応するようになった。
Button を選択して、Shortcutプロパティを設定。
- Shortcut の横の「空」をクリックして「新規 Shortcut」を選択。
- 作成された「Shortcut」をクリックするとその下にもShortcutの欄が出てくる。
- 横の「空」をクリックして「新規 InputEventAction」を選択。
- 作成された「InputEventAction」をクリックするとその下に Action 等が出てくる。
- Action に「ui_accept」と入力。
- ui_accept には、デフォルトでスペースキーやEnterキーが割り当てられている。プロジェクト設定で変更できる。
これで、スペースキーやEnterキーを叩いてもボタンが反応するようになった。
◎ メインシーンとして設定する。 :
ゲームを開始したら、Mainシーンではなく、この Titleシーンが真っ先に表示されてほしい。Title.tscn をメインシーンとして設定する。
ファイル一覧ウインドウで Title.tscn を右クリックして「メインシーンとして設定」を選択。
これで、このプロジェクトのメインシーンは Title.tscn になった。今後はF5キーを押すとメインシーン(Title.tscn) から実行される。
ファイル一覧ウインドウで Title.tscn を右クリックして「メインシーンとして設定」を選択。
これで、このプロジェクトのメインシーンは Title.tscn になった。今後はF5キーを押すとメインシーン(Title.tscn) から実行される。
◎ ゲームオーバー画面やステージクリア画面を作成。 :
Titleシーンを作った時と同じ手順で、ゲームオーバー画面とステージクリア画面のシーンを作成する。
それぞれ、ルートノードを、「GameOver」「YouWin」にリネームしておく。
ゲームオーバー画面にスクリプトをアタッチする。このスクリプトはステージクリア画面でも共用したいので、スクリプトファイル名は「GoToTitle.gd」にして保存する。
ステージクリア画面にも、ゲームオーバー画面と同じく GoToTitle.gd をアタッチ。Script → 「読込み」で GoToTitle.gd を選択してやる。もし操作を間違った時は、「クリア」を選べば「空」に戻る。
スクリプト GoToTitle.gd を修正。内容は以下。
_GoToTitle.gd
ゲームオーバー画面、ステージクリア画面の双方で、Button をマウスクリックした時に発行される pressed()シグナルにメソッドを接続してやる。
また、Button の Shortcut プロパティも設定して、キーボードを叩いてもボタンが反応するようにしておく。
それぞれ、ルートノードを、「GameOver」「YouWin」にリネームしておく。
ゲームオーバー画面にスクリプトをアタッチする。このスクリプトはステージクリア画面でも共用したいので、スクリプトファイル名は「GoToTitle.gd」にして保存する。
ステージクリア画面にも、ゲームオーバー画面と同じく GoToTitle.gd をアタッチ。Script → 「読込み」で GoToTitle.gd を選択してやる。もし操作を間違った時は、「クリア」を選べば「空」に戻る。
スクリプト GoToTitle.gd を修正。内容は以下。
_GoToTitle.gd
extends Node2D func _ready(): pass # Replace with function body. func _on_Button_pressed(): get_tree().change_scene("res://Title.tscn")
- get_tree().change_scene("res://Title.tscn") を呼ぶことで、res://Title.tscn にシーンを切り替える。
ゲームオーバー画面、ステージクリア画面の双方で、Button をマウスクリックした時に発行される pressed()シグナルにメソッドを接続してやる。
- GameOver、または YouWin を選択
- ノードタブをクリック → シグナルをクリック
- pressed() を右クリックして「接続」
- スクリプト GoToTitle.gd をアタッチしているノード(GameOver、YouWin)を選択
- メソッド名には _on_Button_pressed を入力して「接続」
また、Button の Shortcut プロパティも設定して、キーボードを叩いてもボタンが反応するようにしておく。
◎ ゲームオーバー画面にシーンを切り替える処理を追加。 :
Mainシーンのスクリプト Main.gd を修正。追加内容は以下。
_Main.gd
Player を選択して、プレイヤーが死んだ時に発行されるカスタムシグナル player_died() にメソッドを接続してやる。
Main を選択して、メソッド名に die_player を入力して「接続」。
これで、プレイヤーが死ぬと、Main.gd 内の die_player() が呼ばれて、ゲームオーバー画面に切り替わる状態になった。
同様に、敵にも設定をする。EnemyZako を選択して、敵が死んだ時に発行されるカスタムシグナル enemy_died() にメソッドを接続。
Main を選択して、メソッド名に die_enemy() を入力して「接続」。
これで、敵が死ぬと、Main.gd 内の die_enemy() が呼ばれて、ステージクリア画面に切り替わる状態になった。
_Main.gd
# ... func die_player(): get_tree().change_scene("res://GameOver.tscn") func die_enemy(): get_tree().change_scene("res://YouWin.tscn")
- ゲームオーバー画面にシーンを切り替えるメソッド、die_player() を追加。
- ステージクリア画面にシーンを切り替えるメソッド、die_enemy() を追加。
Player を選択して、プレイヤーが死んだ時に発行されるカスタムシグナル player_died() にメソッドを接続してやる。
- ノードタブをクリック → シグナルをクリック
- player_died() を右クリックして「接続」
Main を選択して、メソッド名に die_player を入力して「接続」。
これで、プレイヤーが死ぬと、Main.gd 内の die_player() が呼ばれて、ゲームオーバー画面に切り替わる状態になった。
同様に、敵にも設定をする。EnemyZako を選択して、敵が死んだ時に発行されるカスタムシグナル enemy_died() にメソッドを接続。
Main を選択して、メソッド名に die_enemy() を入力して「接続」。
これで、敵が死ぬと、Main.gd 内の die_enemy() が呼ばれて、ステージクリア画面に切り替わる状態になった。
◎ 動作確認。 :
F5キーを押して実行してみる。
プロジェクトのメインシーンとして Title.tscn を設定済みなので、F5キーを押せば最初にタイトル画面が表示されるはず。
タイトル画面 → ゲーム画面 → ゲームオーバー or ステージクリア → タイトル画面、とシーンが切り替わっていくようになった。
次回は…。今現在はプレイヤーが画面端を超えても平気で移動できてしまうので、そのあたりをどうにかしてみたい。
プロジェクトのメインシーンとして Title.tscn を設定済みなので、F5キーを押せば最初にタイトル画面が表示されるはず。
タイトル画面 → ゲーム画面 → ゲームオーバー or ステージクリア → タイトル画面、とシーンが切り替わっていくようになった。
次回は…。今現在はプレイヤーが画面端を超えても平気で移動できてしまうので、そのあたりをどうにかしてみたい。
[ ツッコむ ]
以上です。