mieki256's diary



2020/11/17(火) [n年前の日記]

#2 [godot] Godot Engineでタイトル画面その他を作成

Godot Engine 3.2.3 x64 を使って3D表示の簡単なシューティングゲームっぽいものを作る。

今回は、タイトル画面、ゲームオーバー画面、ステージクリア(You Win)画面を作成してみる。

タイトル画面を作成。 :

タイトル画面のシーンを作成。シーン → 新規シーン。

以下のようなノード構成を作成。

3d_tuto13_create_title_ss01.png


ルートノードを Title にリネーム。

3d_tuto13_create_title_ss02.png

Title (Node2D)
  │
  └─ CanvasLayer
         │
         ├─ ColorRect
         │
         ├─ Label
         │
         └─ Button


res:// 直下に Title.tscn として保存。

3d_tuto13_create_title_ss03.png

各ノードをレイアウト。 :

以下のような見た目になるように、各ノードのプロパティを設定した。

3d_tuto13_create_title_ss04.png

  • ColorRect で指定色の矩形を描画できる。青色にして、画面一杯に表示される size にした。
  • Label で文字を描画できる。ゲームのタイトル「Simple Shoot'Em Up」を表示させた。使ったフォントは Vegur-Bold.otf。
  • Button でマウスクリックに反応するボタンを置ける。「START」と表示させて下のほうに配置した。

スクリプトを書く。 :

Title にスクリプトをアタッチして、res://scripts/Title.gd として保存。

ボタン(Button)を押した時に発行される pressed() シグナルにメソッドを接続する。
  1. Button を選択
  2. ノードタブをクリック → シグナルをクリック
  3. pressed() を右クリックして「接続」
  4. Title を選択して「接続」

3d_tuto13_create_title_ss05.png


Title.gd の最後に、_on_Button_pressed() というメソッドが追記された。ボタンをマウスでクリックすると、このメソッドが呼ばれる状態になった。

3d_tuto13_create_title_ss06.png


スクリプトファイル 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プロパティを設定。
  1. Shortcut の横の「空」をクリックして「新規 Shortcut」を選択。
  2. 作成された「Shortcut」をクリックするとその下にもShortcutの欄が出てくる。
  3. 横の「空」をクリックして「新規 InputEventAction」を選択。
  4. 作成された「InputEventAction」をクリックするとその下に Action 等が出てくる。
  5. Action に「ui_accept」と入力。

3d_tuto13_create_title_ss07.png

  • ui_accept には、デフォルトでスペースキーやEnterキーが割り当てられている。プロジェクト設定で変更できる。

これで、スペースキーやEnterキーを叩いてもボタンが反応するようになった。

メインシーンとして設定する。 :

ゲームを開始したら、Mainシーンではなく、この Titleシーンが真っ先に表示されてほしい。Title.tscn をメインシーンとして設定する。

ファイル一覧ウインドウで Title.tscn を右クリックして「メインシーンとして設定」を選択。

3d_tuto13_create_title_ss08.png

これで、このプロジェクトのメインシーンは Title.tscn になった。今後はF5キーを押すとメインシーン(Title.tscn) から実行される。

ゲームオーバー画面やステージクリア画面を作成。 :

Titleシーンを作った時と同じ手順で、ゲームオーバー画面とステージクリア画面のシーンを作成する。

それぞれ、ルートノードを、「GameOver」「YouWin」にリネームしておく。

3d_tuto13_create_title_ss09.png

3d_tuto13_create_title_ss10.png


ゲームオーバー画面にスクリプトをアタッチする。このスクリプトはステージクリア画面でも共用したいので、スクリプトファイル名は「GoToTitle.gd」にして保存する。

3d_tuto13_create_title_ss11.png


ステージクリア画面にも、ゲームオーバー画面と同じく GoToTitle.gd をアタッチ。Script → 「読込み」で GoToTitle.gd を選択してやる。もし操作を間違った時は、「クリア」を選べば「空」に戻る。

3d_tuto13_create_title_ss12.png


スクリプト 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()シグナルにメソッドを接続してやる。
  1. GameOver、または YouWin を選択
  2. ノードタブをクリック → シグナルをクリック
  3. pressed() を右クリックして「接続」
  4. スクリプト GoToTitle.gd をアタッチしているノード(GameOver、YouWin)を選択
  5. メソッド名には _on_Button_pressed を入力して「接続」

また、Button の Shortcut プロパティも設定して、キーボードを叩いてもボタンが反応するようにしておく。

ゲームオーバー画面にシーンを切り替える処理を追加。 :

Mainシーンのスクリプト Main.gd を修正。追加内容は以下。

_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() にメソッドを接続してやる。
  1. ノードタブをクリック → シグナルをクリック
  2. player_died() を右クリックして「接続」

3d_tuto13_create_title_ss13.png


Main を選択して、メソッド名に die_player を入力して「接続」。

3d_tuto13_create_title_ss14.png

これで、プレイヤーが死ぬと、Main.gd 内の die_player() が呼ばれて、ゲームオーバー画面に切り替わる状態になった。


同様に、敵にも設定をする。EnemyZako を選択して、敵が死んだ時に発行されるカスタムシグナル enemy_died() にメソッドを接続。

3d_tuto13_create_title_ss15.png


Main を選択して、メソッド名に die_enemy() を入力して「接続」。

3d_tuto13_create_title_ss16.png

これで、敵が死ぬと、Main.gd 内の die_enemy() が呼ばれて、ステージクリア画面に切り替わる状態になった。

動作確認。 :

F5キーを押して実行してみる。

3d_tuto13_create_title_ss17.png

プロジェクトのメインシーンとして Title.tscn を設定済みなので、F5キーを押せば最初にタイトル画面が表示されるはず。




タイトル画面 → ゲーム画面 → ゲームオーバー or ステージクリア → タイトル画面、とシーンが切り替わっていくようになった。

次回は…。今現在はプレイヤーが画面端を超えても平気で移動できてしまうので、そのあたりをどうにかしてみたい。

以上です。

過去ログ表示

Prev - 2020/11 - Next
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30

カテゴリで表示

検索機能は Namazu for hns で提供されています。(詳細指定/ヘルプ


注意: 現在使用の日記自動生成システムは Version 2.19.6 です。
公開されている日記自動生成システムは Version 2.19.5 です。

Powered by hns-2.19.6, HyperNikkiSystem Project