今回はタブメニューのUIを作成する方法について説明します。
目次
タブメニューの作り方
メインシーンの作成
プロジェクトを作成して、Mainシーン (Node2D) を作成します。
![](https://2dgames.jp/wp-content/uploads/2023/03/Main_tscn_-_TestTab_-_Godot_Engine.png)
TabContainer ノードを作成する
続けて Mainノードの下に TabContainer ノードを追加します。
![](https://2dgames.jp/wp-content/uploads/2023/03/Node_%E3%82%92%E6%96%B0%E8%A6%8F%E4%BD%9C%E6%88%90.png)
![](https://2dgames.jp/wp-content/uploads/2023/03/Main_tscn_-_TestTab_-_Godot_Engine-1.png)
それと TabContainer のサイズが小さいので少し広げておきます。
![](https://2dgames.jp/wp-content/uploads/2023/03/Main_tscn_-_TestTab_-_Godot_Engine-2-1024x598.png)
VBoxContainer ノードの追加
TabContainer の下に VBoxContainer ノードを追加します。これは縦方向に自動でノードを並べてくれるコンテナです。
![](https://2dgames.jp/wp-content/uploads/2023/03/Cursor_%E3%81%A8_Node_%E3%82%92%E6%96%B0%E8%A6%8F%E4%BD%9C%E6%88%90.png)
TabContainer の下にコンテナが追加されたことで、それがタブ名となりました。
![](https://2dgames.jp/wp-content/uploads/2023/03/Main_tscn_-_TestTab_-_Godot_Engine-3.png)
TabContainer はこのようにノード名をそのままタブ名とする仕組みとなっているようです。
![](https://2dgames.jp/wp-content/uploads/2023/03/Main_tscn_-_TestTab_-_Godot_Engine-4.png)
ちなみに Godot Engine のシーンビュー上では直接日本語をノード名にすることはできないため、テキストエディタなどからコピーして貼り付けることで、日本語ノード名を指定することができます。
![](https://2dgames.jp/wp-content/uploads/2023/03/weapon.gif)
VBoxContainer の下に Buttonノードを追加
VBoxContainer ノードの下に Buttonノードを追加します。
![](https://2dgames.jp/wp-content/uploads/2023/03/Cursor_%E3%81%A8_Node_%E3%82%92%E6%96%B0%E8%A6%8F%E4%BD%9C%E6%88%90-1.png)
![](https://2dgames.jp/wp-content/uploads/2023/03/Main_tscn_-_TestTab_-_Godot_Engine-5.png)
インスペクタから Text に「銅の剣」と入れておきます。
![](https://2dgames.jp/wp-content/uploads/2023/03/Main_tscn_-_TestTab_-_Godot_Engine-6.png)
このようになりました。
![](https://2dgames.jp/wp-content/uploads/2023/03/Main_tscn_-_TestTab_-_Godot_Engine-7.png)
続けて Buttonノードを右クリック > 複製 (Ctrl+D / Cmd+D) で5つほど増やしておきます。
Textの文字は以下のようにしましたが、どんな文字でもOKです。
![](https://2dgames.jp/wp-content/uploads/2023/03/Main_tscn_-_TestTab_-_Godot_Engine-8.png)
TabContainerの下にVBoxContainerを追加
TabContainerの下にVBoxContainerを追加します。すると以下のように新しいタブが追加されました。
![](https://2dgames.jp/wp-content/uploads/2023/03/Main_tscn_-_TestTab_-_Godot_Engine-9.png)
ノード名はテキストエディタで入力した文字をコピーすると、日本語名に変更できます。
![](https://2dgames.jp/wp-content/uploads/2023/03/Cursor_%E3%81%A8_____Main_tscn_-_TestTab_-_Godot_Engine.png)
なおタブの切り替えですが、エディタ上では TabContainer のインスペクタの「Current Tab」の値を切り替えることで確認できます。
![](https://2dgames.jp/wp-content/uploads/2023/03/tab.gif)
では、Buttonノードを追加して、Text に文字を設定してきます。
![](https://2dgames.jp/wp-content/uploads/2023/03/Main_tscn_-_TestTab_-_Godot_Engine-10.png)
TabContainer に VBoxContainerを追加する
3つくらいタブがあったほうが良いような気がしたので、もう1つ追加していきます。
![](https://2dgames.jp/wp-content/uploads/2023/03/Main_tscn_-_TestTab_-_Godot_Engine-11.png)
ノード名は「杖」にしておきました。
さらに Button ノードを追加します。
![](https://2dgames.jp/wp-content/uploads/2023/03/Main_tscn_-_TestTab_-_Godot_Engine-12.png)
ボタンにSignalを設定する
最後にそれぞれの Button に Signal を設定します。手動で設定するのは大変なのでスクリプトから設定します。
Mainノードを選択してスクリプトをアタッチします。
![](https://2dgames.jp/wp-content/uploads/2023/03/Main_tscn_-_TestTab_-_Godot_Engine-13.png)
Main.gd スクリプトには以下のように記述します。
extends Node2D
## TabContainer.
@onready var _container = $TabContainer
## 開始.
func _ready() -> void:
# macOS版はなぜか画面が小さいのでリサイズする.
#DisplayServer.window_set_size(Vector2i(1152*2, 648*2))
for vbox in _container.get_children():
for button in vbox.get_children():
# buttonのpressedシグナルの呼び出し関数に _on_button_pressedを設定する
# 引数はボタンのテキスト名とする.
button.connect("pressed", _on_button_pressed.bind(button.text))
## ボタン押したときのシグナル.
func _on_button_pressed(name:String) -> void:
print("%s を押しました"%name)
macOS版の場合は、現状(2023/3/20現在)のGodot 4ではなぜか画面が4分の1のサイズとなるので、リサイズ処理を入れました。(さらにプロジェクト設定から自動スケールを有効にしています)
では実行して、クリックしたボタンに対応する文字が「出力ウィンドウ」に表示されることを確認します。
![](https://2dgames.jp/wp-content/uploads/2023/03/tabmenu.gif)
プロジェクトファイル
今回作成したプロジェクトファイルを添付しておきます。
参考
Godot 4での connect() の書き方は以下の記事を参考にしました。