Tour de contenedores
Las mismas cuatro cajas entregadas a cuatro contenedores. El layout en Godot es elegir quién ordena a los hijos.
El editor de arriba está ejecutando este proyecto. Cambia una línea y se recarga.
Clases de Godot usadas
VBoxContainerHBoxContainerGridContainerCenterContainer
El código
scripts/main.gd
extends Node
const COLORS: Array = ['#8da5f3', '#8eef97', '#fc7f7f', '#f3d48d']
func _ready() -> void:
var row: HBoxContainer = _root()
row.add_child(_demo('VBoxContainer', VBoxContainer.new()))
row.add_child(_demo('HBoxContainer', HBoxContainer.new()))
row.add_child(_demo('GridContainer', _grid()))
row.add_child(_demo('CenterContainer', CenterContainer.new()))
print('same four boxes, four containers deciding where they go')
func _demo(title: String, container: Container) -> Control:
var column: VBoxContainer = VBoxContainer.new()
column.size_flags_horizontal = Control.SIZE_EXPAND_FILL
column.add_theme_constant_override('separation', 10)
var label: Label = Label.new()
label.text = title
label.add_theme_color_override('font_color', Color('#999999'))
column.add_child(label)
var panel: PanelContainer = PanelContainer.new()
panel.size_flags_vertical = Control.SIZE_EXPAND_FILL
panel.add_theme_stylebox_override('panel', _panel_style())
column.add_child(panel)
container.size_flags_horizontal = Control.SIZE_EXPAND_FILL
container.size_flags_vertical = Control.SIZE_EXPAND_FILL
panel.add_child(container)
for i in COLORS.size():
container.add_child(_box(Color(COLORS[i])))
return column
func _box(color: Color) -> Control:
var box: ColorRect = ColorRect.new()
box.color = color
box.custom_minimum_size = Vector2(46, 46)
return box
func _grid() -> GridContainer:
var grid: GridContainer = GridContainer.new()
grid.columns = 2
return grid
func _panel_style() -> StyleBoxFlat:
var style: StyleBoxFlat = StyleBoxFlat.new()
style.bg_color = Color('#1c1b1b')
style.set_corner_radius_all(10)
style.set_content_margin_all(12)
return style
func _root() -> HBoxContainer:
var background: ColorRect = ColorRect.new()
background.color = Color('#12141a')
add_child(background)
background.set_anchors_and_offsets_preset(Control.PRESET_FULL_RECT)
var margin: MarginContainer = MarginContainer.new()
for side in ['margin_left', 'margin_right', 'margin_top', 'margin_bottom']:
margin.add_theme_constant_override(side, 40)
add_child(margin)
margin.set_anchors_and_offsets_preset(Control.PRESET_FULL_RECT)
var row: HBoxContainer = HBoxContainer.new()
row.add_theme_constant_override('separation', 20)
margin.add_child(row)
return row