Fixed Text with Sprites

Lee Stemkoski: In this video, we’ll shift our focus to the User Interface. We’d like to display some text to communicate information directly to the player. And there are two ways we’ll see how to do that. First, for text messages which don’t change, we use images and sprite objects. These are good for level complete or game over style messages. For User Interface text which changes, we’ll be using a new kind of object called text objects. These will be useful for displaying things such as the number of coins which have collected or the amount of time remaining. We’ll also introduce variables which are ways to keep track of changing values throughout the game, and finally, we’ll need to create some events to update the User Interface to keep the text displays in sync with the variables.

To begin, let’s open up our project from last time. We’ve created our main character, the Koala, and now we’d like to create the User Interface or at least part of it. So first, in the Layers panel in the top right, make sure that User Interface is selected. That means everything we add will be added to the User Interface. And you might recall that when we configure this, we set the parallax to 0, 0. That means whatever is placed in the User Interface will stay fixed in that position. Next, let’s go to the layout and lets right click in Insert a New Object.

First, we’re going to add some image-based messages, so we’ll insert a new sprite. We’ll select Sprite, and for the name of this sprite, we’ll simply call it Message. Click on Insert. Again, the cursor turns into a cross hairs with a label User Interface. Click. And now, we’ll click on the folder icon. Let’s go to our Jumping Jack Assets folder and in the User Interface subfolder, I’d like to choose the image called message-complete.png. We’re also going to have multiple different messages, so I’d like to go over to Animations, that small window on the right, like to right click on this animation name and rename it to Win. Level complete. This will be the message which displays once you’ve won the level.

Let’s add a second animation. So again, in the Animations window, right click and select Add animation. We’ll call this one Lose, then select that animation you just created. So it’s highlighted, you’ll see there’s no image added yet. Let’s click on that folder icon and this time, choose the message-gameover image file so that message will display when the game is over. Once both of these are loaded, you can click on the x to close the image editor windows. I’d like to center this on the screen. And remember the boundaries of the window or from the left edge of the layout to this dotted line right here. So anything you place on the User Interface should be within this region. So it kind of center it, not exactly at the top.

Finally, this message should not be visible when the game starts. So in the Properties panel, go down towards the bottom of the list. One of the entry says Initial visibility, I’d like to click on where it says Visible and from the dropdown list, switch that to Invisible. So even though you can see it right now, if you were to save and start the game, you’ll notice that once the game loads, the message is in fact invisible. And later on, we’ll make the image visible when they win or lose condition is met. Close the preview window. All right. We’ll activate this. We’ll make it visible with some events later. But next, we’d like to talk about dynamic text using text objects and variables.