Platform-Style Video Games with Construct

Reaching the Goal Flag and Winning

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 display a “win” message when the character touches an object that signifies the end of the level.

Keywords

  • Construct 2
  • Sprites
  • Level Design

About this video

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

Video Transcript

Lee Stemkoski: We’re ready to add a win condition next. So we mentioned previously there’s going to be a flag the Koala is trying to reach which signifies the end of the level. So first, we need to add that object to the game.

In the main layout area, let’s right click and choose Insert new object, select Sprite and the Name when inserted, let’s call this Flag because it’s a flag. Click the Insert button. Maybe we’ll place it over here. Now this is a sprite strip animation, so we’re going to use the Animation frames to load it in. Let’s go ahead and right click in this lower window. Hover over Import frames and choose From sprite strip. We’re going to choose flag.png. Notice it’s a two-frame animation. It’s supposed to look like a flag rippling in the breeze. Again, Construct the guesses that we have two horizontal cells, two images going across, only a single row. That’s correct. We’ll check the box to replace the existing animation and click the OK button. Yes, we’re sure we want to replace.

All right. I’m also going to change Loop to Yes, because we want the flag to continuously ripple in the wind. So clicking on the name of the animation, change Loop from No to Yes. When we’re done, let’s x that, closed. We’ll put the flag over here on the ground. And now we just need an event to trigger when the Koala reaches that flag.

So let’s go to the Event sheet. We’ll add a new event. This event will be when the Koala collides with a flag. So Koala is our condition in this new event. Collisions, On collision with another object. Click to choose the object. That object will be a Flag. When the Koala collides with the flag, well, we want to make the message visible, have it displayed the you win message. That congratulations, level complete and we will destroy the Koala. Remove that from the game. So we’ll add an action.

First action will be a Message action. As before, under Appearance, we’ll choose Set visible and change the visibility to visible. The next action is again, a Message action, and once again, we’ll choose Animations, Set animation. Where it asks for the name of an animation, this time, we will enter Win that displays the level complete message. That’s what we named that animation. We’ll click on Done. Finally, the game is over, so we can add another action to destroy the Koala. Action is a Koala action, under the Miscellaneous category, we’ll choose Destroy.

All right, we’re ready to test this out. Let’s save and run the layout. Preview browser loads. All right, let’s walk over. As soon as we touch the flag, Koala disappears. The level is complete. We have reached our goal. That will be our win condition for this game.