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.

private void ApplyMenuStyle()
{
  var backgroundImageURL = Path.Combine(Engine.DataDirectory, "Textures/ui/scroller_window_512.png");
  var buttonBackgroundURL = Path.Combine(Engine.DataDirectory, "Textures/ui/Ui_button.png");
  var buttonHighlightedURL = Path.Combine(Engine.DataDirectory, "Textures/ui/Ui_button_selected.png");
  Root.ForEach<Window>(x =>
  {
    x.Caption = "Sydewinder";
    x.Background.Source = ResourceManager.ImageFromFile(backgroundImageURL);
    x.CaptionHeight = 40;
    x.RectTransform.Size = new Point(TEXTURE_RESOLUTION, TEXTURE_RESOLUTION);
    x.RectTransform.Alignment = Alignment.Center;
    // Apply common style to all buttons within the window.
    x.ForEach<Button>(b =>
    {
      b.RectTransform.Size = new Point(300, 120);
      b.Ctrl.Text.Height = 48;
      b.BackgroundImageUrl = buttonBackgroundURL;
      b.BackgroundImageInvertedUrl = buttonHighlightedURL;
      b.Ctrl.OnPressed += () => Audio.Play("menu_select");
      b.Ctrl.OnFocusEnter += () => Audio.Play("menu_switch");
    });
  });
 }

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.

private static void StartCameraMove(int seconds, Vec3 finalPosition, Vec3 finalFordwardDirection)
{
  _startPosition = Camera.Position;
  _endPosition = finalPosition;
  _startDirection = Camera.ForwardDirection;
  _endDirection = finalFordwardDirection.Normalized;
  _animationProgress = 0;
  _animationSpeed = 1 / (Math.Max(seconds, 0.01f));
}
 
public override void OnUpdate()
{
  if(_animationProgress < 1.0f)
  {
    // No need to clamp it because Lerp is already clamped.
    _animationProgress += _animationSpeed * FrameTime.Delta;
    Camera.Position = Vector3.Lerp(_startPosition, _endPosition, _animationProgress);
    Camera.ForwardDirection = Vector3.Lerp(_startDirection, _endDirection, _animationProgress);
  }
}

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.

public class Hud : Component
{
  //...
  private Panel _gamePausedDialogPanel;
  //...
 
  private Hud(SceneObject root, Color backgroundColor, Color foregroundColor)
  {
    //...
    _gamePausedDialogPanel = CreateDialogPanel();
    //...
  }
 
  public void ShowGamePauseDialog()
  {
    // Show mouse cursor
    Mouse.ShowCursor();
    _gamePausedDialogPanel.Active = true;
  }
  
  public void HideGamePauseDialog()
  {
    // Hide mouse cursor
    Mouse.HideCursor();
    _gamePausedDialogPanel.Active = false;
  }
}

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.

public class Hud : Component
{
  //...
  private Text _scoreText;
  //...
 
  public void SetScore(double score)
  {
    Score = score;
    _scoreText.Content = string.Format("Score: {0}", Score.ToString("N0", CultureInfo.GetCultureInfo("de-DE")));
  }
  //...
}
 
public class SydewinderApp : Application
{
  //...
  public virtual void OnUpdate()
  {
    //...
    Hud.CurrentHud.SetScore(_gameData.Score);
    //...
  }
  //...
}