User Interface
UI systems for building game interfaces
User Interface
MAEngine provides multiple UI systems for different use cases. All UI systems integrate with the Store for reactive data binding.
RmlUI
Lightweight HTML/CSS UI with native Slate rendering. In Progress.
WebUI
Full HTML/CSS/JS powered by Ultralight browser engine.
Widget
Native UMG widgets with ViewModel binding. Coming Soon.
Comparison
| Feature | RmlUI | WebUI | Widget |
|---|---|---|---|
| Rendering | Native Slate | Ultralight (Chromium) | UMG |
| Markup | RML (HTML subset) | Full HTML5 | Blueprint/C++ |
| Styling | RCSS (CSS subset) | Full CSS3 | UMG Styles |
| Scripting | Lua bindings | JavaScript + Lua | Blueprint + Lua |
| Performance | Excellent | Good | Excellent |
| Complexity | Low | Medium | Medium |
| Use Case | HUDs, simple menus | Complex UIs, web content | Native widgets |
| Status | In Progress | Stable | Coming Soon |
Architecture
All UI systems share the same data layer through Store:
┌─────────────────────────────────────────────────────────────┐
│ STORE │
│ player.health, player.shield, weapon.ammo, settings.*, ... │
└─────────────────────────────────────────────────────────────┘
│ │ │
▼ ▼ ▼
┌─────────┐ ┌─────────┐ ┌─────────┐
│ RmlUI │ │ WebUI │ │ Widget │
│BindStore│ │ Store │ │ViewModel│
└─────────┘ └─────────┘ └─────────┘Benefits:
- Single source of truth for all game state
- Update Store once, all UIs react automatically
- Mix and match UI systems as needed
When to Use What
RmlUI
- Game HUDs (health, ammo, minimap)
- Simple menus (pause, settings)
- Performance-critical overlays
- When you want HTML/CSS without JavaScript complexity
WebUI
- Complex interactive UIs
- Existing web-based designs
- When you need full JavaScript capabilities
- Rich animations and effects
Widget (Future)
- Native Unreal widgets
- Designer-friendly Blueprint workflows
- When you need UMG-specific features