Creating Items with Animation Effects
Try reloading this page, or reviewing your browser settings
This video shows how to update text objects to display variable values with events.
- Construct 2
- User Interface
- Text Objects
About this video
- Lee Stemkoski
- First online
- 15 February 2019
- Online ISBN
- Copyright information
- © Lee Stemkoski 2019
Lee Stemkoski: Finally, we need to keep the text which is displayed in sync with the variables we created in the Event sheet. In order to do that, we need to create some events. So go ahead and click on the tab to bring you to the Event sheet and we’re going to add a few new events.
So the first event, let’s add an event. We always want the displays to be in sync with the values of the variables. So that condition we will use for this event, it’s actually a system condition. I hadn’t click on that gear icon system. Go to Next. There’s a condition called Every tick. It means at every possible instant. In Construct, and in a lot of games, they run at 60 frames per second, which means this is basically happening 60 times every second. Click on Done. So our condition says Every tick. Now we’re going to add some actions to update the text on each one of these texts objects. Let’s go ahead and click on the words add action next to this condition you just created. We’ll start with DisplayCoins, select that. And Next, in this list of actions, we’ll scroll down. Near the bottom, there’s an action called Set text. Click on Next.
All right. For the text, it’s very important to type this exactly. I’ll start off with a quotation marks. I’ll type the word Coins followed by a colon and then a space, and then another set of quotation marks. You’ll notice the text becomes read. Any text contained within quotation marks is literal text. I literally want the word Coins to appear in that text object. However, I also want to combine that with the values stored in the variable Coins. So to combine this literal text with something else, I need to enter an ampersand character. On my keyboard, that’s Shift and 7. Then I’m going to type the word Coins. You’ll notice an auto complete menu comes up too. So what this is going to do is every instant of the game, it will set the text of that text object to read literally the word Coins. The word Coins combined with the value that is stored in the variable Coins. Notice that coins here is not contained within quotation marks. That means it will substitute the value which is being stored there. When you’re finished, click on Done.
And as you may guess, we need to do these two more times. We need to do this for each text display. So let’s add another action in this case for the DisplayHealth text object. Once again, scroll down and choose the action Set text. Again, starting with quotation marks, display the word “Health: “. The space is actually important. It’s nice to add a little bit of visual space in there, ampersand and then without quotation marks, Health. That’ll put the value of the Health variable in there. Then click on Done.
One more time. We’ll add an action. This time, for DisplayTimeLeft. Click on NextM and the list of actions choose Set text. “Time: “ & TimeLeft. You might notice that there’s actually a variable called Time, which already exists. This is why I’m using the variable name TimeLeft instead of the simpler time. The reason I’m not using the prebuilt variable Time is that’s the time since the program has begun running and it’s also stored in a decimal format. TimeLeft is going to be a whole number, which is more convenient for what we need to do. All right, click on Done. We’re finished with the actions.
Next, I also want to update the TimeLeft. Later on, we’ll have interactive coins and enemies and hearts, which will change the value of Coins and Health, but we can set up an event now which will decrease the value of TimeLeft by one every second. So we’re going to add a new event. Just click on the words Add event and this will be another system event, another system condition. So choose System and click on Next. Scroll down towards the bottom of the conditions. Underneath the Time category, there’s a condition called Every x seconds. Select that and choose Next. So every one second, we want to subtract one from TimeLeft, so the interval of one second. That sounds good. Click on Done.
And now, we’ll add another action. We’re going to change the value of a variable and the variables are all stored under the System object. So click on System and choose Next. Underneath the Global and local variables category, let’s choose the action Subtract from. Then we need to choose our variable. I will change this from Coins to TimeLeft. We want to subtract the value 1. Click on Done. So what this says is every one second that passes, we’ll subtract one from the time remaining.
This is a good point to save and test our project. So let’s press the save button and play. The web browser loads. We see our game. Sure enough, there’s our Koala, and up at the top. we see the number of coins, the health and the time and the time is in fact ticking down. Also notice that because we added the text objects to the User Interface layer, they stay fixed on the screen no matter how the Main layer and the other layers are scrolling.
Finally, we’re actually ready to add one of our loose conditions. Let’s close this browser. When the time goes down to zero, we should display the game over message. So let’s add that event. So let’s click on the words Add event. We want to check if TimeLeft has gone down to zero. So let’s add a System event, system condition. Under Global and local variables, let’s compare a variable and let’s check—not Coins. Let’s switch that to TimeLeft. Let’s check if TimeLeft is equal to 0. Let’s also check to see if the Koala is still on the screen. This is for a technical reason, which I’ll explain in a little while. Right click on that condition. And on the menu that pops up, we’ll choose Add another condition. This is a Koala condition and we’ll scroll down. And under the category Size & Position, choose Is o-screen, right? So if the Koala is still there but there’s no time left, let’s add a few actions.
So the first action is we’re ready to display our game over message. So first, this is a message action. So select Message and choose Next. And then underneath the Appearance category, let’s choose Set visible. So lets us change the visibility. From this dropdown list, the visibility should now be visible. So we should now see this message. We also have to change it, so it displays the correct message. So we’re going to set the animation as well. Choose Add action for this event and next, Message. Underneath the Animations category, let’s choose Set animation. In quotation marks, we name that animation Lose. You’ve lost the game at this point.
Now finally, we need to add one more action. Really, this event should only happen one time. So what we’ll also do is we’ll destroy the Koala at this point. If you’ve lost the game, there should be no more Koala that can move around the screen. So let’s add a third action, Koala, Next and scroll down. In the Miscellaneous category, let’s pick Destroy. This causes the Koala to disappear from the screen. And it also has the advantage that once the Koala is destroyed, the Koala is no longer on this screen, so this event will not keep happening. And because of the way the conditions and actions are set up, this event will happen exactly once.
All right. To test this out, I don’t really want to sit here and wait for the time to tick down through 60 seconds. So for a quick test, we’re going to change the starting value of TimeLeft. So I can go ahead and right click this variable and edit it and I’m gonna change the initial time left from 60 seconds to five seconds and save the game and test it again. As the game starts up, we’re going to watch the time count down. Once it gets to zero, 2, 1, 0, great. The Koala disappears. Oh, but we noticed the time is still ticking down into negative values. Let’s fix that as well.
So let’s close this. Let’s see. We only want to subtract one from TimeLeft only while the Koala is still on the screen. If there’s no more Koala, there’s no reason to keep subtracting one from the TimeLeft. So let’s add a second condition to this event as well. Let’s right click, add another condition, Koala, Next, we’ll scroll down. As long as the Koalas on the screen, we’ll still subtract one from the TimeLeft. Let’s save our progress and test this one final time. All right. Watching the countdown. The time is 3, 2, 1. The game is over, the Koala has disappeared, and the time stops ticking down. Excellent.
We’ve created a nice start for the User Interface, and in the next video, it’ll be time to add some additional objects, which changed the value of Health and Coins.