Progetta una schermata di titolo¶
Nei prossimi due tutorial, costruirai due scene con UI (interfacce utente) responsive passo dopo passo usando il sistema UI dell'engine:
- Un menu principale.
- Una GUI con una barra della salute, barra dell'energia, un contatore per le monete e le bombe.
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
Leggi prima la Disegnare interfacce con i nodi Control per imparare come funziona il sistema UI di Godot.
Come progettare la tua GUI (interfaccia di gioco)¶
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.
- Se la User Experience non funziona, dovrai rifare qualche sprite.
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.
Ci sono due modi di progettare la tua UI in Godot. Puoi:
- 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.