Learning Construct 2

Chapter 1. Downloading and Understanding Construct 2

Today's gaming space is a completely different environment from what it used to be. Gaming is no longer just dominated by console and PC games, but has lent its services to other platforms such as casual gaming on smartphones. Today, there are many ways to make games in our modern world, from coding in a native programming language to using authoring tools to make the job easier.

Construct 2 is one of the most popular 2D-authoring tools out there. Its drag-and-drop nature makes it easy to use for people with no programming background. It is so much more than this, however, as it caters to those programmers-to-be with its programming system called an event system, which makes it possible for us to create custom functions. Don't worry though as this event system is easy to understand, and we will talk about it shortly.

Through this introductory chapter, we will cover the following topics:

How to download and install Construct 2
Different versions of Construct 2
Construct 2's objects
The objects' behaviors
The project's properties and structure
Using event sheets

About Construct 2

Construct 2 is an authoring tool that makes the process of game development really easy. It can be used by a variety of people, from complete beginners in game development to experts who want to make a prototype quickly or even use Construct 2 to make games faster than ever. It is created by Scirra Ltd, a company based in London, and right now it can run on the Windows desktop platform, although you can export your games to multiple platforms.

Construct 2 is an HTML5-based game editor with a lot of features, enough for people beginning to work with game development to make their first 2D game. Some of them are:

Multiple platforms to target: You can publish your game to desktop computers (PC, Mac, or Linux), to many mobile platforms (Android, iOS, Blackberry, Windows Phone 8.0, Tizen, and much more), and also on websites via HTML5. Also, if you have a developer's license, you can publish it on Nintendo's Wii U.
No programming language required: Construct 2 doesn't use any programming language that is difficult to understand; instead, it relies on its event system, which makes it really easy for anyone, even without coding experience, to jump in.
Built-in physics: Using Construct 2 means you don't need to worry about complicated physics functions; it's all built in Construct 2 and is easy to use!
Can be extended (extensible): Many plugins have been written by third-party developers to add new functionalities to Construct 2.
Note
Note that writing plugins is outside the scope of this book. If you have a JavaScript background and want to try your hand at writing plugins, you can access the JavaScript SDK and documentation at https://www.scirra.com/manual/15/sdk.
Special effects: There are a lot of built-in effects to make your game prettier!

You can use Construct 2 to virtually create all kinds of 2D games, from platformer, endless run, tower defense, casual, top-down shooting, and many more.

Downloading Construct 2

Construct 2 can be downloaded from Scirra's website (https://www.scirra.com/), which only requires you to click on the download button in order to get started. At the time of writing this book, the latest stable version is r184, and this tutorial is written using this version. Another great thing about Construct 2 is that it is actively developed, and the developer frequently releases beta features to gather feedback and perform bug testing.

There are two different builds of Construct 2: beta build and stable build. Choosing which one to download depends on your preference when using Construct 2. If you'd like to get your hands on the latest features, then you should choose the beta build; just remember that beta builds often have bugs. If you want a bug-proof version, then choose the stable build, but you won't be the first one to use the new features.

The installation process is really straightforward. You're free to skip this section if you like, because all you need to do is open the file and follow the instructions there.

Tip

If you're installing a newer version of Construct 2, it will uninstall the older version automatically for you!

Walking through the installation of Construct 2

To install Construct 2, perform the following steps:

First, you need to open the folder where you downloaded Construct 2 and double-click on the installation file. After this, you will be presented with a pop up, as shown in the following screenshot:
This is just a regular security feature; we know that the file isn't harmful to our computer so we can just click on the Run button. You will then be presented with the setup pop up.
With the appearance of this pop up, the installation wizard has started, so just click on Next to continue. You will then be presented with the license-agreement screen.
The wizard will show you the license agreement; you can choose to read it or not, but you must accept it to continue with the setup.
Here, you can accept the default setting or click on Browse to select your preferred place. When you're done, click on Next and you will be presented with the installation versions.
As you can see, two versions of Construct 2 are available: 32 bit and 64 bit. You can select which version to install depending on your computer, but if you don't know which one to pick, just select autodetect and let the installation wizard take care of it. When you're done, click on the Next button. You'll be asked whether you want to create a desktop icon; check the checkbox if you want to.
After you're done, click on Next. The next screen will ask you to install Construct 2.

After it's done installing, you can find Construct 2 in its installation folder or on the desktop (if you created a desktop icon earlier). After the installation, Construct 2 will ask if you would like to update your graphics driver. If you don't know whether your graphics driver is up to date, it is recommended that you update it as many issues with Construct 2 not working tend to be related to the graphics driver.

Navigating through Construct 2

