Stwórz ekran startowy

W następnych dwóch poradnikach, zbudujesz dwie elastyczne sceny UI (interfejsy użytkownika), krok po kroku używając systemu UI wbudowanego w silnik:

  1. Główne menu
  2. UI gry z paskiem życia, energii, licznikiem bomb i monet

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 Kontrola UI gry za pomocą kodu

../../_images/ui_main_menu_design_final_result.png

GUI które zamierzasz stworzyć

Download the project files: ui_main_menu_design.zip and extract the archive. Import the start/ project in Godot to follow this tutorial. The end/ folder contains the final result. You’ll find all the sprites in the start/assets/main_menu folder.

Jak zbudować UI w twojej grze

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.

../../_images/ui_design_rough.png

The UI’s rough plan or mockup

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:

  1. The graphics might skew the players» perception of the experience and you’ll miss out on valuable feedback
  2. If the User Experience doesn’t work, you’ll have to redo some sprites

Wskazówka

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:

  1. Build it all in a single scene, and eventually save some branches as reusable scenes
  2. 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.

../../_images/ui_main_menu_placeholder_assets.png

The files you’ll find in Godot. The graphics look cleaner than on the rough design, but they’re still placeholders

Tworzenie menu głównego

Before we jump into the editor, we want to plan how we’ll nest containers based on our mockup image.

Break down the UI mockup

Here are my three rules of thumb to find the right containers:

  1. Break down the UI into nested boxes, from the largest that contains everything, to the smallest ones, that encompass one widget, like a bar with its label, a panel or a button
  2. If there’s some padding around an area, use a MarginContainer
  3. Jeżeli elementy są ułożone w rzędach lub kolumnach, należy użyć HBoxContainer lub VBoxContainer

Zasady te wystarczą na początek i będą dobrze działać dla prostych interfejsów.

For the main menu, the largest box is the entire game window. There’s padding between the edges of the window and the first components: this should be a MarginContainer. Then, the screen is split into two columns, so we’ll use an HBoxContainer. In the left column, we’ll manage the rows with a VBoxContainer. And in the right column, we’ll center the illustration with a CenterContainer.

../../_images/ui_mockup_break_down.png

Interface building blocks, broken down using the three rules of thumb

Wskazówka

Kontenery dostosowują się do rozdzielczości okna i stosunku szerokości do wysokości. Choć elementy interfejsu użytkownika można umieszczać ręcznie, kontenery są szybsze, bardziej precyzyjne i responsywne.

Przygotowanie sceny Menu Główne

Stwórzmy menu główne. Zrobimy je w jednej scenie. Aby utworzyć pustą scenę, kliknij menu Scena -> Nowa scena.

We have to add a root node before we can save the scene. Your UI’s root should be the outermost container or element. In this case it’s a MarginContainer. MarginContainer is a good starting point for most interfaces, as you often need padding around the UI. Press Meta+S to save the scene to the disk. Name it MainMenu.

Wybierz ponownie MarginContainer i udaj się do inspektora w celu zdefiniowania rozmiaru marginesów. Przewinąć w dół klasę Control do sekcji Custom Constants. Rozwiń go. Ustaw marginesy takie jak poniżej:

  • Prawy Margines: 120
  • : 80
  • Margines Lewy: 120
  • Margines Dolny: 80

We want the container to fit the window. In the toolbar above the Viewport, open the Layout menu and select the last option, Full Rect.

Dodaj sprity UI

Zaznacz MarginContainer i stwórz elementy interfejsu użytkownika jako węzły TextureRect. Potrzebujemy:

  1. Tytuł lub logo
  2. The three text options, as individual nodes
  3. Notka o wersji
  4. Obraz głównego menu

Kliknij przycisk Dodaj węzeł lub naciśnij Meta+A na klawiaturze. Zacznij wpisywać TextureRect aby znaleźć odpowiedni węzeł i naciśnij ENTER. Po wybraniu nowego węzła, naciśnij pięciokrotnie przycisk Meta+D, aby utworzyć pięć dodatkowych instancji TextureRect.

Click each of the nodes to select it. In the inspector, find the Texture property and click [empty] -> Load. A file browser opens and lets you pick a sprite to load into the texture slot.

../../_images/ui_texturerect_load_texture.png

Menedżer plików pozwoli tobie znaleźć tekstury

Repeat the operation for all TextureRect nodes. You should have the logo, the illustration, the three menu options and the version note, each as a separate node. Then, double click on each of the nodes in the Scene tab to rename them. Nothing has been placed in containers yet so this should look messy.

../../_images/ui_main_menu_6_texturerect_nodes.png

Sześć węzłów z ustawionymi teksturami

Informacja

