Development Blog #18 – HUD and UI #2

The HUD has been significantly improved since my last post thanks to having more UI sprites sent to me. Previously, I had implemented the player stat bars for all three values. They are automatically updated when the player’s stats change.

As stated in my updated preach mechanic blog, I also added new UI elements to the preaching system. This can be explained here.

Pause Menu

My most significant change to the HUD was to create a functional pause menu. The menu activates when the player presses the start button and can be navigated with the left joystick.

To create this, I first created a new panel in the ‘Main UI’ canvas object. The pause menu has 3 buttons: Resume, Tutorial, and Restart. The resume button resumes the play and the restart button restarts the gameplay by reloading the scene, allowing for a new player. The tutorial button loads up a new screen with instructions on how the game is played.

Below is an image of the pause screen, using the UI assets created by Kerris.

I created a new script on the Main Canvas called MenuControls. This is where the majority of the pause screen mechanics are implemented. The most vital feature to add was to open and close the pause menu.

private void Update()
{
    if (Input.GetButtonDown("Joystick Start"))
    {
        if (isPaused)
        {
            Resume();
        }
        else
        {
            PauseGame();
        }
            
    }
}

The code above checks whether the start button has been pressed or not. If it has, it then checks if the game is already pause. If it isn’t it runs the PauseGame() method, and if it is, it runs the Resume() method.

public void Resume()
{
    pauseMenu.SetActive(false);
    Time.timeScale = 1f;
    isPaused = false;
 }

public void PauseGame()
{
    pauseMenu.SetActive(true);
    Time.timeScale = 0f;
    isPaused = true;
}

The two methods are the same, just reversed. In both methods, the UI element is turned on or off. the Time.timeScale value is used to control the games playback speed, where 0 means that the game does not play and 1 means normal speed. I finally change the isPaused variable.

Tutorial Screen

The tutorial screen is a sub-section of the pause menu and offers the players an easily accessible screen for them to use when they need a refresher on the controls, how each mechanic is performed, or what to do next. The screen has 5 main sections: Intro, Movement & Camera, Basic Combat, Combo Combat, and Preaching. The player is able to advance through the tutorial by pressing the A button and exit the screen by pressing B.

The first step was to create each section of the tutorial. Below is an example of the first section of the tutorial using the UI assets made by Kerris.

To add the functionality to the tutorial, I made a new method in the MenuControls script called LoadTutorialLevel().

public void LoadTutorialLevel()
    {
        tutorialCount = 0;
        pauseMenu.SetActive(false);

        tutorialMenu.SetActive(true);
        tutorialLoaded = true;
    }

This emthod uses two new variables. tutorialCount is a counter for which page the tutorial is currently on. This is reset on load so the tutorial always starts on the Introduction page. The other variable is a bool called tutorialLoaded.

In Update(), I added a new if-statement that checks if tutorialLoaded = true.

if (tutorialLoaded)
{
    if (Input.GetButtonDown("Joystick A"))
    {
        tutorialCount++;

        for (int i = 0; i < tutorialScreens.Length; i++)
        {
            tutorialScreens[i].SetActive(false);
                    
        }

       if (tutorialCount >= tutorialScreens.Length)
       {
            tutorialCount = tutorialScreens.Length - 1;
       }

       tutorialScreens[tutorialCount].SetActive(true);
   }

    if (Input.GetButtonDown("Joystick  B"))
    {
        tutorialCount--;

        for (int i = 0; i < tutorialScreens.Length; i++)
        {
            tutorialScreens[i].SetActive(false);

        }
        tutorialScreens[tutorialCount].SetActive(true);
   }
}

The code first checks whether the tutorial is already loaded. If the A button is pressed, the tutorialCount counter is incremented by 1. A for loop then runs through each screen in the tutorial and disables it. Another check is performed to see if the player has reached the end of the tutorial. Next, the tutorial at the current index is enabled.

if (Input.GetButtonDown("Joystick B") && tutorialLoaded)
{
    pauseMenu.SetActive(true);
    tutorialMenu.SetActive(false);
    tutorialLoaded = false;
}

Interact HUD

Lastly, I implemented a ‘Interact’ message that is displayed when the player walks near to an object that can be Interacted with. I firstly created a new script called ShowInteractHud. I made a new script as this can then be dragged on any object that is intractable and it will work in the same way.

public float interactionRadius;
public GameObject player;
public GameObject interactHUD;

The script creates three new public variables. interactionRadius is the range in which the player can be within in order to display the message. The player and interactHUD are both gameobjects that make reference to the Player and the message that is displayed.

void Update()
    {
        float distance = Vector3.Distance(player.transform.position, transform.position);

        if (distance <= interactionRadius) 
        {
            interactHUD.SetActive(true);
        }
        else
        {
            interactHUD.SetActive(false);

        }

In the Update() method, I create a new float called distance and set the value to be the distance between the player and the object the script is attached to. If the player is within the distance, the message is set to active, and if not, the message is set to inactive.