---
order: 1
title: 2D and UI Workflows
---

# 2D and UI Workflows

2D and UI is where most GDLink projects start — menus, HUDs, sprites, input handling, and fast prototypes. Everything here follows one shape: a **listener** notices something, a **gate** decides whether it counts, and an **executor** makes it happen. Wire those three and you have behavior you can see and follow.

## Reading input

Input is the spark for most 2D logic — there's one listener per source.

**[Keyboard](../reference/generated/listeners/keyboard_listener.md)** — movement, actions, hotkeys. The trigger mode matters: *While Held* for continuous movement, *On Press* for one-shots like jump.

```
Keyboard(key=W, trigger_mode=While Held) -> AND -> Motion2D(forward)
Keyboard(key=Space, trigger_mode=On Press) -> AND -> Motion2D(jump)
```

**[Mouse](../reference/generated/listeners/mouse_listener.md)** — beyond clicks, it *exposes* screen/world position, delta, and wheel as values your graph can read directly. Feed `{prefix}_world_2d` straight into a **Servo** or **Track To** for top-down aiming — no helper code.

**[UI Click](../reference/generated/listeners/ui_click_listener.md)** and **[UI Hover](../reference/generated/listeners/ui_hover_listener.md)** — for `Control` nodes specifically. Click drives buttons and menu navigation; Hover powers highlights and tooltips.

![UI Click listener on the PlayButton through an AND gate into a UI Visibility executor that hides the MainMenu](https://gdlink.solventech.ca/guide/assets/images/gdlink-assembly-menu.png)

## Moving and animating

**[Motion2D](../reference/generated/executors/motion2d_executor.md)** is the workhorse for moving `Node2D` objects — four physics modes (Simple, Force, Velocity, Character) and three motion types (Move, Rotate, Top-Down). Character mode for platformers, Top-Down for twin-stick.

**[Sprite](../reference/generated/executors/sprite_executor.md)** handles frame animation and texture swaps; **[Animation](../reference/generated/executors/animation_executor.md)** drives `AnimationPlayer` / `AnimatedSprite2D` with blending:

```
Property(state, Equal, idle) -> AND -> Animation(name=idle, mode=Play, loop=true)
Property(state, Equal, run)  -> AND -> Animation(name=run,  mode=Play, loop=true, blend=0.2)
```

```{tip}
For smooth colour or transparency transitions, reach for **Material** rather than Sprite — Sprite colour changes are set/switch, not blended.
```

## Building UI — HUDs and menus

The GDLink UI workflow is simple: **author your UI nodes in the scene ahead of time**, then drive them at runtime.

**[Label](../reference/generated/executors/label_executor.md)** writes text into a UI node — *Set* for instant readouts (score, timers), *Typewrite* for dialogue with BBCode and variable interpolation. A live clock is just:

```
Label(target=HUDClock, mode=Set, text="{_system_time.hms}")
```

**[UI Visibility](../reference/generated/executors/ui_visibility_executor.md)** shows or hides `Control` nodes — pause menus, tooltips, inventory panels, HUD toggles. **[UI Parameters](../reference/generated/executors/ui_parameters_executor.md)** and **[Transform2D](../reference/generated/executors/transform2d_executor.md)** tweak live UI properties and layout.

## Putting it together — a 2D character

```
Keyboard(A/D, While Held)   -> AND -> Motion2D(move, Character mode)
Keyboard(Space, On Press)   -> AND -> Motion2D(jump)
Property(speed, Greater, 0) -> AND -> Animation(name=run, blend=0.2)
Label(target=HUD_Score, mode=Set, text="Score: {score}")
```

Input drives motion, state drives animation, and a Label keeps the HUD live — all visible in the graph, all editable without touching a code file.

## Where to go next

- The full [Logic Reference](../reference/index.md) for every 2D/UI brick
- [Core Concepts → States](../concepts/states.md) for the state-driven animation pattern above
- The **3D**, **XR**, and **Debugging** guides for other contexts