
作成するダイアログの構造
Godot EngineのUI部品
ゲームでは、成績表示やアイテム表示などで、リスト形式で情報を出すことが多いです。Godot Engineでは、UI部品を組み合わせることで、こうしたリスト形式の表示を実現できます。
Godot EngineのUI部品は、ボタンやリストといった直接的な部品や、コンテナと呼ばれるレイアウト目的の部品などがあります。
UI部品は「Node を新規作成」ダイアログで、「Control」の配下にあります。
少し長くなりますが「Node を新規作成」ダイアログで表示されるリストを掲載します。
-
Control
-
Container
- AspectRatioContainer
-
BoxContainer
-
VBoxContainer
- ColorPicker
-
HBoxContainer
-
OpenXRInteractionProfileEditorBase
- OpenXRInteractionProfileEditor
-
OpenXRInteractionProfileEditorBase
-
VBoxContainer
- CenterContainer
-
FlowContainer
- HFlowContainer
- VFlowContainer
-
GraphElement
- GraphFrame
- GraphNode
- GridContainer
-
SplitContainer
- HSplitContainer
- VSplitContainer
- MarginContainer
-
PanelContainer
- OpenXRBinfingModifierEditor
- ScrollContainer
- SubViewportContainer
- TabContainer
-
BaseButton
-
Button
- CheckBox
- CheckButton
- ColorPickerButton
- MenuButton
- OptionButton
- LinkButton
- TetureButton
-
Button
-
TextEdit
- CodeEdit
- ColorRect
- GraphEdit
-
Range
-
ScrollBar
- HScrollBar
- VScrollBar
-
Slider
- HSlider
- VSlider
- ProgressBar
- SpinBox
- TextureProgressBar
-
ScrollBar
-
Separator
- HSeparator
- VSeparator
- ItemList
- Label
- LineEdit
- MenuBar
- NinePatchRect
- Panel
- ReferenceRect
- RichTextLabel
- TabBar
- TextureRect
- Tree
- VideoStreamPlayer
-
Container
作成するリストダイアログの構造
作成するリストダイアログは、3つのシーンを組み合わせて作ります。
まずは、ダイアログ本体のノード構成です。シーンの名前は「ListDialog」とします。
-
CanvasLayer(名前は「ListDialog」に変える)
- Panel
-
MarginContainer
-
VBoxContainer
- Label(名前は「Title」に変える)
-
ScrollContainer
- VBoxContainer(※)
-
VBoxContainer
次は、リストの各要素の基本的なノード構成です。このシーンが、ダイアログ本体の※印の場所に複数入ります。シーンの名前は「ListItem」とします。
-
Button(名前は「ListItem」に変える)
-
MarginContainer
- VBoxContainer
-
MarginContainer
この「ListItem」シーンは、そのまま使いません。継承して実際に使うシーンを作ります。シーンの名前は「ListItem2Row」とします。下のように「タイトル」と「説明」の2行の表示にします。
-
Button (ここは継承)(名前は「ListItem2Row」に変える)
-
MarginContainer (ここは継承)
-
VBoxContainer (ここは継承)
- Label(名前は「Title」に変える)
- Label(名前は「Desc」に変える)
-
VBoxContainer (ここは継承)
-
MarginContainer (ここは継承)
このような構成にすることで、リストの内容に応じて、2行のリスト、1行のリスト、画像付きリストなどを作れるようにします。
