【Godot Engine】フラッピーバードを作るチュートリアル (Part.5)

概要

この記事は Godot Engine でフラッピーバードを作るチュートリアルの最後の記事となります。

前回の記事はこちらから
https://zenn.dev/syun77/articles/f4991e756a893d

ゲームオーバーとリトライを作る

最後にゲームオーバーとリトライ処理を実装します。

フォントを追加する

フォントのダウンロード

Godot Engine にデフォルトで含まれているフォントはサイズが小さいので、別のフォントを使えるようにします。
フォントはここからダウンロードします。
https://www.dafont.com/xolonium.font

フォントをプロジェクトに追加する

ダウンロードしたファイルから Xolonium-Regular.ttf をプロジェクトに追加します。

ファイルシステムにドラッグ＆ドロップすると Xolonium-Regular.ttf がプロジェクトに追加されます。

Labelを配置する

Mainノードを右クリックして、「＋子ノードを追加」を選びます。

ここから Label を選んで「作成」をクリックします。

Labelを作成できたら、名前を「Caption」に変更しておきます。

Labelの設定をする

---

(※2021.12.20 追記)

Godot3.4あたりから、フォントの設定は Control > Theme(新規Themeの作成) > Default Font に移動したようです

ここから新規Themeを作成してそれをクリックして、

Theme > Default Font から 新規DynamicFont を作成します。

※追記終わり

---

インスペクタから Control > Custom Fonts > Font > [空] をクリックして、「新規 DynamicFont」を選択します。

作成した "Dynamic Font" をクリックして、Font > FontData > [空] をクリックして、「読込み」を選びます。

"Xolonium-Regular.ttf" を選択して「開く」ボタンをクリックします。

試しに Label > Text に「GAME OVER」と入力すると、指定したフォントで文字が描画されるようになりました。

まずは中央揃えにしたいので、Label > Align を「Center」にします。

次にパラメータを以下のように設定します。（位置と描画範囲の調整）

• Rect > Position > (x, y): (0, 120)
• Rect > Size > (x, y): (800, 256)

さらに Custom Fonts > Font > Settings > Size を「64」とします。

これにより以下のようなレイアウトとなります。

プレイヤーの消滅処理を作る

プレイヤーを消滅させる処理を作ります。
Player.gd の _process()を以下のように修正します。

Player.gd

func _process(delta):	
	# 移動処理を行う
	_update_moving(delta)
	
	# 衝突処理
	_update_collision(delta)
	
	# アニメーション
	_update_anim(delta)
		
+	if position.x < 0 or position.y > 480:
+		# 画面外に出たら消滅する
+		queue_free()

画面外に出たら queue_free() で消滅させるようにしました。

ゲームオーバー判定を作る

ゲームオーバー判定を実装します。
Main.gd を開いて以下のように修正します。

Main.gd

extends Node2D

# 土管オブジェクト
var Dokan = preload("res://Dokan.tscn")

# 出現間隔(最初は3秒)
var interval = 3

# 生成タイマー
var timer = interval

# 土管出現回数
var dokan_cnt = 0

+# キャプション
+onready var caption = $Caption

+# プレイヤー
+onready var player = $Player

func _ready():
	# 乱数を初期化
	randomize()
	
+	# キャプションは初期状態では非表示にしておく
+	caption.visible = false

func _process(delta):
	timer += delta
	if timer > interval:
		# インターバルを超えたら土管を出現させる
		timer -= interval
		_add_dokan()
		
+	if is_instance_valid(player) == false:
+		# プレイヤーが消滅した
+		# キャプションを更新
+		caption.visible = true
+		caption.text = "GAME OVER\n\n RETRY: DOWN KEY"
+		
+		# 下キーが押されたらリトライ
+		if Input.is_action_just_pressed("ui_down"):
+			# Mainシーンを読み込み直してリトライする
+			get_tree().change_scene("res://Main.tscn")

func _add_dokan():
	# 出現回数をカウントアップ
	dokan_cnt += 1

	# 高さを決める
	var xbase = 800 + 120
	var ybase = rand_range(32, 400-32)
	
	# 土管を上下に生成
	for i in range(2):
		var dokan = Dokan.instance()
		var py = ybase
		if i == 0:
			# 上のドカン
			py += -320
		else:
			# 下のドカン
			py += 320 + 160

		# 土管の出現回数が増えるとスピードアップ
		var speed_rate = 1 + 0.5 * dokan_cnt
		dokan.start(Vector2(xbase, py), speed_rate)
		add_child(dokan)
	
	# インターバルを減らす
	interval = max(0.5, interval-0.2)

実行してゲームオーバー時の表示とリトライ（下キー）ができることを確認します。

キャプションの描画順を修正する

"GAME OVER" の文字が土管の後ろに描画されているので、最前面に描画するように修正します。
"Main" シーンを右クリックして「＋子ノードを追加」を選びます。

CanvasLayer を選んで「作成」ボタンをクリックします。

「Caption」ノードをドラッグ＆ドロップして、ノードの階層を以下のようにします。

「CanvasLayer」ノードを選択して、インスペクタから CanvasLayer > Layer > Layer の値が「1」になっていることを確認します。

この値が大きいほど、画面手前に表示されます。CanvasLayerを使用しない場合は Layer = 0 なので、「Caption」は プレイヤーや土管よりも手前に表示されることになります。

Main.gd の修正

「Caption」の階層を移動させたため、実行するとMain.gdではエラーが発生します。

なので、Main.gdを以下のように修正します。

Main.gd

extends Node2D

# 土管オブジェクト
var Dokan = preload("res://Dokan.tscn")

# 出現間隔(最初は3秒)
var interval = 3

# 生成タイマー
var timer = interval

# 土管出現回数
var dokan_cnt = 0

# キャプション
-onready var caption = $Caption
+onready var caption = $CanvasLayer/Caption

# プレイヤー
onready var player = $Player

……

実行して、「GAME OVER」の文字が土管よりも手前に描画されることを確認します。

完成プロジェクト

完成したプロジェクトは以下からダウンロード可能です。
http://syun777.sakura.ne.jp/tmp/godot/FlappyBird.zip

もしうまく動作しない場合はこちらを参考にしてみるとよいかもしれません。

Godot4の完成版 (2023.4.8追記)

Godot4用にコンバートしたプロジェクトファイルをアップロードしておきました。
http://syun777.sakura.ne.jp/tmp/godot/FlappyBird_Godot4.zip