Skip to end of metadata
Go to start of metadata

Overview

The C# Framework has its own UI System which is used for the creation of user interfaces and Heads-Up-Displays (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 the 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 geometry 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 SydewinderApp class.

Chapters:

Related Content:

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

New instances of the MainMenu class can be made as in the following example:

Main Menu Elements

Both the main menu and 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 CanvasWindow and Button classes are part of the C# UI Framework and the Table class which is used for the high-score menu is part of the Sydewinder project. To create custom UI elements the UI System can be extended.

 

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 Highscore 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 MainMenu class, the Hud class inherits 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 independent of the camera position and level.

 

The HUD is managed by the Hud class. It is also responsible for the Game Paused and Game Over dialog options. All the UI elements are initialized with the InitializeMainHud method and are shown or hidden based on the state of the game.

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 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