UIの基本

Controlを使ったUI作成の基本についてのまとめです

基本的にレスポンシブになるように作成しています

スクロールするコンテンツ

controls-scroll-complete.webp

ScrollContainerを使ってスクロールするコンテンツを作ります

controls-scroll-structure.webp

戻るボタンとスクロールコンテンツがあるシーンを作成します VBoxContainerでボタン部分とスクロール部分を2分割しています

GUIからの操作

ツールバー

VBoxContainerのレイアウトをRect全面に設定します

controls-scroll-toolbar.webp

インスペクター

PanelContainerRectからSize>yMin Size>yを共に80と設定します ScrollContainerSize Flags>VerticalExpandにチェックを入れます

Panelを追加する

ScrollContainerPanelを追加していきます

extends Node

onready var container = $VBoxContainer/ScrollContainer/VBoxContainer

func _ready():
	for i in range(5):
		var label = Label.new()
		var panel = Panel.new()
		
		label.text = "added Panel"
		panel.add_child(label)
		
		panel.rect_min_size = Vector2( 0, 200 )
		container.add_child(panel)

これでスクロールするはずです

参考

Control