Jeśli chcesz obsługiwać lokalizację w swojej grze, używaj Label dla opcji w menu zamiast TextureRect.

Automatyczne dodawanie kontenerów do elementów interfejsu użytkownika

Our main menu has some margin around the edges of the screen. It is split in two parts: on the left, you have the logo and the menu options. On the right, you have the characters. We can use one of two containers to achieve this: HSplitContainer or HBoxContainer. Split containers split the area into two: a left and a right side or a top and a bottom side. They also allow the user to resize the left and right areas using an interactive bar. On the other hand, HBoxContainer just splits itself into as many columns as it has children. Although you can deactivate the split container’s resize behaviour, I recommend to favour box containers.

Wybierz MarginContainer i dodaj HBoxContainer. Następnie potrzebujemy dwóch kontenerów jako dzieci naszego HBoxContainer: VBoxContainer do opcji w menu po lewej stronie i CenterContainer dla ilustracji po prawej stronie.

../../_images/ui_main_menu_containers_step_1.png

Należy mieć cztery zagnieżdżone kontenery, a węzły TextureRect powinny być od nich odsunięte

In the node tree, select all the TextureRect nodes that should go on the left side: the logo, the menu options and the version note. Drag and drop them into the VBoxContainer. The nodes should position automatically.

../../_images/ui_main_menu_containers_step_2.png

Kontenery automatycznie umieszczają i skalują tekstury

Zostały dwa problemy do rozwiązania:

  1. Postać po prawej nie jest wycentrowana
  2. Nie ma przerw pomiędzy logo i innymi elementami UI

To center the characters on the right, first select the CenterContainer. Then in the Inspector, scroll down to the Size Flags category and click on the field to the right of the Vertical property, and check Expand in addition to Fill. Do the same for the Horizontal property. This makes the CenterContainer expand into all available space while respecting its neighbour VBoxContainer. Finally, drag and drop the Characters node into the CenterContainer. The Characters element will center automatically.

../../_images/ui_main_menu_containers_step_3.png

Węzeł postaci jest wyśrodkowywany w prawej połowie ekranu, gdy tylko umieścisz go w środku kontenera CenterContainer

To space out the menu options and the logo on the left, we’ll use one final container and its size flags. Select the VBoxContainer and press Meta+A to add a new node inside it. Add a second VBoxContainer and name it „MenuOptions”. Select all three menu options, Continue, NewGame and Options, and drag and drop them inside the new VBoxContainer. The UI’s layout should barely change, if at all.

../../_images/ui_main_menu_containers_step_4.png

Umieść nowy kontener między dwoma pozostałymi węzłami, aby zachować układ graficzny interfejsu użytkownika

Now we grouped the menu options together, we can tell their container to expand to take as much vertical space as possible. Select the MenuOptions node. In the Inspector, scroll down to the Size Flags category. Click on the field to the right of the Vertical property, and check Expand in addition to Fill. The container expands to take all the available vertical space. But it respects its neighbors, the Logo and Version elements.

W celu wycentrowania węzłów w VBoxContainer, przewiń na górę inspektora i zmień właściwość Alignment na Center.

../../_images/ui_main_menu_containers_step_5.png

Opcje menu powinny być umieszczone pionowo w po środku lewej kolumny interfejsu użytkownika

To wrap things up, let’s add some separation between the menu options. Expand the Custom Constants category below Size Flags, and click the field next to the Separation parameter. Set it to 30. Once you press enter, the Separation property becomes active and Godot adds 30 pixels between menu options.

../../_images/ui_main_menu_design_final_result.png

Końcowy interfejs

Bez pisania kodu, stworzyliśmy precyzyjny i rozszerzalny ekran menu głównego.

Congratulations for getting there! You can download the final menu ui_main_menu_design.zip to compare with your own. In the next tutorial, you’ll create a Game User Interface with bars and item counters.

Break down the UI mockup

A responsive User Interface is all about making sure our UIs scale well on all screen types. TV screens and computer displays have different sizes and ratios. In Godot, we use containers to control the position and the size of UI elements.

The order in which you nest matters. To see if your UI adapts nicely to different screen ratios, select the root node, press the Q key to activate the Select Mode, select the container and click and drag on one of the container’s corners to resize it. The UI components should flow inside of it.

You’ll notice that although containers move sprites around, they don’t scale them. This is normal. We want the UI system to handle different screen ratios, but we also need the entire game to adapt to different screen resolutions. To do this, Godot scales the entire window up and down.

You can change the scale mode in the project settings: click the Project menu -> Project Settings. In the window’s left column, look for the Display category. Click on the Window sub-category. On the right side of the window, you’ll find a Stretch section. The three settings, Mode, Aspect, and Shrink, control the screen size. For more information, see Wiele rozdzielczości.