Skip to Main Content






Unity tutorial

Score display

In the Assets folder, right-click > Create > Folder, name it "Gradient"

Right-click in the folder > Create > TextMeshPro > Color Gradient, name it "Yellow-Gold", in the inspector window:

  • Select the "Four Corners Gradient"
  • For the colors copy the following color codes:
    • Top Left and Top Right: #FADA00FF
    • Bottom Left and Bottom Right: #D16E03FF

 

Right-click on the Hierarchy window > UI > Canvas

Right-click on the Canvas > UI > Text - TextMeshPro

Click on Import TMP Essentials on the TMP Importer window, 

Right-click on the "Text (TMP)", name it "Display", in the Inspector window:

  • Change the PosX to -640, PosY to 330
  • Change the "New Text" to "Score:"
  • Check the Bold button in the Font Style
  • Check Color Gradient and drag the "Yellow-Gold" color gradient into the placeholder
  • Check the Underlay box at the bottom
    • Click on "Click to expand" and change the Offset X to 1, Offset Y to -1, Softness to 0.6

(In the Game tab, the text might not appear in the position shown in the video, that is due to a different resolution screen, the final build of the game is going to be the same)

Script for displaying score

Now we will add a score counter that updates the score based on time.

 

Navigate to the Scripts folder

Right click in the folder > Create > C# Script

Name the script "DisplayScore", click on the script to open it in Visual Studio

Copy the following code into the script and save the file:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using TMPro; // library has to be called to use TextMeshPro
using UnityEngine.UI; //library has to be called when implementing canvas

public class DisplayScore : MonoBehaviour
{
    public TextMeshProUGUI scoreUI;
    public int scorepoint;
    private float timer = 0.0f;
    void Update()
    {
        /*
         Every second of servival will increase score by 1
         */
        if (timer < 1)
        {
            timer = timer + Time.deltaTime;//deltaTime is the time between two frame 
        }
        else
        {
            scorepoint++;
            timer = 0;
        }
        scoreUI.text = "Score: " + scorepoint.ToString();
    }
}

 

Click on the dropdown for Canvas and select Display

Click on the Scripts folder and drag the DisplayScore script into the inspector window of Display

  • Drag the "TextMeshPro - Text (UI)" component into the Score UI placeholder