First, we will prepare our game assets. Game assets are the sprites, music, sound effects, and so on that we use in our game. Basically, we can use any assets we want, but in this book, we will use a free bundle available from Scirra's website (http://www.scirra.com/freebundle.zip); this is free to use as long as it is used with Construct 2. Download it and put it where you're most likely to find it.

Start up Construct 2 and create a new empty project like I showed you in Chapter 1, Downloading and Understanding Construct 2. The first thing I do when I create a new project is to set up layers that I will use in the game. This is important because if your game creates new objects on a layer, you need to create that layer first before making the events to create the objects. We will create five layers in total; these layers are as follows:

The layers will look like the ones shown in the following screenshot:

Now that we have more than one layer, I need to tell you about the active layer. An active layer is the layer that's selected last on the layer bar; if you add a new object to the layout, it would be added to the active layer before you move it to other layer. It is also the layer with the properties shown on the Properties bar.

Remember that if you add a new object, for example, a sprite, to an active layer that is locked, this object will automatically be locked as soon as it is added. You won't be able to move or resize it unless you move it to an unlocked layer. You can see which layer is the active layer in the bottom-right corner of the Construct 2 window.

Change the active layer to main by clicking on the Main layer in the layer bar, and then, insert a new Sprite object. Change the name of the object to something you want. Although it can be changed later on, it is a good practice to change it first before adding the game object so that you don't have two objects with similar names. Here, we'll name it bluePlane.

After adding a Sprite object, you will be presented with an edit image pop up. Basically, its function is to add an image to a sprite, but it is a bit complicated to understand, so I didn't explain it in detail in Chapter 1, Downloading and Understanding Construct 2. I'll explain it in more detail now.

There are four pop-up windows here:

