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.