Skip to end of metadata
Go to start of metadata

User Interface and HUD - Overview

The CE# Framework has its own UI System which is used for the creation of user interfaces and Heads-Up-Display (HUD) in the game. The Sydewinder game features a 3D main menu which is used to Start and Quit the game and also a 2D in-game HUD to view the Current Score and Player Energy. Additionally, a 3D high score menu is also available to compare the scores between Sydewinder players. The high score menu can be accessed through the main menu. The main and high score menu's textures are rendered by CRYENGINE and placed on geometry in the 3D environment while the 2D in-game HUD is rendered on top of the screen.

Main Menu - Overview

After game initialization the main menu is shown to the player. This is achieved by rendering the main menu as a material on a preplaced Plane entity in the canyon level. Similarly the camera is placed in front of the plane.

All this occurs at the main entry point of the Sydewinder application using the method InitializeMainMenu in the Program class. 

Chapters:

Related Content:

The menu encapsulates its own logic in the MainMenu class, which is inherited from SceneObject. This makes the MainMenu class a native UI element which can be instantiated as any other UI Element.

In order to get a new instance of the MainMenu class we make the following call:

Main Menu Elements

Both the main menu and the high-score menu use similar UI elements which are hierarchically stacked:

Main Menu

  • Canvas
    • Window
      • Button (Start)
      • Button (Highscore)
      • Button (Exit)

Highscore Menu

  • Canvas
    • Window
      • Table
      • Button (Back)

The hierarchy is generated by adding the parent element while instantiating new UI elements.

The Canvas, Window and Button classes are part of the CE# Framework and the Table class which is used for the high-score menu is part of the Sydewinder project. The UI System needs to be extended for creating custom UI elements.

 

Main Menu Appearance

To give a unique look to the game the UI elements mentioned above are styled in various ways.

All Window and Button elements will use the same style, while the common style will be applied using a single function.

Main Menu Navigation

After clicking the High score button the camera moves smoothly towards the Highscore plane and returns to the Main Menu plane when the Back button is clicked.


HUD - Overview

When you play the game a Heads-Up-Display (HUD) shows the status of the current game session.

In contrast to the main menu the HUD is inherited from the Component class and is not rendered as a material on a 3D object. Instead, it is always rendered on top of the current screen and independently of camera position or level.

 

The HUD resides completely in the Hud class and also handles the Game Paused and Game Over dialog options. All the UI elements are initialized with the Hud.InitializeMainHud(...) method and are shown or hidden based on the requirement.

Similar to the main menu the HUD is a hierarchical collection of UI elements with a Canvas class used as a top most element - these are arranged in the following hierarchy:

  • Canvas
    • Panel (Top of screen)
      • Text (Score)
      • Text (Level)
    • Panel (Bottom of screen)
      • Text (Energy)
      • Text (Weapon)
    • Panel (Game Paused dialog)
      • Text (Game Paused)
      • Button (Resume Game)
      • Button (Exit Game)
    • Panel (Game Over dialog)
      • Text (Game Over)
      • Text (Your Name:)
      • TextInput
      • Button (OK)

The Game Paused and Game Over dialog options are controlled with references to the corresponding Panel elements in conjunction with public Show/Hide methods.

HUD Updates

For updating a score, level, energy or a weapon name while playing the game the Hud class internally stores references to the Text elements and provides various methods for setting the corresponding values. These methods are called in the game loop.

  • No labels