In this video Jesse Freeman teaches you how to create a new message window that allows you to display text at the bottom of the game. You’ll learn how to use Unity 5’s new UI to make an expanding panel that grows and shrinks based on the size of the text inside of it. The message window will allow you to display in game stats messages to the player as they move around the map and perform actions in combat.
- [Voiceover] Now we're ready to create a message window. Message windows are important in RPGs 'cause they allow you to display status to the player if the player is about to enter combat or what the status of combat is after each attack turn. To do this, let's go back to the Canvas game object in Hierarchy panel. We'll right click on the Canvas and create an empty game object. Let's call this empty game object Message Window. Let's go to the anchors, and while holding down Option on a Mac or Alt on Windows, let's go ahead and set it to stretch to the bottom part of our screen.
So right now it's hard to see what's going on, so let's add an image component. And on this image component, we're going to change the source image to our window border. Now in our game view, you should be able to see our window is stretched out correctly along the bottom part of the screen. To refocus it in the scene view, simply double click on it in the Hierarchy panel. Now let's go ahead and change the pivot Y to zero so that it's bottom lined.
And we're going to change the left position to ten, the position Y to two, the right to ten, and we'll make the height 28. Next we're going to want to add a vertical layout group to it. Now that we have the vertical layout group, let's add a new game object for our text. Inside of our AdvancedUI folder is a folder of prefabs. Here is a collection of standard UI elements we can use throughout our game.
Let's go ahead and drag the Body prefab onto our message window. As you can see, it is now laid out inside of our new message window. Let's go ahead and rename this to Text. We'll also want to align it correctly inside of our message window. So select the message window, scroll down to the vertical layout, open up Padding and for left, let's set it to eight. For right, we'll set it to eight. And for top, we'll set it to five, and for bottom we'll set it to five as well.
Now, let's go back to the Text game object inside of our message window. If we copy the default body text and paste it below, you'll see that it doesn't show up. If we scroll down, we can change the vertical overflow from truncated to overflow. And now you'll see the text is showing up but it's going outside pf the area of the window. We can fix this by going back to the message window and adding a content sized fitter.
Let's change the vertical fit to preferred size. As you can see, the message window now expands up as we add more text to it. You can continue to test this out by pasting more body text into the text area. When you're done testing, delete everything and type Message goes here. And there's one more thing we want to do. We want to nest this new message window inside of our game window. So drag this into the game window, and when we run our game, the message window will show up whenever our game window is active.
At this point, we now have a message window that we can use to display text to the player and that also expands based on the amount of text we add.
- Preparing the user interface
- Creating game and message windows
- Building a battle window
- Adding a monster and action buttons
- Creating an actor class
- Adding player and monster attack actions
- Triggering battles from the map
- Ending a battle
- Cleaning up the battle and attack systems
- Rewarding the player