Fixed Text with Sprites
Try reloading this page, or reviewing your browser settings
This video shows how to create events, which represent customized instructions or code for a video game.
- Construct 2
About this video
- Lee Stemkoski
- First online
- 15 February 2019
- Online ISBN
- Copyright information
- © Lee Stemkoski 2019
Lee Stemkoski: And now it’s time to add some events. At the top of the central panel, the Main panel, click on the tab which says Events sheet 1.
To start adding events, we can right click. And from the pop-up menu that appears, select Add event. Each event has two parts: condition, and an action. So first we choose the object which contains the condition we’re interested in checking. So maybe we’ll start with the remapped key controls. So first, I’ll select the Keyboard object and press Next. I’m going to check to see if a certain key is being held down. To know, choose Next. And another window appears asking us to press this button to choose the key we’re interested in pressing. So I’m going to press the left arrow key. You’ll notice when I do so, this box which says press a key now says left arrow. That’s great. And I’ll click on Okay, then click on the Done button.
And now, we have the beginnings of our first event. My recorded events are like if then statements. So if the keyboard left arrow key is down, then we’ll add an action. We want to do something when that happens. So click on the words to say Add action, and we can choose which objects does what. In this case, we want the Koala to do a few things, so I’ll click on Koala. Click on the button Next. And we have a list of all the different things the Koala can do. I want to scroll down in this list. Under Platform, I want to choose Simulate control, kind of way of overriding controls. That says control left. Yes, when I press the left arrow key, I want the Koala to be controlled and move to the left. I’ll click on Done. All right. I also want to add a second action. I want the Koala to face the opposite direction when it moves to the left. So again, I’ll click on the words Add action. I’ll select to the Koala from this list, and then under Appearance, I’ll choose Set mirrored, and then the state will be mirrored. I want it to face to the left. Excellent.
Let’s add another event. We can click on the words Add event here to do so. Then I’ll click on the Keyboard. I’ll choose the option key is down, so as long as the Key is down, something will happen. Click that button Click to choose. This time, I’ll press the right arrow key, then click on Okay and Done. And again, we’ll add two actions for the Koala to simulate movement to the right and to unmirror for the Koala image. So Add action, Koala, Next. And again, scroll down under Platform, I’ll look at Simulate control. In Control, we’ll move the Koala to the right this time. Add a second action. Koala, Next and under Appearance, choose Set mirrored. But this time, we want to revert to its original state facing to the right, so we’ll change the state to not mirrored. Excellent.
One more event. We’ll add an event again, clicking on those words, select the Keyboard, and this time, I’m not going to choose key is down. We’ll choose On key pressed. The difference is that Key is down continues to activate as long as you’re holding down. The Key is pressed is for actions which occur once when you hold down a key such as jumping, so Key is pressed. We’ll choose Next. Again, Click to choose. In this case, maybe I’ll choose J for jump. I’ll press Okay, and we’ll add an action. This will be again, a Koala action, and underneath Platform, choose Simulate control. This time, we’ll choose Jump. Excellent. So now you can press left and right arrow keys and J for jump rather than up. Also, the Koala should face the direction it’s moving in. Let’s go ahead and save the project.
Every time we add some events, it’s always good to test them out right away. We’ll press the play button. Again, the web browser opens to preview the game. Pressing right and left, now the Koala faces the direction they’re moving in. And if I pushed J, the Koala jumps. Excellent. Let’s go ahead and close the web browser.
The final thing we’d like to do is add some more events which activate the correct animations depending on what the Koala is doing. So again, let’s click on the words Add event. These will be some Koala conditions. Now we want to check what the Koala is doing and if the Koala is doing certain things, then we’ll activate or play particular animations. So choose the Koala and Next. All right, if we scroll down, these are conditions. So you might notice this look than the Koala actions.
First, I want to check if the Koala is walking. That happens when the Koala’s on the floor and moving. So first, underneath the Platform category, let’s select Is on floor. Now I want to add a second condition. You might notice there’s no words that say Add condition here like there were for action. So instead you need to right click the condition to bring a pop-up menu. And from that menu, choose Add another condition. Again, a Koala condition. We’ll scroll down under the Platform category, Is moving. So if the Koala is on the floor and moving, that means the Koala’s walking, and we should play that animation. So now we’ll click on the words Add action for this event. Choose a Koala action. And then this case, under the Animations category, choose Set animation. And then, we need to type the name of the animation in quotation marks, so quotation marks. It even brings up a handy autocomplete menu. Walk. Excellent.
We’ll add two more similar events. Next, we’ll add the event for just standing still. That happens when the Koala is on the floor and is not moving. So Add an event with a condition, a Koala-based condition. Scroll down to Platform. We’ll check if the Koala is on the floor and right click that condition to add a second condition, a Koala condition. Scrolling down, in this case, we’re interested in when the Koala is not moving, and you might notice that there’s a condition that says Is moving but no condition that says Is not moving. So we’ll do something called inverting it condition. Start by select the Is moving condition. And now, if we want to do the opposite of this condition, we’re going to go ahead and right click that condition and in that pop-up menu, you’ll see an option which says Invert with an x next to it. Select that. The way you want to read this condition now is if the Koala is not moving.
Now, we’ll add an action similar to Event number 4. We’ll add a Koala action, and next to Set animation, this case, we’ll choose this Stand animation. So again, it needs to be entered in quotation marks since it’s a name, stand, and click on Done.
And finally, our last event, whenever the Koala jumps, we should play the jump animation. So we’ll add one more event, a Koala event condition. Under the Platform category, we’ll say On jump. Click on Done. So whenever the Koala jumps, now we’ll just straight up add the action clicking on the words Add action, Koala, Next. Under Animations, Set animation. Next. And type in quotation marks, jump. Click on Done.
And there’s our animations. When also go down to the layout. Before I test this one out, I want to slow down the Koala a little bit. So we’re going to change some of the qualities properties here. So select the Koala, click on it, and the layout. So it’s got the blue selection box around it. In the list of properties, you’ll notice that there’s Behaviors category. We’ve added some behaviors, we’ve added a platform behavior. Next to Maximum speed, let’s make that smaller. It’s 330 pixels per second right now. Let’s delete that and type in 200. I think that will be plenty fast for our Koala.
To preview it and it’s always good to save your work. Click on that save icon and click on the play icon to once again, open up a web browser. And we can use the arrow keys and we’ll notice the Koala’s moving around. You can press the J key to jump and when the Koala jumps in the air, we have that jump animation playing. Now it’s a very subtle thing, but you might notice it looks like the Koala bounces or moves up a couple of pixels when it starts moving around. This is due to collision polygons, which is also something we should fix right now.
So closing the preview window and let’s go to our Koala in the layout and let’s right click the Koala and edit the animations. Going to click on the magnifying glass with the plus icon to zoom in, and there’s a bunch of icons down the left side and click on the one that says Set collision polygon. It’s at the very bottom left. So Construct tries to guess the size and shape of your sprites as it loads in the files, and this isn’t a great match for the Koala. Instead I just like it to look more like a box. So I’m going to go ahead and right click the collision polygon, and from that box or from that list of options, choose Set to bounding box. It’s a little bit big, so I’m going to click on these red vertices and tighten it up a little bit. Kind of make a tighter fit for our collision box.
All right. I think that will be accurate enough. I’d rather not do this for every single frame of every animation. So finally, I’d like to right click the collision polygon and choose the option to Apply to all animations. Yes, I’m sure we want to continue. Good. That should stop that bouncing artifact when we move across the ground. So save your work is always. And congratulations on adding a lot of events. That’s probably the most complicated character with the largest sequence of events you’re going to add in this game.