2D Game Dev Journey — Day 8: User Interface (UI)

Welcome to 2D Game Dev Journey — Day 8: User Interface (UI). Today I will be creating the UI components of our game to visualize many of the features we have implemented so far.

Starting Point & Setup

Today we will be starting right where we left off in 2D Game Dev Journey — Day 7: Shield Powerup.

Day 8 starting point

Score Text

The first thing we will set up is a text UI to keep track of the player’s current score. When doing so, I made sure to set up my canvas to scale with the screen size to make my UI responsive based on the current screen size.

Responsive UI example

Creating the UI Manager

The UI Manager is the script that will be controlling the UI. This includes changing the score as it needs to be changed, changing the player’s current lives, and all features that can/must be shown with UI. For now, we only have the score text to manipulate. After implementing things in code, I got the following result where the score increases by 10 points every time an enemy is destroyed by our laser.

This UI Manager script will be utilized throughout today to properly implement the lives.

Lives Display

With our UI manager now created, the next thing I worked on was the UI to display how many lives our player currently has. Below was the result of implementing the lives UI:

Game Over

Now we can visualize our player’s lives, and we can see when the game ends due to it becoming empty on the player’s death. Let’s make the game over a bit more clear by adding in a “Game Over” text.

Restart

With our “game over” now set up, the next step is to give our player the ability to restart the game. I implement this through the use of the “R” key. After writing all the code for this step, we get the following result:

Main Menu

Finally, let’s create a basic Main Menu to display some credits and so the player can control when the game starts. Not all UI created in this step will be final, but it’s good to get what we can to at least have the functionality in place for all final UI. After creating my main menu, this is the result I was able to achieve:

Conclusion

Thanks for checking in and reading today’s article. Tomorrow, I will be adding some Visual Effects (VFX) to give the game even more pop. As always, comments and critiques are welcome. If I have made any mistakes, please let me know so I can correct them for future readers. If you would like a more in-depth tutorial about anything I went over today, let me know and I will take the time to write something up.

--

--

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