SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Godot Engine 2Dゲーム開発入門

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

Godot EngineのUI部品

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

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

 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行のリスト、画像付きリストなどを作れるようにします。

リストダイアログの構造
リストダイアログの構造

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

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Godot Engine 2Dゲーム開発入門連載記事一覧

もっと読む

この記事の著者

柳井 政和(ヤナイ マサカズ)

クロノス・クラウン合同会社 代表社員http://crocro.com/オンラインソフトを多数公開。プログラムを書いたり、ゲームを作ったり、記事を執筆したり、マンガを描いたり、小説を書いたりしています。「めもりーくりーなー」でオンラインソフト大賞に入賞。最近は、小説家デビューして小説も書いています(『裏切りのプログラム』他)。面白いことなら何でもOKのさすらいの企画屋です。 

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/21374 2025/08/07 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング