Displaying Score and Text

Tutorial

·

Beginner

·

+10XP

·

20 mins

·

(3293)

Unity Technologies

Displaying Score and Text

In this tutorial, you’ll:

  • Revise the PlayerController script to store the value of collected PickUp GameObjects
  • Create and configure UI Text Elements to display:
    • The count value
    • An end of game message

Languages available:

1. Overview

In this tutorial, you’ll:


  • Revise the PlayerController script to store the value of collected PickUp GameObjects

  • Create and configure UI Text Elements to display:

  • The count value

  • An end of game message

By the end of this tutorial, your game will look something like this:



2. Store the value of collected PickUps

Follow the video or text instructions below to declare a new count variable, initialize the variable, and increment it by 1 every time the player collects a PickUp GameObject:



Download Transcript


1. Declare a new count variable.


  • Open the PlayerController script for editing.

  • Underneath the Rigidbody variable declaration, add the following line of code:

[@portabletext/react] Unknown block type "code", specify a component for it in the `components.types` prop

2. Initialize the count variable.


  • In the Start function, add the following line of code to initialize the count variable at 0:

[@portabletext/react] Unknown block type "code", specify a component for it in the `components.types` prop

3. Increment the count variable.


  • In the OnTrigger function, after the line that sets the other GameObject to inactive, add the following line of code:

[@portabletext/react] Unknown block type "code", specify a component for it in the `components.types` prop

3. Create a UI text element

Follow the video or text instructions below to add a Text GameObject named “CountText”, preview the full canvas in 2D view, edit the text, and edit the text position:



Download Transcript


1. Add a Text object named “CountText”.


  • In the Hierarchy, right-click > UI > Text - TextMeshPro.

  • If a dialog opens to install TextMesh Pro Essentials – select Import TMP Essentials, then close that dialog.

  • Rename the Text (TMP) GameObject “CountText”.

2. Preview the full canvas in 2D view.


  • Select the Canvas GameObject and press the F key to frame the entire GameObject in the Scene view.

  • Select the 2D toggle at the top of the Scene view to change to 2D view.

3. Edit the text.


  • Select the CountText GameObject.

  • In the Text box, delete “New Text” and replace it with “Count Text” as a placeholder.

4. Edit the text position.


  • Select the anchor preset icon at the top of the Rect Transform component to open the Anchors and Presets menu.

  • Hold Shift+Alt (macOS: Option) and select the upper-left anchor point. Holding those keys will set the pivot and position for CountText based on the new anchor.

  • Change the Rect Transform component’s Pos X value to 10 and Pos Y value to -10 to move it away from the corner a bit.



4. Display the count value

Follow the video or text instructions below to create a new SetCountText() function that updates the score UI:



Download Transcript


1. Import the TMPro library.


  • Open the PlayerController script in your script editor.

  • Add the following new line of code underneath the other “using” statements:

[@portabletext/react] Unknown block type "code", specify a component for it in the `components.types` prop

2. Declare a new text variable.


  • Underneath the speed variable, create a new variable for your text:

[@portabletext/react] Unknown block type "code", specify a component for it in the `components.types` prop

3. Create a new SetCountText() function.


  • Underneath the OnMove function’s closing curly brace, leave a space and add the following new function:

[@portabletext/react] Unknown block type "code", specify a component for it in the `components.types` prop

4. Call SetCountText in Start and OnTriggerEnter.


  • Add the following line at the end of the Start function to set the text at the beginning of the game:

[@portabletext/react] Unknown block type "code", specify a component for it in the `components.types` prop

  • Inside the IF statement for OnTriggerEnter, call the SetCountText function again using the same instruction:

[@portabletext/react] Unknown block type "code", specify a component for it in the `components.types` prop

  • Save your script.

5. Assign the CountText variable in the Inspector window.


  • Select the Player GameObject in the Hierarchy window, then drag the CountText GameObject into the Count Text slot to reference the UI text element.

Important: This step is very important and easy to miss. If you do not do this step, you will see a NullReferenceException error in the Console window and your game will not work.



6. Test your game.


  • The score should now start at 0, then increase by 1 each time the player collects a PickUp GameObject!

  • If your game is not working, check the script sample at the end of this tutorial to make sure your code is correct.


5. Create a game end message

Follow the video or text instructions below to create a new “You Win” text GameObject, declare a variable for your text that’s disabled at start, display the text when all PickUp GameObjects are collected, and assign the winTextObject variable in the Inspector window:



Download Transcript


1. Create a new “You Win” text GameObject.


  • In the Hierarchy window, right-click > UI > Text - TextMeshPro, then rename it something like “WinText”

  • In the Inspector window, change the text to “You Win!”

  • Set the Vertex Color to black.

  • Set the Font Size to 32, and make it bold if you want.

  • Set the alignment to Center.

  • In the Rect Transform component, set the Pos X value to 0, and the Pos Y to around 100.

  • Preview the text in Game view, then save the scene if you’re happy with the text.

2. Declare a variable for your text that’s disabled at start.


  • In the PlayerController script, create a new public variable, of the type GameObject, and call it “winTextObject”:

[@portabletext/react] Unknown block type "code", specify a component for it in the `components.types` prop

  • In the Start function, add the following line of code to hide the win text by default at start:

[@portabletext/react] Unknown block type "code", specify a component for it in the `components.types` prop

3. Display the text when all pickups are collected.


  • In the SetCountText function, underneath the instruction setting the count value UI text, add the following IF statement:

[@portabletext/react] Unknown block type "code", specify a component for it in the `components.types` prop

Important: Make sure to change the number “12” to however many PickUp GameObjects you actually have in your game.


4. Assign the winTextObject variable in the Inspector window.


  • Save your script and return to Unity Editor.

  • Select the Player GameObject in the Hierarchy window, then drag the WinText GameObject from the Hierarchy window into the Win Text Object variable slot.


5. Test your game.


  • Save the scene and enter Play mode to test your changes.

  • The win text should be displayed when all PickUp GameObjects are collected.


Optional Step

6. Final script sample

If your script is not working as expected, below is an example of what your code should look like at this point. The comments have been added to make the code more readable.


PlayerController.cs


[@portabletext/react] Unknown block type "code", specify a component for it in the `components.types` prop

Complete this tutorial