Displaying player ID on the UI/HUD

This lesson will show how to use UI elements to display player information on the screen.

Download the Starter Template if you don't have a Unity Project to use.

You will need to add a Player Input Manager to the scene and then link the player prefab.

We want each player to eventually have their own Canvas / UI.

If we want one UI for the entire scene apply this to the Scene instead.

Creating the UI/HUD

To achieve this we need to open the player prefab.

Next insert a Canvas object onto the prefab.

So long as the UI is not interactable (clickable) we do not need to add an event system.

Add a Text - TextMeshPro object to the scene.

When you first add a Text Mesh Pro object you will be asked to import TMP Essentials. Click the Import TMP Essentials button. If you do not Text Mesh Pro objects will not work.

By default an EventSystem is often added.

As we are using the multiplayer system we don't want this.

If you added the Canvas and Text Mesh Pro separately you might not have the EventSystem. It will also add one by default if you are working directly on the scene.

Change the text in the inspector and the Vertex Color.

Now we need to ensure that the Canvas objects are inside the canvas.

In the player adjust the resolution to match your target output for the game.

Adjust the settings until you get the positions correct

When positioning objects look at Rect Transform and click the grid in the top left.

You can then set the origin point for that item in relation to the page

You can also adjust the height and width of the objects here.

Play the game regularly to test the UI.

Note when we add two players it appears that the second player UI hasn't appeared.

If we look in the hierarchy we can see that the ui is overlapping.

You can see this by moving one Text box in the Scene view.

Individual Player UI/HUD

Go back to the Player prefab.

Select the Canvas

Go to the inspector and change the screen space for the Canvas to Screen Space - Camera

Now we need to link the camera of the prefab to the scene.

Drag the camera to Render Camera or click the target and select the camera.

Now when we test each player gets their own UI.

Note that the UI hasn't scaled.

Change the Canvas Scaler UI Scale Mode to Scale With Screen Size

You will also want to change the reference resolution to match your target resolution.

I suggest 1920 x 1080 for Full HD.

We need to create a script to update the text on the canvas to display the player id.

Create a Script called PlayerUIManager and attach it to the Player prefab.

Open the script.

As we are gathering information from the playerinput (player controls) and the text mesh pro package TMPro.

This is shown on lines 4 and 5.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.InputSystem;
using TMPro;

public class PlayerUIManager : MonoBehaviour
{
    // Start is called before the first frame update
    void Start()
    {
    
    }

}

Next set up two variables.

One int to store the player id, shown on line 9.

Line 10 has us create a TextMeshProuGUI object that will be linked to the text object on the canvas. We will link this after completing the code for this script.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.InputSystem;
using TMPro;

public class PlayerUIManager : MonoBehaviour
{
    public int playerID;
    public TextMeshProUGUI playerText;
    // Start is called before the first frame update
    void Start()
    {
    
    }

}

Inside the Start() method we need to setup the playerID and also update the playerText.

Line 14 gets the PlayerInput component of the object this script is attached to. we get the playerIndex value and store this in the playerID variable. We add + 1 to it to update the player number.

On line 15 we update the text by accessing the TextMeshUGUI object through playerText.text and then assign the message to the text area. This is achieved with "Player " + playerID. We use

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.InputSystem;
using TMPro;

public class PlayerUIManager : MonoBehaviour
{
    public int playerID;
    public TextMeshProUGUI playerText;
    // Start is called before the first frame update
    void Start()
    {
        playerID = GetComponent<PlayerInput>().playerIndex + 1;
        playerText.text = "Player " + playerID;
    }

}

Save the script and run the game.