Skip to content

Tutorial: Score

Sarah Herzog edited this page Jun 2, 2019 · 7 revisions

In this tutorial, you will learn how to keep track of how many items a player has picked up as score. In this case, we'll use a coin as an example. We'll accomplish this by keeping track of the score using a Data component, and displaying the contents of that data to the screen using Unity's UI system.

This tutorial requires a moving player using something like the Tutorial: Platformer Player Movement. It also requires a collectable like those in the Tutorial: Collectables. Example assets are provided in the tutorial package.

Before we start, let's clearly state our goal behaviour:

Add to a score whenever the player picks up a coin, and display the score to the screen.

Action - Add to Score

In the stated goal behaviour above, the first part of the sentence describes an Action that should occur:

Add to a score...

Out action is to add to some score value. We can do this using an IntData component. Data components are a special type of component that are both Action and Activator. In this case, it will act as an Action, as we will be adding to it.

Our IntData will be added to a GameObject that will display our score. We can create that GameObject using the GameObject menu > UI > Text.

This will create a new GameObject called Canvas, which will hold all of your UI (user interface) type objects. The Canvas is rendered in "screen space" by default, so might look a bit strange - it will be much larger than the rest of your game. If you double click on the canvas, you will see its full size - this will match the size of your screen. Use this to position your UI elements like your score text - don't base them on the game world!

You will also have created a Text GameObject as a child of the Canvas. The Text GameObject is the one we'll be using for our score - so go ahead and rename it to "Score" now.

Our Score GameObject will already have a Text component attached. This controls what text is written to the screen. Let's change it to just display the number "0".

There are many other settings for the Text component - you can try changing the colour, size, alignment and font for the text to make your score look different.

In order to add to our score, we need some numerical representation of the score. While we have written a number, 0, in our text box, this is still text, not a number. We might as well have written out the word "zero" - the computer does not understand text. Instead, we need data.

Let's add an IntData component to our Score GameObject.

This component lets us keep track of a whole number value, or integer. That's why it's called "Int" data - short for integer. You can see the starting value for the IntData is 0 by default, which makes sense for our score, so we can leave it as it is.

This Data component acts like both an Action and an Activator. As an Action, we can use it to add to the value. To do that, as always, we need an Activator to trigger the Action.

Activator - Picking up a Coin

In the stated goal behaviour above, the second part of the sentence describes an Activator for our action:

...whenever the player picks up a coin.

Let's take a look at the coin we set up in the Tutorial: Collectables.

Our coin currently only does one thing when touched by the player - it destroys itself. Now we want to trigger one other action - we want it to add to to the score.

Add a new entry to the "On Trigger Enter Actions" action list for the OnTrigger2DActivator component on the coin. Drag in the Score GameObject in - this is where the Action we want to trigger is located. Select the IntData component from the dropdown, then the ActionAddValue function. Finally, type into the box how many points your coin should be worth. We'll use 100 as an example.

That will now trigger our addition when the coin is collected. However, if you run the game just now, you'll notice the displayed score never changes from 0. We still need to do the last part of our goal.

Action - Display the Score

In our goal behaviour above, the last part of the sentence describes a second Action we want to take:

...and display the score to the screen.

To display something to a Text component, we need to use a UITextAction. Let's add one to our Score object now.

The only setting for this component has to do with FloatData display, not IntData, so you can leave it as the default.

As always, this is an Action. We want to activate this action. Luckily for us, we can use an existing Activator to do this!

We want the displayed score to always update to match what the IntData numerical score is. This means we can use the IntData's OnValueChange Activator to trigger an action on our UIText.

On our Score GameObject, add a new entry to the Action List for OnValueChange on the IntData component. The action we want is on the Score GameObject, so drag that in. Choose the "UIText" component from the dropdown, then select the Dynamic version of the ActionSetInt function.

Important: You must choose the Dynamic version here. This means that the InData component will pass along the current data value to the UIText component, rather than passing along a fixed number that doesn't change.

Now your visible text should update to match your numerical score any time your score changes - including when your coin is collected and adds to the score! Test it out - you should see something like this:

You might want to use another Text GameObject to add a label for your score, or use an Image to show an icon next to it. If you want a score based on a timer, check out the Tutorial: Timer Score. Your score also won't persist between scenes / levels right now - you'll need to use the Save ID and Save / Load actions on the IntData to make that work. See Tutorial: Persistent Score to learn how to do this. Finally, if you want to add a High Score system, see Tutorial: High Score