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

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

　この連載は、Godot Engineでのゲーム開発を始めて、簡単なミニゲームを作るまでを、順を追ってたどるものです。前回は、ゲームの画面を遷移したり、その際に演出を加えたり、BGMの管理をしたりしました。最終回の今回は、UI部品の作成をおこないます。ゲームでよくある、多数の項目が並んだリストを表示するダイアログを作ります。また、ゲームの記録を保存したり、その記録を復帰したりします。

作成するダイアログの構造

Godot EngineのUI部品

　ゲームでは、成績表示やアイテム表示などで、リスト形式で情報を出すことが多いです。Godot Engineでは、UI部品を組み合わせることで、こうしたリスト形式の表示を実現できます。

　Godot EngineのUI部品は、ボタンやリストといった直接的な部品や、コンテナと呼ばれるレイアウト目的の部品などがあります。

• ユーザーインターフェース (UI) — Godot Engine (4.x)の日本語のドキュメント

　UI部品は「Node を新規作成」ダイアログで、「Control」の配下にあります。

　少し長くなりますが「Node を新規作成」ダイアログで表示されるリストを掲載します。

• Control
  • Container
    • AspectRatioContainer
    • BoxContainer
      • VBoxContainer
        • ColorPicker
      • HBoxContainer
        • OpenXRInteractionProfileEditorBase
          • OpenXRInteractionProfileEditor
    • 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
  • TextEdit
    • CodeEdit
  • ColorRect
  • GraphEdit
  • Range
    • ScrollBar
      • HScrollBar
      • VScrollBar
    • Slider
      • HSlider
      • VSlider
    • ProgressBar
    • SpinBox
    • TextureProgressBar
  • Separator
    • HSeparator
    • VSeparator
  • ItemList
  • Label
  • LineEdit
  • MenuBar
  • NinePatchRect
  • Panel
  • ReferenceRect
  • RichTextLabel
  • TabBar
  • TextureRect
  • Tree
  • VideoStreamPlayer

作成するリストダイアログの構造

　作成するリストダイアログは、3つのシーンを組み合わせて作ります。

　まずは、ダイアログ本体のノード構成です。シーンの名前は「ListDialog」とします。

• CanvasLayer（名前は「ListDialog」に変える）
  • Panel
  • MarginContainer
    • VBoxContainer
      • Label（名前は「Title」に変える）
      • ScrollContainer
        • VBoxContainer（※）

　次は、リストの各要素の基本的なノード構成です。このシーンが、ダイアログ本体の※印の場所に複数入ります。シーンの名前は「ListItem」とします。

• Button（名前は「ListItem」に変える）
  • MarginContainer
    • VBoxContainer

　この「ListItem」シーンは、そのまま使いません。継承して実際に使うシーンを作ります。シーンの名前は「ListItem2Row」とします。下のように「タイトル」と「説明」の2行の表示にします。

• Button　（ここは継承）（名前は「ListItem2Row」に変える）
  • MarginContainer　（ここは継承）
    • VBoxContainer　（ここは継承）
      • Label（名前は「Title」に変える）
      • Label（名前は「Desc」に変える）

　このような構成にすることで、リストの内容に応じて、2行のリスト、1行のリスト、画像付きリストなどを作れるようにします。

リストダイアログの構造