In this lecture, we'll talk about how to provide text output in our Unity games and this is really useful if we want to share some textual information, like a score with the player, let's go take a look. We're starting with our fish shooter game that we developed previously and I'm going to add a text display of the score to this game. There's a big idea associated with adding user interface or UI elements to our game and the big idea is that those elements go onto something called a Canvas. At least in our 2D games, you can actually add user-interface elements in a 3D world if you wanted to do so, but in our 2D games, we'll put our UI elements onto a canvas. I'm going to right-click here in the Scene View and I'm going to add a UI canvas down at the bottom. As you can see, when I added the canvas, I also got an event system and we'll need that when the player is interacting with menu buttons or if they were providing text input as part of the game and so on. We won't actually use the event system in this game, but it comes automatically with our canvas and we'll just leave it alone. I'm going to rename my canvas to be HUD, because this really is the HUD and now I'm going to add a text element to our HUD. I'll right-click and down in UI, I will pick text mesh Pro and I'm going to just change the name of this right now to score text and as you can see, we have text added to our screen. I'm going to do a number of things with this text. First, I'm going to anchor it to a particular location. Anchoring our elements to a particular location makes it so that they stay in that location, even in the face of resolution changes, which is important to us. I'm going to anchor this to the top middle and then I'm going to move it up to be closer to the top and I'm going to come down here to alignment and I'm going to center my text. At this point, I don't actually care what the text says, because I'm going to handle changing the text in my HUD script, but I'll change it here to say score 0. It's also important, since I talked about resolution changes, that we come back to our canvas and look at the canvas scaler here in the Inspector. The default for our Canvas Scaler is that it's a constant pixel size and that's a really bad idea if we're going to have different resolutions. I'm going to change this to scale with screen size and when I do and use to provide a reference resolution. I'll just say 1920 by 1080 is my reference resolution. Now that I've done that, you can see that my text is a little too close to the top and not quite big enough. I'll come back to my text and I'll move it to be negative 100 instead and I'll change the font size to be something bigger than 36, 48 for example and I can change lots of characteristics of this text. I can make it bold and you'll notice that it wrapped there and I can avoid that wrapping by coming up here to the width of my text and I can make it wider and then I don't get that wrapping. We can modify the width and the height of our text component to make sure the text displays the way we want it to. We can change the color and we can change alignment as you already seen me do, there's lots of stuff that we can do to change our text, but I like this the way it is for now, so we'll keep moving on. I do know that I'm going to need my HUD to be tagged, so I'm going to tag that now, it's obviously not one of the default tags nor one of the custom tags that I already added to this game. I'll add one more tag and I'll call it HUD, and I'll save and as you know, that doesn't tag it, I still need to come back and tag it with HUD. The other thing I need to do is take my HUD script and attach it to my HUD canvas. Let's go take a look at that HUD script now, then we'll populate the serialized field that you can see in the Inspector and then we'll look at the rest of the code that actually uses the HUD script. Here in my HUD script, this is the serialized field that we're going to populate and I've called the field score text and here's the datatype for the score text. It's TextMeshProUGUI, so Text Mesh Pro Unity Graphical User Interface. I will say in the legacy text system, text used to be called text, but using TextMesh Pro, we have this other data type that we use for the text that we're going to display on a canvas. This class is found in the TMPro or TextMesh Pro namespace. We need to include a using directive for TextMesh Pro. I should have pointed out earlier, but I forgot because I already have TextMesh Pro installed in this project. TextMesh Pro comes in a separate package. If you try to add a TextMesh Pro user interface element to your game and you don't have that package installed yet, you'll get a pop-up that looks like this pop up right here and you should just say that you want to import the TMP essentials. That will install the package for you so you can actually use the TextMesh Pro user interface element. Back to the code. We have our text element here, and we've added the using directive. We need to include that TextMesh Pro datatype in our code. I also have an integer for the score, and I want an integer for the score so that we can do map. We can add to the score when we should. I also have a constant. That's a string. That's my score prefix. When I display the score, I will display score colon space, and then I'll display the score. Let's see how we do that. Here in the start method. Here's my reference to my TextMeshProUGUI object and I can access the text property of that object. If I access the set accessor for that property, then I can pass in a string. I can pass in my score prefix and then I can concatenate with score. But to make it concatenate with an integer, I need to call the two string method on that integer variable and that makes this a string. So I can use plus to concatenate those two strings together and set the text property to that string. I will say that the TextMesh Pro documentation is not integrated with the unity scripting reference. If you want to find out about the TextMesh Pro classes, you should google Unity TextMesh Pro documentation and follow the most promising hit which will bring you to the TextMesh Pro documentation. Or you can just do something like this and scroll through all the possibilities looking for something that might work for you. That's probably worse than actually reading the documentation because we've learned how important reading documentation is. But this is another option for you. Speaking of other options, there is a SetText method right here that also lets us set the text. We can do some more complicated setting of the text by calling this method. But we're just going to access the property as you saw above. The only other thing we have in our HUD script is we have a public method that doesn't return anything. The method name is add points, and whoever is calling this method passes in the number of points to add to the score and we do two things here. We add those points to the score, the integer field that we have in this script, and we set the text so that it includes the new score. This updates the text display to display the new score. Who will actually call this add points method? The most reasonable object to call this method is the TeddyBear. Because the TeddyBear will call that method when it gets destroyed so that we can add points to the game. I'm going to add a field to the TeddyBear class and all we really need as a field is a constant that says, how much is a bear worth? And we'll make bears worth 10. When a TeddyBear collides with the fish, as you know, we take damage and here's where we should update the score in the HUD if in fact the TeddyBear just died. The first thing we need is to get access to the HUD script so we can call the add points method and this is why I added a tag to the HUD. I want a reference to the HUD. The way we'll get that reference is we'll call GameObject. FindGameObjectWithTag. The tag we want to provide is HUD because that's how I tagged the HUD and then I need to get the script component. The HUD script component that's actually attached to the HUD. There's a lot going on here. We find the HUD game object, which is that Canvas, which is a game object and then we get the HUD script that's attached to that HUD Canvas, and we put it into this variable. Now we can call the HUD AddPoints method, not with health, but with BearPoints. Since I now have two blocks of code here in this if statement, I'll say destroy TeddyBear here as a comment. This builds just fine. We'll come back to our game and run it and immediately fail because we have this null reference exception. If I double-click it, we see that that's happening right here. It's happening right here on this scoreText object because, even though I claimed that I would populate this field when we came back, I lied about that. Let's actually populate the field like so and we'll try running our game again. This time we don't crash. Now I can shoot a teddy bear. As you can see, my score went up. That's how we can add text output to our Unity games. To recap, in this lecture, we learned that we need to use a Canvas to add our UI or user interface component to our 2D Unity game. We also learned how to add and use a TextMesh Pro text component to convey information to the player.
