.. _doc_your_first_2d_game_heads_up_display: Heads up display ================ The final piece our game needs is a User Interface (UI) to display things like score, a "game over" message, and a restart button. Create a new scene, click the "Other Node" button and add a :ref:`CanvasLayer ` node named ``HUD``. "HUD" stands for "heads-up display", an informational display that appears as an overlay on top of the game view. The :ref:`CanvasLayer ` node lets us draw our UI elements on a layer above the rest of the game, so that the information it displays isn't covered up by any game elements like the player or mobs. The HUD needs to display the following information: - Score, changed by ``ScoreTimer``. - A message, such as "Game Over" or "Get Ready!" - A "Start" button to begin the game. The basic node for UI elements is :ref:`Control `. To create our UI, we'll use two types of :ref:`Control ` nodes: :ref:`Label ` and :ref:`Button `. Create the following as children of the ``HUD`` node: - :ref:`Label ` named ``ScoreLabel``. - :ref:`Label ` named ``Message``. - :ref:`Button ` named ``StartButton``. - :ref:`Timer ` named ``MessageTimer``. Click on the ``ScoreLabel`` and type a number into the ``Text`` field in the Inspector. The default font for ``Control`` nodes is small and doesn't scale well. There is a font file included in the game assets called "Xolonium-Regular.ttf". To use this font, do the following: Under "Theme Overrides > Fonts", choose "Load" and select the "Xolonium-Regular.ttf" file. .. image:: img/custom_font_load_font.webp The font size is still too small, increase it to ``64`` under "Theme Overrides > Font Sizes". Once you've done this with the ``ScoreLabel``, repeat the changes for the ``Message`` and ``StartButton`` nodes. .. image:: img/custom_font_size.webp .. note:: **Anchors:** ``Control`` nodes have a position and size, but they also have anchors. Anchors define the origin - the reference point for the edges of the node. Arrange the nodes as shown below. You can drag the nodes to place them manually, or for more precise placement, use "Anchor Presets". .. image:: img/ui_anchor.webp ScoreLabel ~~~~~~~~~~ 1. Add the text ``0``. 2. Set the "Horizontal Alignment" and "Vertical Alignment" to ``Center``. 3. Choose the "Anchor Preset" ``Center Top``. Message ~~~~~~~~~~~~ 1. Add the text ``Dodge the Creeps!``. 2. Set the "Horizontal Alignment" and "Vertical Alignment" to ``Center``. 3. Set the "Autowrap Mode" to ``Word``, otherwise the label will stay on one line. 4. Under "Control - Layout/Transform" set "Size X" to ``480`` to use the entire width of the screen. 5. Choose the "Anchor Preset" ``Center``. StartButton ~~~~~~~~~~~ 1. Add the text ``Start``. 2. Under "Control - Layout/Transform", set "Size X" to ``200`` and "Size Y" to ``100`` to add a little bit more padding between the border and text. 3. Choose the "Anchor Preset" ``Center Bottom``. 4. Under "Control - Layout/Transform", set "Position Y" to ``580``. On the ``MessageTimer``, set the ``Wait Time`` to ``2`` and set the ``One Shot`` property to "On". Now add this script to ``HUD``: .. tabs:: .. code-tab:: gdscript GDScript extends CanvasLayer # Notifies `Main` node that the button has been pressed signal start_game .. code-tab:: csharp using Godot; public partial class HUD : CanvasLayer { // Don't forget to rebuild the project so the editor knows about the new signal. [Signal] public delegate void StartGameEventHandler(); } We now want to display a message temporarily, such as "Get Ready", so we add the following code .. tabs:: .. code-tab:: gdscript GDScript func show_message(text): $Message.text = text $Message.show() $MessageTimer.start() .. code-tab:: csharp public void ShowMessage(string text) { var message = GetNode