Building User Interfaces with Unity — Easy Peasy UI Squeezy

Photo by Element5 Digital on Unsplash

Now that we have various PowerUps and Enemies spawning. It’s time to start implementing a scoring system. Once again Unity is going to Flex it’s “Swiss army knife muscles” and lets us use its built in UI system. (not to be confused with Unity’s new UI Toolkit which I will cover at a later date).

Objective: We’ll start nice and easy by getting score text to display in the top right corner of the screen and to add 10 points each time our lasers hit an alien.

Implementation: We begin by right clicking in our hierarchy view and choosing UI → Text

This will create three needed elements in our hierarchy and scene view. Firstly it will create our canvas. The canvas in Unity is a strange and wonderful tool. Strange because I remember the first time I created one I thought I messed up all my dimensions. You get this HUGE canvas entity that starts in the middle of your current scene and grows obscenely large to the upper right. The reason for this is that the canvas is pixel accurate (or rather counts its actual size in Pixels) That’s the best explanation I can offer now without writing a thesis on the matter :P

Next you get an Event System. This controls button and slider behaviours in our UI. More on this later.

And finally the actual thing we clicked on we get a Text Element that we can position to the top right corner. We’ll also change it’s name to Score_text and add some dummy text to it in the inspector Score: 800.

Next we want to Anchor the text so that is will stay where we put it regardless of our players device or screen size. We’ll also change the text size and color to white.

Now that we have our Score Text anchored where we want it it’s time to get it to add points when we hit the Enemies.

In order to accomplish this we need a new script to attach to the Canvas called UIManager.

UIManager Script Changes to Display score

In our new Script we need to add a new using UnityEngine.UI; class call to use the UI elements within out script.

We then create a [SerializeField]new private Text _scoreText; variable that we then attach to the slot on the Canvas inspector. In the start method we then assign the _score.Text = “Score: “ + 0; at the start of every game.

Now this is the tricky part. In order to update the UI Manager we have to have some communication between 3 of our scripts. Namely; UIManager.cs , Player.cs and Enemy.cs

We’ve covered our changes for the UIManager. I’ll go into what we do for each in detail below. Starting with our Player Script.

For our Player script we need two variables. One int for _score. This will be where we store and update our score value when the player hits an enemy.

The next is a variable to our UIManager. Then in our start method we want to make the UI manager available to the rest of our script since we will be manipulating an element within it namely the score. We could do so in the method itself but that would be expensive to call each time a hit is recorded so we will call it once in start and have it available as long as the program is running. We also add a null check to make sure it is available to us.

In our ScoreCalculator method we create a points int that will allow us to use different values based on enemy types if we so choose. We then add the points to the score and update the score in the UI Manager.

In our Enemy script we simple call to _player.ScoreCalculator(10); in our laser hit method.

And finally we add one more method to our UIManager that the player calls to to Update the score.

It’s heady stuff. There is a lot of back and forth between the scripts and various updates but its broken down into very logical steps which once reviewed a few times and understanding why these design patterns are utilized we can more easily understand the functionality.

Making Pew Pew worth something!



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store