Design a title screen¶
In the next two tutorials, you will build two responsive UI (user interface) scenes step-by-step using the engine’s UI system:
- A main menu
- A game UI with a health bar, energy bar, bomb and money counters
You will learn how to design game UIs efficiently, and how to use Godot’s Control nodes. This page focuses on the visual part: everything you do from the editor. To learn how to code a life bar, read Control the game’s UI with code
Download the project files:
ui_main_menu_design.zip and extract the archive. Import the
project in Godot to follow this tutorial. The
end/ folder contains the
final result. You’ll find all the sprites in the
Read the Design interfaces with the Control nodes first to learn how Godot’s UI system works
How to design your game UI¶
To design a good UI, you want to come up with a rough mockup first: a plain drawing version that focuses on the placement of your UI components, their size, and user interaction. Pen and paper is all you need. You shouldn’t use fancy and final graphics at this stage. Then, you only need simple placeholder sprites and you’re good to jump into Godot. You want to make sure the players can find their way around the interface using those placeholders.
Placeholder doesn’t have to mean ugly, but you should keep the graphics simple and clean. Avoid special effects, animation, and detailed illustration before you have players playtest your UI. Otherwise:
- The graphics might skew the players’ perception of the experience and you’ll miss out on valuable feedback
- If the User Experience doesn’t work, you’ll have to redo some sprites
Always try to make the interface work with simple text and boxes first. It’s easy to replace the textures later. Professional UX designers often work with plain outlines and boxes in greyscale. When you take colors and fancy visuals away, it’s a lot easier to size and place UI elements properly. It helps you refine the design foundation you’ll build upon.
There are two ways to design your UI in Godot. You can:
- Build it all in a single scene, and eventually save some branches as reusable scenes
- Build template scenes for reusable components and create specific components that inherit from your base scenes
We will use the first approach, because the first version of your UI may not work as well as you’d like. You’re likely to throw parts away and redesign components as you go. When you’re sure everything works, it’s easy to make some parts reusable, as you’ll see below.