Displaying level information

Now that we have our game manager ready, it is time to visualize to the player what level they are currently standing on and which level they are entering.

The setup

Let us first configure our path navigator in the inspector. We still need to set our world map asset reference and our current level reference, so let's do that now.

Note: For the current level, we select the first level because this will always be our starting point when starting a new game.

The last thing we need to set up is our on confirm function to our confirm call back function of our input system.

And with that we've got everything setup and ready to continue on with the rest of the tutorial.

Creating the UI

Now we have to create our canvas elements that will display all our information about the level we're currently standing on, entering the level we're currently standing on and our fading panel.

First, we create our canvas. to do that we right-click in the "Hierarchy", then go to UI --> Canvas.

On our canvas we need to change a few things. The first thing is we need to change our "UI Scale Mode" from "Constant Pixel Size" to "Scale with Screen Size".

Important: We do this so when other systems have different resolutions the UI will scale along with the resolution of that system. That way your UI elements stay in the exact same position.

I would recommend putting the "Reference Resolution" to "1920x1080". It's a resolution that current generation systems all have.

And that is all you have to do on your canvas. Now let's add in a panel that we can use to fade between opaque and black in. To add this onto our canvas, simply right-click on the canvas then go to UI --> Panel.

Note: I've named mine "Fade panel", but you can leave the name as is or change it to your liking.

On our panel we need to adjust a few things as well. We need to change our color to black and our alpha needs to be turned up all the way to 255.

After that we need to uncheck "Raycast Target" and "Maskable".

And with that, our fade panel is ready to be used, but we still need to do other UI elements and we can't see them while our panel is active. So we temporary uncheck our game object inside the inspector.

Now lets create a way to display our level information to the player. First, we need to create an empty game object inside our canvas. Make sure that the game object is above the fade panel.

Then, we need to set the anchor position of this element to the top left of our screen. We do this by clicking on our newly create game object and click on the "Anchors Presets" icon.

Then we'll see the following window.

We want to select the top left option, but before you click on hold "Shift" while doing so. This will set the pivot point also to the top left. Then hold "Alt" and click on it again to move the position to the top left corner as well. You'll need to do these steps for the other UI elements we're going to do as well, depending on the position we want them to be at.

Now create an image inside the object and also position this to the top left just like we did before. In case it doesn't position correctly Immediately, go back to the parent object again and make sure the X and Y positions are at 0,0.

Let's adjust the width and height of our background image. I like to make a horizontal rectangle out of it to properly display level information on. I've set mine to 320x100, but you can scale it to whatever size you see fit.

We then have to create two text elements, one for displaying the level number and the other for the level name. To do this we right click on our background object then go to UI --> Text - TextMeshPro.

You'll now see the following window popup.

Click on "Import TMP Essentials" and let Unity configure everything it needs to do. After that we can close this window.

Now go over to the text element and you'll see the following window.

We need to adjust the anchor points just like we did with our other elements to also be on the top left corner.

Important: Make sure you set the width and height of your text elements to be the same as your background image!

Then we can remove the text inside our "Text Input", because we will fill in this information later via code.

We can now duplicate this text element and change the anchor position and pivot to be the bottom left corner. Or if you've made another text element already, just adjust that one to be positioned in the bottom left corner. Don't forget to also remove the text inside the "Text Input" field if you didn't make a duplicate of the previous setup.

The last UI element we need to set up is our level enter display. For this we follow the same steps as before, the only difference is we only need one text element instead of two. In the end your hierarchy should look something like this.

Now let's adjust the values of these elements, starting with the level enter display. We need our anchor pivot and position to be at the bottom center.

Then we also need to adjust our anchor pivot and position for our background to the bottom center as well. The only difference we make here after we've done this is to set or Y position to be at 80. The reason for that is I don't want my enter level display a little bit higher so it's easier to see. You can adjust yours to whatever value you'd like.

I've also scaled the width and height a bit to fit in the text I want to display in here later one.

We also need to turn off "Raycast Target" and "Maskable" and for our color I went for a grey background by setting the color to black and set the alpha half its value. Again, you can change this to whatever value you'd like.

The last thing we need to adjust is our text element. We first need to scale with with the size of the background. To do this we use the "Stretch" option inside the anchor pivot settings.

After that, we need to empty the text field of "Text Input" and set its "Alignment" to be "center".

And with that all our UI elements have been set up, Now we only have add set our references of these elements inside the game manager.

Note: I've set my fading speed to 0.5 because it feels like it's a good speed, but you can adjust it to whatever value you'd like.

Important: Don't forgot to enable your fade panel game object!

Now you're almost done with setting up everything inside Unity. Now all we have to do is add some additional code to a couple scripts to make this all function properly.

Tip: A good thing to do is to create prefabs out of your UI elements as well. In case you want to use the same setup again, but in a different scene.

Setting up our display code

Go to your player navigator script and add three private "TextMeshProUGUI" variables and make them serialized so we can edit them in the inspector.

Note: We're currently getting errors because we haven't implemented text mesh pro into our script yet.

Now go to the top of your script and add "using TMPro". This will resolve any issues regarding the text mesh pro references.

Now go to your on trigger enter function and underneath where we get our current level, type "levelNumber.text = "Level: " + currentLevel.levelData.levelNumber;". What this does is we give our text element a text line, we want to display and add on our level number we get from the current level data.

The last thing we need to add here is to display our level name. Since this already a string value we can set this from our level data without having to add in a custom string line beforehand.

And with that our on trigger enter function is complete. Now let's do our on trigger exit function.

For this we only have to empty out our text elements by setting it equal to nothing. For our level number text that would like, "Level: ", and for our level name, "";.

The last thing we need to add in this script inside our on confirm function our level number we're entering. I went for displaying the level number, but you could display the name of the level as well. The choice is all up to you. In the end the function looks like this.

Now let's go back into Unity and add our text mesh pro references to the corresponding slots. In the end you should have something like this.

And with that you are now able to display your level information inside your level info display and when you're entering a level.

In the end you should have something looking like this.

This concludes the part to implement our scene transition effect and displaying the level information to the player. Up next we'll add the switching between different scenes.

1MB

Worldmap with scene transition and level info display.unitypackage

Open