It's a great time to add more UI into the game! I have prepared the second one for you—InGameCanvas
. Yet again, you have to download and import InGameCanvas.unitypackage
.
Import the aforementioned package and drag the newly created InGameCanvas.prefab
file on top of the UI game object.
InGameCanvas
should appear as a child of the UI game object. It will be invisible for now, but don't worry about it too much at the moment. We will need to add a bit of code to manage the visibility of InGameCanvas
and MenuCanvas
.
As I have mentioned before, the plan is to show only one UI view at a time to the user. In this way, we will avoid confusion created by multiple layers of a UI on top of each other. When the user is using the menu, only the Menu Canvas should be visible. When the user is in the game, only inGameCanvas
should be visible. Simple!
Let's add a few lines of code to trigger this behavior.
In the GameManager
class, add another Canvas
type public variable and call it inGameCanvas
. We will use this reference to control the enabled state in exactly the same way as we did for
menuCanvas
. Find the SetGameState
function and edit it so that it looks like this:
Make sure that this time you connect the inGameCanvas
slot in the inspector to the right game object. Press Play in Unity to preview the behavior. If everything works as it should, MenuCanvas
will disappear as soon as we press the Play button and inGameCanvas
will appear.
Great! It all works fine. The views are switching properly. In the Game, view isn't doing any work at the moment. The score, collected coins, and high score always display zero values. We will take care of this in the next chapter.
I hope it's clear to you how to create additional views for our game. We are missing one more View—GameOverView
. I would like you to import it and implement switching yourself as an exercise. You can find GameOverView
on the Packt hub. I have named the file GameOverCanvas.unitypackage
.
Testing the UI is very crucial. To test whether the Game Over view is presented to the user at the right time or not, we need a certain condition to happen. In this case, we are calling game-over as soon as the player dies in our game. Let's create the right conditions for this.
At the moment, we are using only one level piece, which is a straight ground level. To make things a bit more interesting and challenging, create a copy of the LevelPieceBasic
game object and call it LevelPieceHole
. Delete two sections of the floor and place the KillCollider
prefab under the hole. Make sure that the KillCollider
prefab is a child of the LevelPieceHole
game object.
The last thing to do is add the newly created level piece into LevelGenerator
. Add LevelPieceHole
into the Level Prefabs list inside LevelGeneratorComponent
.
That's it! With these few steps, we have added a new level piece into the game. To test whether the game-over canvas is being displayed at the right time or not, let the player fall through the hole.