In this article by Aryadi Subagio, the author of Learning Construct 2, introduces you to Construct 2, makes you familiar with the interface and terms that Construct 2 uses, as well as gives you a quick overview of the event system.

(For more resources related to this topic, see here.)

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 is 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 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 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.

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

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 take-home point here is that the layout size is not the same as the window size!

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.

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 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.
• 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.

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 to change this first
• Description: Your game’s short description; some application stores require you to fill this out before submitting
• 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, which, for example, are sprites, text, particles, and 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.

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, it is advised not to use the Form controls objects.

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

1. 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.
2. 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. Take a look at the following screenshot:

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, and selected.

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.

To write an event, just perform the following steps:

1. Click on the event sheet tab above the layout.
2. 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 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. 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:

1. Click on the Add action link beside an event.
2. Click on an object you want to create an action from; for now, double-click on the systems object.
3. Double-click on the Set layer background color action under the Layers & Layout category.
4. Change the three numbers inside the bracket to 100, 200, and 50.
5. 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. Also, because adding a screenshot every time gives you a code example, which would be troublesome, I will write my code example as follows:

System every 1.0 seconds | System Restart layout

The left-hand side of the code is the event, and the right-hand side of the code is the action. I think this is pretty clear.

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 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 tells whether the variable is Text, Number, or Boolean. Only instance variables can have a Boolean type.
• 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.

Summary

In this article, we learned about the features of Construct 2, its ease of use, and why it’s perfect for people with no programming background. We learned about Construct 2’s interface and how to create new layers in it. We know what objects are and how to create them. This article also introduced you to the event system and showed you how to write code in it.

Now, you are ready to start making games with Construct 2!

Resources for Article:

 Further resources on this subject:

• Building Mobile Apps [article]
• Introducing variables [article]
• HTML5 Game Development – A Ball-shooting Machine with Physics Engine [article]

---