Godot · UI design & implementation

Control nodes, themed and tweened.

Scenes built from containers that resize properly, one Theme resource that carries the visual language, and motion written as tweens you can read.

Talk about your Godot project ↗Play the live demo →

Control nodesThemesGDScript & C#TweensCanvasItem shaders

What we do in Godot

Built the way the
engine expects.

Native frameworks, used as intended, so your engineers inherit something familiar.

Scene structure

Each component is its own scene with a small script and exported properties, composed with containers rather than fixed positions.

Theme resources

Type variations, styleboxes and font sizes in one Theme, so screens inherit the look instead of overriding it.

Focus and input

Explicit focus neighbours, input actions for every device, and prompts that follow the active controller.

Motion and shaders

Tweens for transitions and feedback, CanvasItem shaders for fills, dissolves and highlights.

In code

The same component,
in Godot.

The same component in every runtime: a health bar whose ghost segment waits 450 ms, then drains over 600 ms. It is the bar running in the demo at the top of this page.

health_bar.gdGDScript · Godot 4

# Fill and Ghost are TextureProgressBars styled by the project Theme.
extends Control

const GHOST_DELAY := 0.45
const GHOST_TIME := 0.6

@onready var fill: TextureProgressBar = %Fill
@onready var ghost: TextureProgressBar = %Ghost
var _tween: Tween

func set_health(pct: float) -> void:
    pct = clampf(pct, 0.0, 1.0)
    var damage := pct < fill.value
    fill.value = pct

    if _tween:
        _tween.kill()
    _tween = create_tween()
    if damage:
        _flash()
        _tween.tween_interval(GHOST_DELAY)
    _tween.tween_property(ghost, "value", pct, GHOST_TIME) \
        .set_trans(Tween.TRANS_CUBIC).set_ease(Tween.EASE_OUT)

func _flash() -> void:
    modulate = Color(1.8, 1.8, 1.8)
    create_tween().tween_property(self, "modulate", Color.WHITE, 0.12)

A trimmed sample to show structure and approach. Compare all five runtimes →

Covered as standard

Godot 4.x
GDScript and C#
Containers and anchors for any aspect ratio
Gamepad, keyboard and touch
Translation server and font fallbacks
Desktop, mobile and web export

Other runtimes

The design travels.

The design system and motion spec stay the same. Only the implementation changes.

Unreal Engine UMG · CommonUI · Slate Unity UI Toolkit · uGUI · UXML & USS PlayCanvas Element & Screen components · ESM scripts · HTML overlay UI Web & custom engines TypeScript · DOM & CSS · Canvas & WebGL

Godot

Show us the build.

Send a screenshot, a recording or a build, with your target platforms and dates. You will get a straight answer on fit and scope.

Start a conversation ↗All services →