Now that we have downloaded and installed Construct 2, we can start getting our hands dirty and make games with it! Not so fast though. As Construct 2's interface is different compared to other game-making tools, we need to know how to use it. When you open Construct 2, you will see a start page as follows:

This start page is basically here to make it easier for you to return to your most recent projects, so if you just opened Construct 2, then this will be empty.

What you need to pay attention to is the new project link on the left-hand side; click on it and we'll start making games. Alternatively, you can click on File in the upper-left corner and then click on New.

You'll see a selection of templates to start with, so understandably this can be confusing if you don't know which one to pick. So, for now, just click on New empty project and then click on Open. Starting an empty project is good when you want to prototype your game. What you see in the screenshot now is an empty layout, which is the place where we'll make our games. This also represents how your game will look.

It might be confusing to navigate the first time you see this, but don't worry; I'll explain everything you need to know for now by describing it piece by piece.

The white part in the middle is the layout, because Construct 2 is a what you see is what you get kind of tool. This part represents how your game will look in the end. The layout is like your canvas; it's your workspace; it is where you design your levels, add your enemies, and place your floating coins. It is where you make your game.

The layout size can be bigger than the window size, but it can't be smaller than the window size. This is because the window size represents the actual game window. The dotted line is the border of the window size, so if you put a game object outside it, it won't be initially visible in the game, unless you scroll towards it. In the preceding screenshot, only the red plane is visible to the player. Players don't see the green spaceship because it's outside the game window.

Note

The take-home point here is that the layout size is not the same as the window size!

On the right-hand side, we have the Projects bar and the Objects bar. An Objects bar shows you all the objects that are used in the active layout. Note that an active layout is the one you are focused on right now; this means that, at this very instance, we only have one layout. The Objects bar is empty because we haven't added any objects. The Projects bar helps in the structuring of your project, and it is structured as follows:

All layouts are stored in the Layouts folder.
Event sheets are stored in the Event sheets folder.
All objects that are used in the project are stored in the Object types folder.
All created families are in the Families folder. A family is a feature of Construct 2; I will explain this shortly in this chapter.
The Sounds folder contains sound effects and audio files.
The Music folder contains long background music. The difference between the Sounds folder and the Music folder is that the contents in the Music folder are streamed, while the files inside the Sounds folder are downloaded completely before they are played. This means if you put a long music track in the Sounds folder, it will take a few minutes for it to be played, but in the Music folder, it is immediately streamed. However, it doesn't mean that the music will be played immediately; it might need to buffer before playing.
The Files folder contains other files that don't fit into the folders mentioned earlier. One example here is Icons.

Tip

Although you can't rename or delete these folders, you can add subfolders inside them if you want.

On the left-hand side, we have a Properties bar. There are three kinds of properties: layout properties, project properties, and object properties. The information showed in the Properties bar depends on what you clicked last. There is a lot of information here, so I think it's best to explain it as we go ahead and make our game, but for now you can click on any part of the Properties bar and look at the bottom part of it for help. I'll just explain a bit about some basic things in the project properties:

Name: This is your project's name; it doesn't have to be the same as the saved file's name. So, you can have the saved file as project_wing.capx and the project's name as Shadow wing.
Version: This is your game's version number, if you plan on releasing beta versions; make sure you change this first.
Description: Your game's short description; some application stores require you to fill this out before submitting it.
ID: This is your game's unique identification; this comes in the com.companyname.gamename format, so your ID would be something like com.redstudio.shadowwing.

Creating game objects

To put it simply, everything in Construct 2 is a game object. This can range from the things that are visible on screen, for example, sprites, text, particles, and the sprite font, to the things that are not visible but are still used in the game, such as an array, dictionary, keyboard, mouse, gamepad, and many more.

To create a new game object, you can either double-click anywhere on a layout (not on another object already present), or you can right-click on your mouse and select Insert new object. Doing either one of these will open an Insert New Object dialog, where you can select the object to be inserted.

You can click on the Insert button or double-click on the object icon to insert it. There are two kinds of objects here: the objects that are inserted into the active layout and the objects that are inserted into the entire project. Objects that are visible on the screen are inserted into the active layout, and objects that are not visible on the screen are inserted into the entire project.

If you look closely, each object is separated into a few categories such as Data & Storage, Form controls, General, and so on. I just want to say that you should pay special attention to the objects in the Form controls category. As the technology behind it is HTML5 and a Construct 2 game is basically a game made in JavaScript, objects such as the ones you see on web pages can be inserted into a Construct 2 game. These objects are the objects in the Form controls category.

Tip

A special rule applies to the objects: we can't alter their layer order. This means that these objects are always on top of any other objects in the game. We also can't export them to platforms other than web platforms. So, if you want to make a cross-platform game, you are advised not to use the Form controls objects.

For now, insert a sprite object by following these steps:

