Game Over text

Checked with version: 5.3

-

Difficulty: Beginner

From here on in, we are essentially polishing the game and making it presentable.

From a production point of view it is worth noting how much time will be spent on polishing the game compared to simply producing the underlying game and game-play.

This is a common oversight to new game developers.

Quickly the base game-play comes together... there’s a light at the end of the tunnel... and then... unexpectedly... there’s a long uphill climb to making a polished, presentable game. Annoyingly, all of the interesting and difficult problems have been solved. All that's left is an endless sea of tweak and polish...

It's very easy to get discouraged at this point. Don't. We must always remember that polishing and presenting any product takes as long or longer than producing the base, functioning product itself.

We will start our polish by creating a "Game Over" text element.

  • Create a new UI Panel element in the scene by using Create > UI > Panel
  • With the Panel selected,
    • ... rename the GameObject "Game Over Panel".
    • ... set the Anchor, Pivot and Position to middle/center.
    • ... set the Width to 440.
    • ... set the Height to 100.
    • ... set the Color to a dark blue similar to the board (33, 44, 55, 196)

To set the color, we can use the Preset color swatch in the Color Picker panel, and then change the alpha channel value to 196.

Next we want to add a UI Text element to the panel. We could create one using the Create menu in the Hierarchy Window, but this would simply add the UI Text element to the root Canvas.

description

This works, but we would have to drag the new UI Text element onto the Game Over Panel to make it a child.

To save a step, we can create the UI Text element as a child directly.

  • Right click on the Game Over Panel in the Hierarchy Window.

This should open a context sensitive menu. From this menu, choose UI > Text

description

When we select a UI element and use the context menu, we are indicating to Unity that we want to create the new UI element as a child.

description

Now, with one step, we’ve created the UI Text element as a child of the Game Over Panel.

  • Select the child Text GameObject.
  • With the Text GameObject selected,
    • ... set the Anchor, Pivot and Position to stretch.
    • ... set the Text to "Win Text".
    • ... set the Font Size to 64.
    • ... set the Alignment to middle/center.
    • ... set the Color to blue (0, 204, 204, 255) using the Preset.

description

  • Save the scene.

We now need to control this UI Panel and its UI Text element.

  • Open the GameController script for editing.

We will need references to both the GameObject holding the Game Over Panel and its associated Text element. We will need to make sure that the Game Over Panel is deactivated at the start of the game. Finally, we’ll want to activate the Game Over Panel and set the Text value when the game is over.

  • Create a public GameObject variable for the Game Over Panel.
  • Create a public variable for the associated Text component.
public GameObject gameOverPanel;
public Text gameOverText;
  • In Awake, set the gameOverPanel to Inactive.
gameOverPanel.SetActive(false);
  • In GameOver,
    • ... set the gameOverPanel" to Active.
    • ... set the gameOverText.text" property to display the winner.
gameOverPanel.SetActive(true);
gameOverText.text = playerSide + " Wins!"; // Note the space after the first " and Wins!"

The final script should look like this:

GameController

Code snippet

using UnityEngine;
using UnityEngine.UI;
using System.Collections;

public class GameController : MonoBehaviour {

    public Text[] buttonList;
    public GameObject gameOverPanel;
    public Text gameOverText;

    private string playerSide;

    void Awake ()
    {
        SetGameControllerReferenceOnButtons();
        playerSide = "X";
        gameOverPanel.SetActive(false);
    }

    void SetGameControllerReferenceOnButtons ()
    {
        for (int i = 0; i < buttonList.Length; i++)
        {
            buttonList[i].GetComponentInParent<GridSpace>().SetGameControllerReference(this);
        }
    }

    public string GetPlayerSide ()
    {
        return playerSide;
    }

    public void EndTurn ()
    {

        if (buttonList [0].text == playerSide && buttonList [1].text == playerSide && buttonList [2].text == playerSide)
        {
            GameOver();
        }

        if (buttonList [3].text == playerSide && buttonList [4].text == playerSide && buttonList [5].text == playerSide)
        {
            GameOver();
        }

        if (buttonList [6].text == playerSide && buttonList [7].text == playerSide && buttonList [8].text == playerSide)
        {
            GameOver();
        }

        if (buttonList [0].text == playerSide && buttonList [3].text == playerSide && buttonList [6].text == playerSide)
        {
            GameOver();
        }

        if (buttonList [1].text == playerSide && buttonList [4].text == playerSide && buttonList [7].text == playerSide)
        {
            GameOver();
        }

        if (buttonList [2].text == playerSide && buttonList [5].text == playerSide && buttonList [8].text == playerSide)
        {
            GameOver();
        }

        if (buttonList [0].text == playerSide && buttonList [4].text == playerSide && buttonList [8].text == playerSide)
        {
            GameOver();
        }
        if (buttonList [2].text == playerSide && buttonList [4].text == playerSide && buttonList [6].text == playerSide)
        {
            GameOver();
        }
        ChangeSides();
    }

    void ChangeSides ()
    {
        playerSide = (playerSide == "X") ? "O" : "X";
    }

    void GameOver ()
    {
        for (int i = 0; i < buttonList.Length; i++)
        {
            buttonList[i].GetComponentInParent<Button>().interactable = false;
        }
        gameOverPanel.SetActive(true);
        gameOverText.text = playerSide + " Wins!";
    }
}
  • Save the script.
  • Return to Unity.

We now need to assign our new panel and text to the variables we’ve made in the GameController script.

  • Select the Game Controller in the Hierarchy Window.
  • With the Game Controller selected,
    • ... assign the Game Over Panel property.
    • ... assign the Game Over Text property.

description

  • Save the scene.
  • Enter Play Mode.
  • Test by clicking any of the spaces.

Now, when we get three in a row with either team, we should get a clear announcement that the game is over and who won.

description

In the next lesson we will handle the cases where no one wins and the game is a draw.