Anchors and presets

Six panels pinned with layout presets. Resize the game panel and every one keeps its corner.

The editor above is running this project. Change a line and it reloads.

Godot classes used

ControlPanelStyleBoxFlat

The code

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

More UI examples