The following screenshot is of the edit image window; you can perform basic image editing here, such as drawing, deleting, and coloring, or you can just load an image from a file. You can also set the image points and collision polygon for this sprite here (I'll explain these two in a while).

The next screenshot is of the animations window; all sprites are inserted into an animation even if it is only one frame. You can add new animations by right-clicking on this window.

The animation frames window given next shows the sprites for each frame for the selected animation. This is the place to add more sprites if your animation has more than one frame. You can add frames individually or from a sprite sheet.

The last pop-up window is the color palette / image points window. These two windows show up based on the tools you clicked on the left-hand side of the edit image window. If you clicked on an eraser tool, these windows wouldn't show up. The color palette window is easy to understand; it lets you select a color to draw or fill a section with. What needs more explanation is the image points window, but before that, let's add an image. We'll add a blue plane sprite from the free bundle package; it is located inside the Tappy Plane folder.

Click on the icon shown in the previous screenshot to select an image from a file. Navigate to where you put your free bundle folder and select planeBlue1.png from Tappy PlanePlanes. Now I'll explain the image points and collision polygon.

Using image points

So, what are image points? Image points are positions in a sprite that can be accessed from the code. There are two kinds of image points: origin and image points. Origin is the central point of the sprite; it is where your sprite will be placed when you put it in the game, which is usually the middle point of the sprite. While image points are positions in the sprite that can be used and manipulated from code, these are usually used when you want to create something at a certain position from the sprite; for example, you might have a spaceship sprite that can shoot out lasers.

To add/change image points, click on the image points tool on the left-hand side of the edit image window:

Clicking on this will show you the image points window. This is where you can add or delete image points or change the position of the existing image points.

Note

There are two things to remember:

• Each image frame must have one origin; you can't add or delete an origin.
• The image points for each frame are separated, which means that if you've added an image point in frame 1 of an animation, it's not automatically added to frame 2, frame 3, and so on. However, you can right-click on the image point and copy it to all the frames in the animation.

Setting the collision polygon

There's one last thing I want to cover before finishing this part on adding a Sprite object; the collision polygon. A collision polygon is a collection of points in a sprite that make up a collision area / hit area in a sprite. If another object overlaps this collision area, then it is specified as a collision, or, in other words, when something touches this, it hits the object. These collision polygons are created automatically when you load an image from a file.

The red squares are the collision polygons, and the blue area in the middle is the collision area. You can move each polygon to make a custom collision area; perhaps you want to make a collision area that is smaller than the sprite.

Note

Remember that just like image points, collision polygons for each frame in an animation are separated from each other. So, if you edit the polygons in a frame, make similar polygons for the other frames too. As with image points, you can right-click on one of the red squares in the collision polygon and copy it to the entire animation.

That's all about adding a Sprite object to a layout. It needs a thorough explanation because a sprite is a complex object; other objects aren't as complicated as this one, and generally, when you want to add them, you just need to click on the Add button. Now, just click on the X button of the edit image window to close the window and add your object to the layout.

Then, change the active layer to Obstacles, because we're going to add the ground and rocks as obstacles. The ground is also considered an obstacle, because if the player collides with it, they will lose the game.

Follow the steps that we used to add a sprite to add a new Sprite object with the groundDirt image from the free bundle pack to our layout. After that, add a background to the background layer; you will have a layout that looks like the one shown in the following screenshot:

As you can see, there's a small gap on the right-hand side between the sprites and the dotted line; this gap is the border of the game window. To make the sprites and the dotted line fit the game border, we can create a copy of the sprites to be put right beside the existing sprites. A copy of the existing objects is called an instance. Actually, even the original copy is called an instance of an object, so the original object is the first instance of an object, the second object (or the first copy) is called the second instance, and so on.

Tip

To make a copy of an object, hold Ctrl and then left-click and drag the object; you will automatically create another instance of that object.

After you make a copy, put it beside the first instance to fill the small gap in the game window. You'll see that most of the second instance of the ground is outside of the game window. Leave it be right now, but later we'll make it scroll to the left to make the illusion of the plane going right.

Tip

To zoom in / out on the layout, hold the Ctrl key and then scroll using the mouse wheel.

Your layout should look like this:

Now that we have our plane in place and some ground under it, we can experiment with making it fall. A simple way to do this is using behaviors.

Not all objects can use behaviors. For example, an array object can't use behaviors, but common objects, such as the Sprite object, can. Behaviors can be used to add attributes to an object to make it fade and be draggable or to add movement functions to an object. To add behaviors to an object, first click on that object and then click on the Behaviors element in the Properties bar to add/edit behaviors:

Clicking on Behaviors will open the behaviors dialog where you can see the current behavior for the object and also add behaviors for the selected object. Clicking on the plus sign adds a new behavior, clicking on the pencil icon renames a selected behavior, and clicking on the trash bin icon deletes a selected icon.

Clicking on the plus sign will open another window; this one is the list of all the behaviors you can choose to add. There are a lot of behaviors to choose from, so this might confuse you. For now, just scroll down and find the 8 Direction behavior; select it and click on the Add button to add it.

Since we don't want our plane to be moved with arrow keys, we need to disable it. Select the blue plane and change the property to no. This is because, by default, the 8 Direction behavior uses arrow keys to move, and this is what we disabled in this step.

Now, we will make the plane automatically fall down and collide with the ground. Then, we will move to the event sheet and add the code as well. Click on Add event and select the System object. Double-click on the Every tick event. After you create the event, we'll add the action by clicking on the Add action link. Select the bluePlane icon and then double-click on 8 Directions' Simulate control action. A dialog box will appear where you'll select which direction to simulate. Select Down and click on the Done button; you'll get the following event:

This will make the plane go down with every tick, which is all the time. If we test it now, the plane will go down and keeps going down until it passes below the lower game screen. This is something we don't want, and we need to add some lines of code to stop it; to stop a movement, we need to disable the behavior as follows:

This event will disable the 8 Direction behavior of bluePlane when it collides with the ground. To test the layout (technically called "run the layout"), you can press F5 or click on the run layout icon:

Now, our plane has fallen down and has collided with the ground like we wanted. Next, we want to make it flap up when tapped. Translating it to code, the flap is moving up for a short amount of time before automatically falling down again. To do this, we need to add one more behavior: a timer behavior.

A timer is used to count how many seconds have passed since it's started and the object with this behavior will execute some actions after that many seconds have passed. This action can be performed just once or repeated over and over again. To add a timer, just follow the steps you performed when adding the 8 Direction behavior.

Now, we can start to make the plane flap up but before that we need to add one more thing as a condition to the event to make our plane go up. Earlier, we made our plane go down at every tick, but how do we make the plane go up? The answer is an instance variable.

Using instance variables

Instance variables are just like other variables, but they are associated with each instance of an object. If you add an instance variable to an object, this instance variable is also copied over to the new instance of the object, but changing a value of an instance variable doesn't change the value of the instance variable in other instances of the same object. For example, if you're making a shooting game, you can add an instance variable called Health to all the enemy ships, but the value of each enemy ship's health will vary based on which one has been shot by the player.

To create a new instance variable, first select an object to which we want to add a new instance variable, in this case, bluePlane. Then, select the blue instance variables on the Properties bar; this will open up a new dialog window similar to the behavior's dialog with similar functionalities to add/edit instance variables. Clicking on the plus sign will open a new instance variable dialog where we can add a new instance variable. Enter flapping in the Name field, select Boolean as Type, and keep the value as false. The dialog will look as follows:

You can add a description of the instance variable if you'd like; after that, clicking on the OK button will add this instance variable to the selected object. Next, close the instance variable's dialog window and add a new game object, which is a Touch object. This is an object that's available to the entire project. If the object is successfully added, you will see a notification at the top of Construct 2 saying the object will be available to the entire project.

Now, go over to the event sheet and add some new lines of code; this code will set the flapping variable to true when the player taps and starts the timer that indicates how long the plane will flap. First, add a new event, select the Touch icon, and select the On any touch start trigger to detect the user's touch. Then, add a new action for this event. Select the bluePlane icon and scroll down until you see the Start timer action; double-click on it.

You'll see a dialog box with three properties to set this action: Duration, Type, and Tag. Duration sets how many seconds to pass before this timer fires, Tag specifies the tag for this action that we can use to reference it later, while Type sets whether the timer is called repeatedly or just once. While the regular type means the timer will be repeated for every duration, select Once this time:

I used the AND word there to indicate that there is more than one action in an event. One thing to note is that we don't want the earlier action to be run only when there's a tap; we also want it to run when the flapping instance variable is set to false. So, we need to add a new condition to this event. To do this, select the event and press the C key on the keyboard or right-click on an event and select Add Condition. This will open a dialog window similar to the one that appears when you add a new event.

From there, select bluePlane and check whether a Boolean instance variable is set. So, the event will look like this:

This event is close but not exactly what we want, because we want to check if the flapping variable is set to false; in the previous screenshot the event is checking if the instance variable is true. To do what we want to, we need to invert that condition. Inverting means making a condition in an event to have the opposite value of what's written.

To invert a condition, we need to right-click on it and select Invert:

After clicking on Invert, an X symbol is placed on the inverted condition. From now on, I will write X in the code explanation when I want to say that the code is inverted. So, the latest code that we will add to our event sheet is as follows:

Start Timer "flap" just means that we assigned an ID of flap to a timer we started. We can use this ID to refer to a timer later on. All started timers will fire after a set number of seconds have passed; in this case, we set it to 0.5 seconds. The (once) part in the code means that this timer will only fire once instead of repeatedly.

Before we move on to the next part, we need to change one thing: the first event where the plane goes down. Initially, we made it go down at every tick. Now, we want it to go down only when it's not flapping so that we can make it go up. If the plane goes down at every tick, then we can't make it go up. So, change the code as follows:

Now, we will do two things: define what happens when the flapping instance variable is true and what happens after the flap timer fires. We created the instance variable as an event that will be used when the plane goes up. To make it go up, we just need to simulate another direction again as follows:

Now, the plane will go up after the player has tapped on it, because earlier, we set the flapping instance variable to true after a touch. Next, we will code what happens after the flap timer fires. What we want is for the plane to stop flapping and falling down again. To do this, we will simply set the flapping variable to false:

This will make the plane fall down after half a second after going up. If you test it now, you can see the plane falling down if there's no touch, and you can see it go up if the player touches the screen (in testing, a touch can be simulated by a mouse click).

For now, the flapping action is looking pretty good, but the sprite is not acting like we want it to. It looks down when falling and looks up when flapping. We want it to look to the right at almost all times. To do this, we need to disable the rotation. To disable the rotation for the 8 Direction behavior, we will set the Set angle property to No in the Properties bar:

If you test it once more, the plane will look to the right of the screen at all times, making it look as if it is flapping correctly. After this, we will create rocks as obstacles, but first I want to discuss the main topic of this chapter: random generation.