skills.rest
SummerEngine
SummerEngineOFFICIAL
Explore all skills by this author →
WebsiteGitHub

ui-basics

Build Summer Engine UI scenes with Control nodes, containers, anchors, and signal wiring.

66|4|Updated Feb 26, 2026
Search Tags:#anchors#menus#tscn#hud#control nodes#game ui#summer engine
One-click install
npx skills add https://github.com/SummerEngine/summer --skill ui-basics-summerengine
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-basics
Source: https://github.com/SummerEngine/summer/tree/main/library/skills/ui-basics
Command: npx skills add https://github.com/SummerEngine/summer --skill ui-basics-summerengine

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building game UI in Summer Engine requires knowing the correct Control node hierarchy, container layout patterns, anchor presets, and signal wiring — mistakes here produce broken layouts and unresponsive menus. This Skill provides verified patterns for constructing HUDs, menus, and dialogue boxes through live MCP tools or direct .tscn edits. ## Core Features & Use Cases - Control Tree Construction: Build menus and HUDs using the Control → MarginContainer → VBoxContainer hierarchy with Labels, Buttons, and ProgressBars via summer_add_node and summer_set_prop. - Responsive Layout: Apply anchors_preset values (0–15), size flags, and margin overrides so UI scales correctly with window size. - Signal Wiring: Connect Button pressed signals to script handlers with summer_connect_signal, including the required scenePath parameter. - Use Case: Ask your agent to add a main menu with a title and Start/Quit buttons; it creates the node tree, sets margins and anchors, and wires Start.pressed to _on_start_pressed in one pass. ## Quick Start Ask your agent to add a main menu with a title label and Start and Quit buttons to the current scene, then connect the Start button's pressed signal to a handler.

Frequently Asked Questions about ui-basics

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a main menu in Summer Engine?▼

Create a Control root, add a MarginContainer with anchors_preset 15 and margin overrides, then a VBoxContainer holding a Label and Buttons. Use summer_add_node and summer_set_prop, and connect each Button's pressed signal to a script handler.

How do I make a health bar HUD in Summer Engine?▼

Add a CanvasLayer named HUD, anchor a MarginContainer to the top-left with anchors_preset 0, and place a ProgressBar inside an HBoxContainer. Set max_value and value on the ProgressBar, then update value from a script when health changes.

What do the anchors_preset values mean in Summer Engine UI?▼

anchors_preset controls how a Control anchors to its parent: 0 is top-left, 1 top-right, 2 bottom-left, 3 bottom-right, and 15 is Full Rect which stretches to fill the parent. Set it via summer_set_prop with key anchors_preset.

Why is my summer_add_node or summer_connect_signal call rejected?▼

Every scene-mutating tool in this skill requires the scenePath parameter pointing to the target .tscn file. Calls without scenePath are rejected before reaching the engine, so always include it even though examples omit it for readability.

Can I build Summer Engine UI without the MCP server connected?▼

Yes. Write the node hierarchy directly into the .tscn file using [node] blocks with type, parent, anchors_preset, and theme_override_constants properties. The skill documents this fallback format for menus and HUDs.

Related Skills

Explore More Software Engineering Skills→
DubDev720DubDev720
2

manager-signal-architecture-workflow

Structure scene coordinators, subsystem nodes, and signal wiring in Godot Engine projects.

Community
Intermediate
openaiopenai
5.3k

game-playtest

Test browser games through automated playtests, screenshot review, and structured issue reporting.

Official
Intermediate
Totes-MickGOATsTotes-MickGOATs
3

godot-ui-theming

Guide Godot Engine UI theming with Theme resources, StyleBoxes, and fonts.

Community
Intermediate
zerox-corezerox-core

godot-scene-arch

Builds Godot 4 scenes programmatically with GDScript node hierarchies and minimal .tscn files.

Community
Intermediate