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

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

リストダイアログ用のシーンを作ろう

ListDialogシーンを作ろう

　まずは、リストダイアログの土台となる「ListDialog」シーンを作ります。

　トップメニューの「シーン」＞「新規シーン」で、新しいシーンを作ります。ルートノードは「CanvasLayer」にして名前を「ListDialog」に変更します。

　「Ctrl+S」で保存するパスはres://scn/list_dialog/list_dialog.tscnとします。

　「ListDialog」ノードに子ノードを配置します。配置後の状態は次のようになります。また「％」と書いた部分を右クリックして「固有名でアクセス」を選択します。

• ListDialog（CanvasLayer）
  • Panel
  • MarginContainer
    • VBoxContainer
      • Title（Label）　「％」
      • ScrollContainer
        • VBoxContainer　「％」

　続いて、いくつかのノードで、「インスペクター」ドックでの設定をおこないます。上から順番に説明していきます。

　まずはルートの「ListDialog」ノードの「インスペクター」ドックでの設定です。

• 「CanvasLayer」
  • 「Layer」＞「Layer」を「128」に変更。

　続いて「Panel」ノードの「インスペクター」ドックでの設定です。

• 「Control」
  • 「Layout」＞「Anchors Preset」を「Rect全面」に変更。
  • （「Layout」＞「Transform」の「x」が「960」、「y」が「540」に自動変更）
  • 「Theme Overrides」＞「Styles」で「新規 StyleBoxFlat」を選択。
    • （半透明などにしたい場合は、配置後の「StyleBoxFlat」を展開して「BG Color」を変更する）

　次は「MarginContainer」ノードの「インスペクター」ドックでの設定です。

• 「Control」
  • 「Layout」＞「Anchors Preset」を「Rect全面」に変更。
  • （「Layout」＞「Transform」の「x」が「960」、「y」が「540」に自動変更）
  • 「Theme Overrides」＞「Constants」で、「Margin Left」「Margin Top」「Margin Right」「Margin Bottom」を「16」に変更。

　「Title」（Label）ノードの「インスペクター」ドックでの設定です。

• 「Label」
  • 「Text」＞「Title」に「タイトル」と入力。
• 「Control」
  • 「Theme Overrides」＞「Font Size」を「32」に変更。

　「ScrollContainer」ノードの「インスペクター」ドックでの設定です。

• 「Control」
  • 「Container Sizing」＞「Vertical」の「拡大」をチェック。

　「VBoxContainer」ノードの「インスペクター」ドックでの設定です。

• 「Control」
  • 「Container Sizing」＞「Horizontal」の「拡大」をチェック。

　ここまでで、「ListDialog」の「インスペクター」ドックの設定は終了です。

ListDialog

ListItemシーンを作ろう

　次はListItemシーンを作ります。

　トップメニューの「シーン」＞「新規シーン」で、新しいシーンを作ります。ルートノードは「Button」にして名前を「ListItem」に変更します。「Ctrl+S」で保存するパスはres://scn/list_dialog/list_item.tscnとします。

　「ListItem」ノードに子ノードを配置します。配置後の状態は次のようになります。

• ListItem（Button）
  • MarginContainer
    • VBoxContainer

　続いて、いくつかのノードで、「インスペクター」ドックでの設定をおこないます。上から順番に説明していきます。

　まずはルートの「ListItem」ノードの「インスペクター」ドックでの設定です。

• 「Control」
  • 「Layout」＞「Custom Min」の「x」を「800」、「y」を「80」に変更。
  • 「Layout」＞「Transform」の「x」を「800」、「y」を「80」に変更。

　次は「MarginContainer」ノードの「インスペクター」ドックでの設定です。

• 「Control」
  • 「Layout」＞「Layout Mode」を「Anchors」に変更。
  • 「Layout」＞「Anchors Preset」を「Rect全面」に変更。
  • （「Layout」＞「Transform」の「x」が「800」、「y」が「80」に自動変更）
  • 「Theme Overrides」＞「Constants」で、「Margin Left」「Margin Top」「Margin Right」「Margin Bottom」を「16」に変更。

　「MarginContainer」ノードの「インスペクター」ドックでの設定はありません。

ListItem

ListItem2Rowシーンを作ろう

　「ListItem2Row」は「ListItem」を継承して作ります。

　トップメニューの「シーン」＞「新しい継承シーン」で、新しいシーンを作ります。これまでとは違う方法になっていますので注意してください。

　ルートノードの名前を「ListItem2Row」に変更します。「Ctrl+S」で保存するパスはres://scn/list_dialog/list_item_2_row.tscnとします。

　継承したノードの末尾に子ノードを配置します。配置後の状態は次のようになります。

• ListItem2Row（Button）　（ここは継承）
  • MarginContainer　（ここは継承）
    • VBoxContainer　（ここは継承）
      • Title（Label）　「％」
      • Desc（Label）　「％」

　2つの「Label」は、それぞれ「Title」と「Desc」という名前にします。また「％」と書いた部分を右クリックして「固有名でアクセス」を選択します。

　続いて、いくつかのノードで、「インスペクター」ドックでの設定をおこないます。上から順番に説明していきます。

　まずは「Title」（Label）ノードの「インスペクター」ドックでの設定です。

• 「Label」
  • 「Text」＞「Title」に「タイトル」と入力。
• 「Control」
  • 「Theme Overrides」＞「Font Size」を「24」に変更。

　次は「Desc」（Label）ノードの「インスペクター」ドックでの設定です。

• 「Label」
  • 「Text」＞「Title」に「説明」と入力。
• 「Control」
  • 「Theme Overrides」＞「Font Size」を「18」に変更。

ListItem2Row

　続いてスクリプトを作成していきましょう。