目次

この記事について
開発環境
メインメニュー画面を作りたい
レイアウトを考える
使用フォントを決める
実際に画面上に配置する
実装方法
まとめ
参考文献

この記事について

この記事は一関高専Advent Calender2023 12日目の記事です。
これはデザインやGodotの知識に疎い私が、それっぽいメインメニュー画面をどうにかつくれないかと頑張った記録です。

一応書いておきますが、Godot Engineは汎用の2D/3Dゲームエンジンです。

開発環境

Windows 11 Pro 23H2
Godot Engine 4.1.1

メインメニュー画面を作りたい

今年は部活動の文化祭の展示として、2Dのアクションゲームを作成しました。しかし、諸事情~~(怠惰)~~でいつの間にか制作可能期間が5日間となっており、実際に遊ぶ画面以外は、ほとんど手をつけていないという非常に残念なことになってしまいました。
ですので、この機会にメインメニュー画面を作成しようと考えました。

↓制作したゲームのスクリーンショット

レイアウトを考える

まずはメインメニューに表示する項目についてまとめてみます。

タイトル：制作したゲーム名「pyonCat(ぴょんきゃっと)」を表示します。
スタートボタン：ゲームを開始させます。メイン画面(実際に遊ぶ画面)に遷移させます。
チュートリアルボタン：完全に私が悪いのですが、展示した際に、遊び方が分かりづらい...という雰囲気を感じたので新規で作成します。チュートリアル画面に遷移します。
設定ボタン：音量などの調整を行う設定画面に遷移します。
終了ボタン：ゲームを終了させます。

このゲームは私の好みで、4:3の画面比率で作成しています。少しでも昔のゲームのような雰囲気を出したかったのです(安直な考えですね)。そのため、メインメニュー画面もSFCのゲームでよく見るレイアウトにしてみます。

ざっくりとした配置を描いてみました。非常に雑ですが、見逃してください。これを元にGodot上で作成していきます。

使用フォントを決める

読みやすさと雰囲気を両立できるものが好ましいですね。絵が描けないため、タイトルロゴにも既存のフォントを使用させて頂きましょう。

あかずきんポップ
ポップな雰囲気の可愛いフォントです。タイトルロゴに使用させて頂きます。こちらのフォントのライセンスは Copyright(c) 2018 M+ FONTS PROJECT に準じるようです。
余談ですが、M+ FONTは従来のosdn版はM+ FONT LICENSE、新しめのGoogle Fonts/Git Hub版はSIL Open Font Licenseが適用されています。
ノスタルドット（M+）
読みやすいドットなフォントです。各ボタンのフォントにはメイン画面と同様にを使用させて頂きます。こちらのフォントのライセンスにはM+ FONT LICENSEが適用されています。基本自由に使用できますが、無保証という点は理解しておきましょう。

実際に画面上に配置する

Godot上に実際に配置してみました。登るゲームなので色合いは空をイメージしましたが、まあ...。
配置図では矢印でしたが、ゲーム内のアイテムの方が可愛いかなと思い変更しました。また、選択中のボタンを分かりやすくするためにフォーカス時に色を変更するようにしました。

実装方法

タイトル

タイトルロゴはペイント3Dで作成し、TextureRectで読み込ませて配置しました。

各ボタン

VBoxContainer内にスタートボタン等になるButtonを全部で4つ配置しました。これらをキーボードで選択操作するためにはいずれかのボタンが最初からフォーカスされている必要が有りそうです。なので、以下のようにgrab_focus()を使用しました。

#VBoxContainerにアタッチ
#シーン開始時にスタートボタンにフォーカスさせる
func _ready():
	$StartButton.grab_focus()

フォーカス時に色を変える処理は、各ボタンノードのfocus_enteredシグナルを自身につなげて、その関数内でself_modulateを変更しています。フォーカスが外れたときの処理はfocus_exitedシグナルを使用して同様に書けば良いです。

#StartButtonがフォーカスされたとき珊瑚色にする
func _on_start_button_focus_entered():
	self_modulate = Color.LIGHT_CORAL

#StartButtonのフォーカスが外されたとき元の色に戻す
func _on_start_button_focus_exited():
	self_modulate = Color(1,1,1,1)

画面の遷移にはchange_scene_to_file()を使います。Godot4 より前はchange_scene()と書いていたようですね。

#スタートボタンを押したらmainシーンに移動
func _on_start_button_pressed():
	get_tree().change_scene_to_file("res://Scenes/main.tscn")

選択カーソル

TextureRectにネコ缶のアニメーションを実装したものを子ノードにして表示しています。この処理は力技実装です。

カーソル(ネコ缶)の座標を管理するグローバル変数を用意(ここではcan_pos)
先ほどの各focus_entered内に各ボタンのグローバル座標をcan_posに代入
選択カーソルノードのprocess関数内で自身の位置をcan_posに更新

　本当はready関数で、全てのボタンのグローバル座標を取得して処理したかったのですが、なぜか全て同じ座標で取得されるので、この方法にしました。

#各ボタン内の処理
#グローバル変数can_posにそのボタンの座標を代入
func _on_start_button_focus_entered():
	My_Global.can_pos = self.global_position

#カーソルノード内の処理
#ネコ缶の位置を調整
var x_ad = 50.0
var y_ad = 35.0

func _process(delta):
	self.position = Vector2(My_Global.can_pos.x - x_ad , My_Global.can_pos.y + y_ad)

まとめ

Godotでメインメニュー画面を作成してみました。稚拙な部分ばかりで情けないですが、記事を作成するにあたって学ぶことも多かったので、個人的には良かったです。有用なものが書けるように精進します。

Godot Engine、なかなか気に入っているのですが、さすがにUnityと比べると解説記事などが少なく、初心者には辛いですね。もっと流行ると嬉しいな。

参考文献

【Godot】Godot3.5から4.0への移行メモ | 2dgames.jp
CanvasItem — Godot Engine (4.x)の日本語のドキュメント
Godot: マウスとキーボードで選択するパネルの実装例 - kidooom's Scrapbox
@coz (2021年5月2日).https://twitter.com/coz/status/1388820109032976384?t=mMlF74kuSPha1C9xGIqXBA&s=19