Anclas y presets
Seis paneles fijados con presets de layout. Redimensiona el panel del juego y cada uno mantiene su esquina.
El editor de arriba está ejecutando este proyecto. Cambia una línea y se recarga.
Clases de Godot usadas
ControlPanelStyleBoxFlat
El código
scripts/main.gd
extends Node
const CORNERS: Array = [
{preset = Control.PRESET_TOP_LEFT, label = 'TOP_LEFT', color = '#8da5f3'},
{preset = Control.PRESET_TOP_RIGHT, label = 'TOP_RIGHT', color = '#8eef97'},
{preset = Control.PRESET_BOTTOM_LEFT, label = 'BOTTOM_LEFT', color = '#fc7f7f'},
{preset = Control.PRESET_BOTTOM_RIGHT, label = 'BOTTOM_RIGHT', color = '#f3d48d'},
]
var size_label: Label
func _ready() -> void:
var background: ColorRect = ColorRect.new()
background.color = Color('#12141a')
add_child(background)
background.set_anchors_and_offsets_preset(Control.PRESET_FULL_RECT)
for corner in CORNERS:
var panel: Panel = _panel(Color(corner.color), corner.label)
add_child(panel)
panel.set_anchors_and_offsets_preset(corner.preset, Control.PRESET_MODE_KEEP_SIZE)
panel.position += _nudge(corner.preset)
var center: Panel = _panel(Color('#ffffff'), 'CENTER')
add_child(center)
center.set_anchors_and_offsets_preset(Control.PRESET_CENTER)
var wide: Panel = _panel(Color('#2a2f3d'), 'CENTER_TOP, wide')
wide.custom_minimum_size = Vector2(0, 60)
add_child(wide)
wide.set_anchors_and_offsets_preset(Control.PRESET_TOP_WIDE)
wide.position.y += 130
size_label = Label.new()
size_label.add_theme_color_override('font_color', Color('#999999'))
add_child(size_label)
size_label.set_anchors_and_offsets_preset(Control.PRESET_CENTER_BOTTOM)
size_label.position.y -= 60
get_viewport().size_changed.connect(_update_size)
_update_size()
print('resize the game panel, every anchor keeps its corner')
func _update_size() -> void:
var size: Vector2 = get_viewport().get_visible_rect().size
size_label.text = 'viewport %d x %d' % [int(size.x), int(size.y)]
func _nudge(preset: int) -> Vector2:
var x: float = 24.0 if preset in [Control.PRESET_TOP_LEFT, Control.PRESET_BOTTOM_LEFT] else -24.0
var y: float = 24.0 if preset in [Control.PRESET_TOP_LEFT, Control.PRESET_TOP_RIGHT] else -24.0
return Vector2(x, y)
func _panel(color: Color, text: String) -> Panel:
var style: StyleBoxFlat = StyleBoxFlat.new()
style.bg_color = Color(color, 0.25)
style.border_color = color
style.set_border_width_all(2)
style.set_corner_radius_all(8)
var panel: Panel = Panel.new()
panel.custom_minimum_size = Vector2(190, 90)
panel.size = Vector2(190, 90)
panel.add_theme_stylebox_override('panel', style)
var label: Label = Label.new()
label.text = text
label.add_theme_font_size_override('font_size', 13)
label.horizontal_alignment = HORIZONTAL_ALIGNMENT_CENTER
label.vertical_alignment = VERTICAL_ALIGNMENT_CENTER
panel.add_child(label)
label.set_anchors_and_offsets_preset(Control.PRESET_FULL_RECT)
return panel