Platform-Style Video Games with Construct

Creating Variables and Text Objects

Your browser needs to be JavaScript capable to view this video

Try reloading this page, or reviewing your browser settings

This video shows how to create variables and dynamic text objects.

Keywords

  • Construct 2
  • User Interface
  • Variables
  • Text Objects

About this video

Author(s)
Lee Stemkoski
First online
15 February 2019
DOI
https://doi.org/10.1007/978-1-4842-4446-3_11
Online ISBN
978-1-4842-4446-3
Publisher
Apress
Copyright information
© Lee Stemkoski 2019

Video Transcript

Lee Stemkoski: At this point, we’re ready to add some variables to keep track of the different things the Koala is going to collect as well as the time remaining to finish the level.

To begin, let’s go over to the Event sheet and let’s right click in the Event sheet. This gray area at the bottom to bring that pop-up menu to the screen and choose the option that says Add global variable. Global variable just keeps track of various quantities for us. This first variable, we’ll keep track of the number of coins we’ve collected, so let’s change the name to Coins. It does store a number. That’s what the type means. The initial value is zero because you start off with no coins. Once you’re done, click on OK, and notice this information appears at the top of the event sheet above all the different events.

Let’s do that again. Let’s right click, choose Add global variable. Next, I want to keep track of the health of the Koala. I’ll change the name to Health. Again, it stores at number. Let’s change the initial value to three. This will indicate that the quality can get hit three times before losing the game. And again, click on the OK button that appears at the top. Finally, let’s right click and add one more global variable. This will be the time left in the game, so I’ll call it TimeLeft. It represents the number of seconds left to complete the level, not change the initial value to 60 for now. Excellent. We have some variables will change these values later.

Next, we need to add some display to show the value of each one of these variables. So let’s go back to the layout. Click on the Layout tab at the top of the Main panel, and let’s right click in that pop-up menu. Choose Insert New Object. Now for the first time, we’re going to insert a Text style object. So click on that once so you have the chance to insert a name. I’ll call this first one, DisplayCoins as it may indicate this will display the number of coins that the player has collected. Click on Insert. See my cross hairs. I’ll place it up here. I’d like to make this text a little bit larger so it’s easier to read. So in the Properties, I’m going to change the text that initially says Text, I’d like to change that to Coins: 0. Also, going to change the font. It says Aerial 12. I’ll click in that box, see a little button appear with three dots. Click on that to get a Font menu. I’d choose Aerial, Bold, a little bit larger, maybe size 28, and click on OK. Now if your text disappears, that simply means you need to make the box a little bit larger, so all of your texts can be seen.

All right. Next, I’d like to add some more text objects. Let’s right click and insert another object, another text object. Click on Text once. This name will be DisplayHealth. Click to put it on the User Interface. Again, I’ll change the properties. I want this to initially say Health: 0. Nope, not zero. Health: 3. I’ll change the font to match the other font. Aerial, Bold, size 28 and again, I need to enlarge my text. Text ever seems to disappear. It’s probably because the text box needs to be made larger. Finally, right click on the layout again, choose Insert new object, Text. I’ll make this DisplayTimeLeft. And the text here, we just call it Time: 60. Can change the font, like to be consistent. Aerial, Bold, 28, seems to be large enough.

Again, I want these to be positioned between the left edge of the layout and this dash line also is a purely cosmetic effect. I also like to align these text objects up. See, I’m trying to line them up. I could enter the positions manually but instead, I’m going to align them by using something called the grid. And I go over to the View tab on the top here and there’s some buttons, some checkboxes, Snap to grid, Show grid. I’d like to click on each one of those and I can use this grid to line things up. If you’d like a finer grid, you can click on View. Next to Grid width, I’m going to change that number 32 to 16 and next to Grid height, I’ll change that number from 32 to 16. And if they don’t both change for some reason, I might need to do that twice. So grid width is 16, grid height is 16. Click on the layout and I’ll get nice fine grids here, so these will be lined up pretty well.

Also, to make these easier to distinguish, I’d like to give them different colors. In fact, we’ll learn how to do a quick drop shadow effect. I’d like to take this Coins object and duplicate it. The easiest way to duplicate an object as while it’s selected, press and hold the control key and then click and try to drag and move another copy of this, AND as you try to click and drag, another copy appears. The second copy, which we’ve just created, I’m going to change its color and it click on this black square and there’s a dropdown menu. She’ll give me a lot of different colors to pick from. Click maybe a yellow color. I’ll reposition it so it’s directly on top of the original text, so the yellow goes on top of the black. Then I’ll press the up arrow key once and the left arrow key once, maybe twice, so that just moves it to pixels up and two pixels to the left. You have a nice drop shadow effect.

It’s not necessary, but it’s a nice touch. I’ll do the same thing here. I’d like to duplicate this object. So while it’s selected, hold down the control key, click and drag, and another copy basically peels off. In the Properties panel, I’m going to select the Color. From the dropdown menu, I’ll select a red color, reposition the text on top, then press up, up, left, left in a nice little drop shadow effect. Finally, I’ll select the Time, hold down the control key, click and drag to peel off another copy. From the Color property, I’ll select maybe a purplish color. Reposition it back on top of the original press up, up, left, left, and the grid is a little bit distracting. So maybe I’ll turn the grid off. I’ll leave it on. So we snap things to the grid. So I’ll leave Snap to grid checked, but I’ll uncheck the box next to Show grid so we can see what it looks like.