Build Game UI Without the Pain: Gum Layout Tool for .NET | .NET Game Development
Microsoft Developer features a conversation and live demo with Vic (creator of Gum and FlatRedBall) showing how Gum helps build resolution-independent game UI for .NET games. The video covers the Gum editor workflow, key layout concepts like Wrap and Clip, and wiring Gum UI into a MonoGame project via a Cookie Clicker-style example.
Overview
What Gum is (and where it fits)
- Gum is an open source UI layout tool built specifically for game UI.
- It works with multiple .NET game and rendering environments, including:
- MonoGame
- FlatRedBall
- raylib
- Skia-based environments such as WPF and Avalonia
Topics covered in the discussion
- What influenced Gum’s design.
- Extensibility: how far Gum can be customized.
- Common UI layout challenges in games (especially around different resolutions and screen sizes).
Live demo: building a Cookie Clicker-style game
Vic demonstrates building a small Cookie Clicker-style game to show how the pieces fit together:
- Designing UI visually in the Gum editor.
- Using Gum’s layout engine for flexible, resolution-independent UI.
- Explaining Wrap and Clip for common layout scenarios.
- Displaying and interacting with Gum UI inside a MonoGame project.
- Hooking up the UI to game code and running the finished working example.
Chapters
- 0:00 - Surprise! You have layout issues
- 0:31 - What we're covering today
- 1:10 - Meet Vic from FlatRedBall
- 2:21 - What is Gum?
- 5:42 - What influenced Gum's design
- 8:16 - Extensibility: how far does it go?
- 9:30 - Demo: building a Cookie Clicker-style game
- 18:43 - Designing layouts in Gum
- 31:35 - Wrap and Clip explained
- 34:45 - Displaying UI in MonoGame
- 36:29 - Hooking up game code
- 40:34 - The finished working game
- 44:33 - Final thoughts
Links and resources
Documentation
Tools
Demo source code
Community
Series link
- Watch the full series: https://aka.ms/Quest-to-Compile