After clicking on the Insert button, you will notice that your mouse cursor becomes a crosshair, and there's a floating label with the Layer 0 text. This is just a way for Construct 2 to tell you which layer you're adding to your object.
Click your mouse to finally insert the object. Even if you add your object to a wrong layer, you can always move it later.

When adding any object with a visual representation on screen, such as a sprite or a tiled background, Construct 2 automatically opens up its image-editing window. You can draw an image here or simply load it from a file created using a software. Click on X in the top-right corner of the window to close the window when you have finished drawing. You shouldn't worry here; this won't delete your object or image.

Adding layers

Layers are a great way to manage your objects' visual hierarchy. You can also add some visual effects to your game using layers. By default, your Layers bar is located at the same place as the Projects bar. You'll see two tabs here: Projects and Layers. Click on the Layers tab to open the Layers bar.

From here, you can add new layers and rename, delete, and even reorganize them to your liking. You can do this by clicking on the + icon a few times to add new layers, and after this, you can reorganize them by dragging a layer up or down. Just like with Adobe products, you can also toggle the visibility of all objects in the same layer to make it easier while you're developing games. If you don't want to change or edit all objects in the same layer, which might be on a background layer for instance, you can lock this layer:

There are two ways of referring to a layer: using its name (Layer 0, Layer 1, Layer 2, Layer 3) or its index (0, 1, 2, 3). As you can see from the previous screenshot, the index of a layer changes as you move a layer up or down its layer hierarchy (the layer first created isn't always the one with the index number 0). The layer with index 0 will always be at the bottom, and the one with the highest index will always be at the top, so remember this because it will come in handy when you make your games.

The eye icon determines the visibility of the layer. Alternatively, you can also check the checkbox beside each layer's name. Objects from the invisible layer won't be visible in Construct 2 but will still visible when you play the game. The lock icon, beside the layer's name at the top, toggles between whether a layer is locked or not, so objects from locked layers can't be edited, moved, or selected.

Sorting the z-order

All objects in each layer are placed based on their z-order. A z-order is the order of positioning objects in a layer. Construct 2 draws objects from the bottom to the top of the z-order; as a result, the objects in the bottom layer will always be behind the objects in the top layer. You can send an object either to the bottom or to the top of the z-order by right-clicking on them and selecting where to send them.

Layer properties

Just like layouts or objects, layers have their own properties. These properties do two things: they change how the layers behave, and they give a good-looking special effect to the objects in a layer. You can see it in the Properties bar after clicking on each layer. The members of these properties also have an explanation at the bottom of the Properties bar to make it easier to understand. I will explain the ones that are not really easy to understand:

Force own texture: This forces the layer to render to an immediate texture rather than to the screen; this is useful for special effects. The downside is that it slows down rendering, and for most games, it isn't used anyway. If you're unsure which value to set it to, always set it to no.
Scale rate: This is the rate at which the layer zooms when the layer is scaled. Set this to 0 if you want your objects' size to stay the same regardless of scaling; set it to 100 to make your objects scale perfectly.
Parallax: This is the rate at which the layer scrolls. The X value is the horizontal scrolling speed, and the Y value is the vertical scrolling speed. Keep it at 100 to make the layer's scroll speed the same as the game's scroll speed. Change it to 0 to stop the layer from scrolling; this can be used for HUDs (short for Heads Up Displays). With this in mind, a value between 0 and 100 (ideally, 50) will make it perfect for a parallax-scrolling effect.
Blend mode: This property is like simple effects, as it provides ways to blend the object with the background.
Effects: This applies special effects to a layer; Construct 2 comes with more than 70 stock effects. Effects uses a technology called WebGL, or an OpenGL for web platforms, and because of this, it might not available on all platforms. It is already supported on modern browsers.

What is an event system?

Construct 2 doesn't use a traditional programming language. Instead, it uses a unique style of programming called an event system. However, much like traditional programming languages, it works as follows:

It executes commands from top to bottom
It executes commands at every tick
It has variables (a global and a local variable)
It has a feature called function, which works in the same way as other functions in a traditional programming language, without having to go into the code

An event system is used to control the objects in a layout. It can also be used to control the layout itself. An event system can be found inside the event sheet; you can access it by clicking on the event sheet tab at the top of the layout.

Reading an event system

I hope I haven't scared you all with the explanations of an event system. Please don't worry because it's really easy! There are two components to an event system: an event and an action. Events are things that occur in the game, and actions are the things that happen when there is an event. For a clearer understanding, take a look at the following screenshot where the event is taken from one of my game projects:

The first event, the one with number 12, is a bullet on collision with an enemy, which means when any bullet collides with any enemy, the actions on its right-hand side will be executed. In this case, it will subtract the enemy's health, destroy the bullet object, and create a new object for a damage effect. The next event, number 13, is what happens when an enemy's health drops below zero; the actions will destroy the enemy and add points to the score variable. This is easy, right?

Take a look at how we created the redDamage object; it says on layer "Game". Every time we create a new object through an action, we also need to specify on which layer it is created. As mentioned earlier, we can refer to a layer with its name or with its index number, so either way is fine. However, I usually use a layer's name, just in case I need to rearrange the layer's hierarchy later. If we use the layer's index (for example, index 1) we can rearrange the layer so that index 1 is different; this means that we will end up creating objects in the wrong layer.

Earlier, I said that an event system executes commands from top to bottom. This is true except for one kind of event: a trigger. A trigger is an event that, instead of executing at every tick, waits for something to happen before it is executed. Triggers are events with a green arrow beside them (like the bullet on collision with enemy event shown earlier). As a result of this, unlike the usual events, it doesn't matter where the triggers are placed in the event system.

Writing events

Events are written on event sheets. When you create a new layout, you can choose to add a new event sheet to this new layout. If you choose to add an event sheet, you can rename it to the same name or one that is different from the layout. However, it is advised that you name the event sheets exactly same as the layout to make it clear which event sheet is associated with a layout. We can only link one event sheet to a layout from its properties, so if we want to add more event sheets to a layout, we must include them in that event sheet. We will cover this in Chapter 5, Making a Platformer Game.

To write an event, just perform the following steps:

Click on the event sheet tab above the layout.
You'll see an empty event sheet; to add events, simply click on the Add event link or right-click and select Add event.
Note
Note that from now on, I will refer to the action of adding a new step with words such as add event, add new event, or something similar.

You'll see a new window with objects to create an event from; every time you add an event (or action), Construct 2 always gives you objects you can add an event (or action) from. This prevents you from doing something impossible, for example, trying to modify the value of a local variable outside of its scope. I will explain local variables shortly.

Whether or not you have added an object, there will always be a system object to create an event from. This contains a list of events that you create directly from the game instead of from an object. Double-click on it and you'll see a list of events you can create with a system object. There are a lot of events, and explaining them can take a long time; I will explain them as we go along and create our games in the upcoming chapters. For now, if you're curious, there is an explanation of each event in the upper part of the window.

Next, scroll down and look for an Every x seconds event. Double-click on it, enter 1.0 second, and click on Done. You should have the following event:

To add an action to an event, just perform the following steps:

Click on the Add action link beside an event.
Click on an object you want to create an action from; for now, double-click on the systems object.
Double-click on the Set layer background color action under the Layers & Layout category.
Change the three numbers inside the bracket to 100, 200, and 50.
Click on the Done button.
You should have the following event:

This action will change the background color of layer 0 to the one we set in the parameter, which is green.

Creating a variable

I said that I'm going to explain variables, and you might have noticed a global and local variables category when you added an action. A variable is like a glass or cup, but instead of water, it holds values. These values can be one of three types: Text, Number, or Boolean.

Text: This type holds a value of letters, words, or a sentence. This can include numbers as well, but the numbers will be treated like a part of the word.
Number: This type holds numerical values and can't store any alphabetical value. The numbers are treated like numbers, which means that mathematical operations can be performed on them.
Boolean: This type only holds one of the two values: True or False. This is used to check whether a certain state of an object is true or false.

To create a global variable, just right-click in an event sheet and select Add global variable.

After that, you'll see a new window to add a global variable.

Here's how to fill out each field:

Name: This is the name of the variable; no two variables can have the same name, and this name is case sensitive, which means exampleText is different from ExampleText.
Type: This defines whether the variable is Text, Number, or Boolean. Only instance variables can have a Boolean type; I will explain instance variables in Chapter 3, Creating Diverse Player Experiences with a Flappy Bird Clone.
Initial value: This is the variable's value when first created. A text type's value must be surrounded with a quote (" ").
Description: This is an optional field; just in case the name isn't descriptive enough, additional explanation can be written here.

After clicking on the OK button, you have created your new variable! This variable has a global scope; this means that it can be accessed from anywhere within the project, while a local variable only has a limited scope and can be accessed from a certain place in the event sheet. I will cover local variables in depth later in the book.

You might have noticed that in the previous screenshot, the Static checkbox cannot be checked. This is because only local variables can be marked as static. One difference between global and local variables is that the local variable's value reverts to its initial value the next time the code is executed, while the global variable's value doesn't change until there's a code that changes it. A static local variable retains its value just like a global variable.

All variables' values can be changed from events, both global and local, except the ones that are constant. Constant variables will always retain their initial value; they can never be changed. A constant variable can be used for a variable that has a value you don't want to accidentally rewrite later.