【Godot Engine 2Dゲーム制作 Part4】UI部品を作成し、リストダイアログをつくろう

Godot Engine 2Dゲーム開発入門　第6回

リストダイアログを手軽に呼び出せるようにする

ダイアログ的に呼び出し可能にする

　現状のスクリプトでは、自分でListDialogをノードツリーに追加して、リスト選択の結果を受け取り、ListDialogをノードツリーから削除しなければなりません。気軽にダイアログとして利用できる形にはなっていません。

　まずは、_ready関数を次のように書き換えます。自身がルートノードの時だけ、確認用のダイアログを開くようにします。別のシーンから呼び出した時は、何もしないようにします。

list_dialog.gd　_ready

func _ready() -> void:
	if get_tree().get_current_scene() == self:
		var i = {"title": "title", "desc": "description"}
		init("ダイアログタイトル", [i, i, i, i, i, i, i, i, i])
		selected.connect(func(x): print(x))

　続いて「ListDialog」を手軽に利用できるstatic関数を作ります。list_dialog.gdの末尾に、次のスクリプトを追加します。

list_dialog.gd

# ダイアログを開く
static func open(title: String, menus: Array) -> int:
	var c_scn = Engine.get_main_loop().get_current_scene()
	var v_size = c_scn.get_viewport().get_visible_rect().size
	
	# リストダイアログを作成
	var dir = new().get_script().get_path().get_base_dir()
	var dialog = load(dir + "/list_dialog.tscn").instantiate()
	dialog.init(title, menus)
	c_scn.add_child(dialog)

	# スライド イン アニメーション
	dialog.offset = Vector2.RIGHT * v_size.x
	var tween = c_scn.create_tween().set_trans(Tween.TRANS_CUBIC)
	tween.tween_property(dialog, "offset", Vector2.ZERO, 0.5)
	tween.play()
	await tween.finished
	
	# 選択を待機
	var sel_menu = await dialog.selected

	# スライド アウト アニメーション
	tween = c_scn.create_tween().set_trans(Tween.TRANS_CUBIC)
	tween.tween_property(dialog, "offset", Vector2.LEFT * v_size.x, 0.5)
	tween.play()
	await tween.finished

	dialog.queue_free()
	return sel_menu

　まず、気を付けないといけないことを書きます。

　static関数として処理を呼び出すと、自身はノードツリーにぶら下がっていないので、通常のget_tree関数から始めるスクリプトを書けません。これまでのようにノードに関する処理を書こうとするとエラーになります。

　Engine.get_main_loop()と書くことで、ノードツリーにアクセスできます。ここではEngine.get_main_loop().get_current_scene()と書くことで、現在のシーンのルートノードを得ています。

　以降の処理は、これまで出てきた処理の組み合わせが主なので、何をおこなっているのかを箇条書きで書きます。

• リストダイアログを作成。
  • 自身のインスタンスを作り、スクリプトがある場所のディレクトリーを得る。
  • ディレクトリーのパスとlist_dialog.tscnを組み合わせて、「ListDialog」シーンをインスタンス化。
  • タイトルとメニューを設定したあと、ルートノードの子ノードにする。
• スライド イン アニメーション。
  • offsetを設定して、画面の右の外に出す。
  • 「Tween」で中心に移動するのを待つ。
• 選択を待機する。
  • await dialog.selectedで、selectedシグナルの発生を待ち、結果を受け取る。
• スライド アウト アニメーション
  • 「Tween」で画面の左の外に移動するのを待つ。
• 終了処理。
  • 「ListDialog」を削除して、選択した番号を返す。

実行確認

　ここまでのスクリプトを実行します。

　res://scn/title/title.gdをScriptビューで開き、_ready関数の末尾に一時的に次のようなスクリプトを書きます。この処理は、実行確認が終わったあと削除します。

title.gd　_ready

func _ready() -> void:
	# シーン開始
	SceneManager.effect_enter_scene()
	BgmManager.start_bgm()

	# 実行確認
	var i = {"title": "title", "desc": "description"}
	var res = await DialogList.open("ダイアログタイトル", [i, i, i, i, i, i, i, i, i])
	print(res)

　title.tscnを開いた状態で、「F6」を押すか、画面右上の「カチンコの中に▶のアイコン」（現在のシーンを実行）ボタンを押します。リストダイアログが表示されます。

　項目をクリックすると、その番号が出力されます。

DialogList.open

　確認が終わったら、_ready関数を元の状態に戻します。

title.gd　_ready

func _ready() -> void:
	# シーン開始
	SceneManager.effect_enter_scene()
	BgmManager.start_bgm()