My journey becoming a Unity game developer: 2.5D Infinite Runner-Coin Collection and Display

Objective: Allow the player to be able to collect coins when they collide into them. Also, show each coin collected onscreen with a Coin amount text display.

Player able to collect coins with a tally onscreen.

To have the player be able to collect coins in the game, let’s make sure to make the Coin game object into a Prefab. It’s best to turn the 1st Coin created into a prefab, then use that Coin prefab to place the other coins around the game. However, I made a mistake by not doing that so I will copy the Transform component value of each coin placed in the scene. Then, delete each Coin not a prefab, drag the Coin prefab into the Hierarchy and Paste the Transform’s Component Values into each Coin prefab to place them back at the locations previously positioned.

Collectable object turned into a prefab.

Rename the Collectable objects to their new name of Coin. Also, rename the Collectable prefab object in the Prefabs folder to Coin as well.

Renamed the Collectable objects to Coin.

Next, we want to use the Canvas to create text for how many coins the player collects. Select UI->Text, and name the Text object Coins.

Canvas created for the Coin text onscreen.

With the Canvas object selected, go to the Canvas Scaler component and change the UI Scale Mode to Scale with Screen Size. This will keep the text onscreen to the size relative to the size of the screen the game will play on.

Canvas set to Scale with Screen Size.

Select the Coins game object, and go to the Anchor Presets. Set the text field’s pivot point to the bottom left-corner and set the position by holding down the Alt-key, then clicking on the bottom left-corner preset.

Set the Coin text position to the bottom left-corner through the Anchor Presets setting.

With the Coins object still selected, in the Text field setting we will change the text inside to “Coins: “ with a space after the colon. Come down to the Paragraph setting, change the Alignment to have the text inside the field positioned to be in the middle. Then, change the text’s Color to something that can be seen onscreen easily which in this case we used White.

Coin text alignment set to the middle in the text field and color changed to white.

In the Rect Transform, change the Height of the text field to be taller. Afterwards, change the Font Size of the Coins text to a larger number so the user can see how many coins were collected easy.

Changed the text field’s height to a larger size through the Rect Transform and Font Size changed to be bigger as well.

With the Text field and text itself bigger, we can move the text field’s position using the Rect Transform’s PosX and PosY positions to place the Text field into a better location onscreen for the user to see. Also, come down to the Paragraph setting and change the Horizontal and Vertical Overflow to Overflow. This will allow the text inside the field not to be clipped off, but be rendered outside the text field’s box.

Positioned the Coin text field using the Rect Transform’s X and Y-axis, and changed the Horizontal and Vertical Overflow to Overflow.

Now let’s create a C# script to control the text onscreen using the name UIManager. We will use the Singleton pattern for this manager by creating a Private Static Type UIManager variable name instance. This will be the instance used to access anything inside of the script.

Next, create a Public Static Type UIManager property name Instance. IF it’s null, send a Log Error to the user that the Instance is null. If it’s not null, we will return the instance of this script. Using the Awake() function, we will set the instance to this script to begin at the start of the scene.

Create a variable that’s Public Type Text name coinText as this will be a handle to the Coins game object on the Canvas. Create a method that’s Public Type Void name UpdateCoinDisplay() which will update the text onscreen for the coins. We will pass in a Type Int name coins to represent the number of how many coins were collected by the player. Inside of the method, we will use the variable coinText to gain access to the text field, and set it to show the word “Coins: “ onscreen. Plus, take the coins passed-in and change it to a character String so there won’t be any unexpected math calculations performed.

UI Manager created to update the coin text onscreen.

Inside the Player script, create a new variable Type Int name coins which will represent the number of coins the player collects. Create a method with a Public access modifier Type Void name AddCoins(). Use the coins variable, and increment plus one for every coin the player collects. Then access the UI Manager by using the UIManager, Instance property, and the Update Coin Display method. Pass-in the coins variable to update onscreen the amount the player has collected.

AddCoins method created to add a coin every time the player collects one.

Last, create a Coin script that will check if the player has collided with a coin. We will use the OnTriggerEnter() function, then check IF the other object that collided with this coin is the Player by comparing its Tag. If the Player collided with the coin, get the Player’s script component. If the Player isn’t null, use the Player’s component to get the AddCoins() method. When the AddCoins() method increases the total onscreen, we will Destroy this coin game object.

When the player collides with the coin, the player’s coin tally will increase onscreen.

Play the game and see the player able to collect the coins, and the coins amount collected displaying onscreen.

Coins collected by the player.

Next time we will work on the Moving Platform.