Demystifying Construct 3
Construct 3 allows you to easily make games for HTML websites, and export to all kinds of platforms. It's free, fully contained in-browser, and no installation required, so it works on Macs too! Construct 2, also made by Scirra, is a downloadable program (for Windows only) that works in much the same way as Construct 3.
Both Construct 2 and 3 come with incredibly useful tutorials that I highly suggest following, as well as a few example games that you can tweak to get the feel of it. Scirra also has additional tutorials that are incredibly helpful, and if you need help on a specific niche issue, the Scirra Forums provide a lot of assistance, guides, and plugins.
Let's get started making your first game. We'll be making a Snowball Fight demo game. You'll learn everything you need to know to make a simple game!
SEE THE FINISHED GAME
Then you can see what we're aiming for: a player who looks at the mouse, moves with the arrows keys, and shoots monsters with the mouse.
If you're not already looking at a fresh copy of Construct 3, simply visit editor.construct.net. That's right, Construct 3 runs right in your browser! There is nothing to install or set up. If you see an error, check the system requirements page, you might need to update your browser or system.
CREATE A NEW PROJECT
Click the New project button. A dialog will appear asking for some details. You don't have to change anything, but you can type in a name for your project if you like (how about My First Game?). Click Create and you should see a new empty project something like this.
The main view in the middle of the screen is the layout view. This is the design view where you create and position objects. Think of a layout like a game level or menu screen. In other tools, this might have been called a room, scene or frame.
Let's add the objects our game will need. The first is the background.
An easy way to make a background is to repeat an image over the layout. The Tiled background object can do this for us. First, here's your background image - right click it and save it to your computer somewhere:
Now, double click a space in the layout to create a new object. (Later, if it's full, you can also right-click and select Insert new object.) Once the Create new object dialog appears, double click the Tiled Background object.
The mouse will turn in to a crosshair for you to indicate where to place the object. Click somewhere near the middle of the layout. The image editor now opens for you to draw or import the image to tile. Let's import the background image you saved earlier. Click the folder icon to load an image from your computer, find where you downloaded the file to, and select it.
Close the image editor by clicking the X in the top-right. Now you should see your tiled background object in the layout. Let's resize it to cover the entire layout. Make sure it's selected, then the Properties Bar on the left should show all the settings for the object, including its size and position. Set its position to 0, 0 (the top left of the layout), and its size to 1708 x 960 (the size of the layout - this is the default size, based on twice the size of the viewport).
Let's survey our work. Hold Control and scroll the mouse wheel down to zoom out. Alternatively, right-click and select View►Zoom out a couple of times. You can also hold Space bar, or the middle mouse button, to pan around. Neat, huh? Your tiled background should cover the entire layout now:
Hit Ctrl + 0 or right-click and select View►Reset zoom to return to 1:1 view.
Click the Preview button in the main toolbar (shown circled in red below) and the preview window should pop up showing your tiled layout!
Before we continue, the tiled background should be locked. As we create and move around objects on top of it, it's easy to accidentally select or modify the background. Since we don't need to change the background any more, locking it makes it unselectable, so it won't get in the way. To lock it, right-click on the tiled background and select Lock►Lock selection. (If you do want to change it later on, simply right-click and select Lock►Unlock all.)
ADD THE INPUT OBJECTS
Double-click in a space (this can be anywhere since the tiled background is locked) to add another new object. This time, select the Mouse object, since we'll need mouse input. Do the same again for the Keyboard object.
Note that these objects don't need placing in a layout. They are hidden, and automatically work across the entire project. Now all layouts in our project can accept mouse and keyboard input.
THE GAME OBJECTS
It's time to add our game objects! Here are your images - save them all to your computer as you did before with the background image.
For each of these objects, we will add a Sprite object. Sprites simply display an image, which you can move about, rotate, resize and optionally animate. Games are generally composed mostly out of sprite objects. Let's add each of the above four objects as sprite objects. The process is similar to inserting the Tiled Background:
- Double click to insert a new object
- Double click the Sprite object.
- When the mouse turns to a crosshair, click somewhere in the layout to place it
- The image editor pops up. Click the Load image button, and load one of the four images.
- Close the image editor. You should now see the object in the layout!
Another quick way to create sprite objects is to drag and drop the image file in to the layout view. Construct will create a Sprite with that image for you. Be sure to drag each image in one at a time though - if you drag all four files in at once, Construct will make a single sprite with four animation frames.
Move the bullet and explosion sprites to somewhere off the edge of the layout - we don't want to see them when the game starts.
These objects might be called Sprite, Sprite2, Sprite3 and Sprite4. That's not very useful - things will quickly get confusing like this. Rename them to Player, Monster, Bullet and Explosion as appropriate. You can do it by selecting the object, then changing the Name property in the properties bar:
Behaviors are quick ways to make an object act a certain way. You can usually do the same in events, but behaviors are much quicker! Construct has a wide range of behaviors, but here are a few that we'll use in this tutorial.
- 8 Direction movement: this lets you move an object around with the arrow keys. It will do nicely for the player's movement.
- Bullet movement: this simply moves an object forwards at its current angle. It'll work great for the player's bullets. Despite the name, it'll also work nicely to move the monsters around - since all the movement does is move objects forwards at some speed.
- Scroll to: this makes the screen follow an object as it moves around (also known as scrolling). This will be useful to keep the view centered on the player.
- Bound to layout: this will stop an object leaving the layout area. This will also be useful on the player, so they can't wander off outside the game area!
- Destroy outside layout: instead of stopping an object leaving the layout area, this destroys it. It's useful for our bullets. Without it, bullets would fly off the screen forever, always taking a little bit of memory and processing power. Instead, we should destroy the bullets once they've left the layout.
- Fade: this makes an object fade out, which we will use on the explosions.
Let's add these behaviors to the objects that need them.
HOW TO ADD A BEHAVIOR
Let's add the 8 direction movement behavior to the player. Click the player object to select it. In the Properties Bar, notice the Behaviors category. Click the Behaviors link there. The Behaviors dialog for the player will open.
Click Add new behavior in the behaviors dialog. Double-click the 8 direction movement to add it.
Do the same again and this time add the Scroll To behavior, to make the screen follow the player. Then also add the Bound to layout behavior, to keep them inside the layout. The behaviors dialog should now look like this:
Close the behaviors dialog. Now try pressing Preview to run the game so far! Once the preview starts, notice you can already move around with the arrow keys, and the screen follows the player. You also can't walk outside the layout area, thanks to the Bound to Layout behavior. This is what behaviors are good for - quickly adding common features. We'll be using the event system soon to add custom features.
ADDING THE OTHER BEHAVIORS
We can add behaviors to the other objects by the same method - select it, click the Behaviors link to open the behaviors dialog, and add some behaviors. Let's add these other behaviors:
- Add the Bullet movement and Destroy outside layout to the Bullet object (no surprises there)
- Add the Bullet movement to the Monster object (because it just moves forwards as well, just at a slower speed)
- Add the Fade behavior to the Explosion object (so it gradually disappears after appearing). By default the Fade behavior also destroys the object after it has faded out, which also saves us having to worry about invisible Explosion objects clogging up the game.
If you run the game, you might notice the only thing different is any monsters you can see suddenly shoot off rather quickly. Let's slow them down to a leisurely pace. Select the Monster object. Notice how since we added a behavior, some extra properties have appeared in the properties bar:
This allows us to tweak how behaviors work. Change the speed from 400 to 80 (this is in pixels traveled per second).
Similarly, change the Bullet object's speed to 600, and the Explosion object's Fade behavior's Fade out time to 0.5(that's half a second).
CREATE SOME MORE MONSTERS
Holding Control, click and drag the Monster object. You'll notice it creates another instance. This is simply another object of the Monster object type.
Object types are essentially 'classes' of objects. In the event system, you mainly deal with object types. For example, you might make an event that says "Bullet collides with Monster". This actually means "Any instance of the Bullet object type collides with any instance of the Monster object type" - as opposed to having to make a separate event for each and every monster. We'll cover more on object types vs. instances later. For now, a good example to think about is different types of enemy are different object types, then the actual enemies themselves (which there might be several of) are instances of those object types.
Using Control + drag, create 7 or 8 new monsters. Don't place any too close to the player, or they might die straight away! Remember you can zoom out with Control + mouse wheel down if it helps, and spread them over the whole layout. You should end up with something a bit like this.
Now it's time to add our custom logic with Construct's visual method of programming - events!
First, click the Event sheet 1 tab at the top to switch to the Event Sheet View. A list of events is called an Event sheet, and you can have different event sheets for different parts of your game, or for organisation. Event sheets can also "include" other event sheets, allowing you to reuse events on multiple levels for example, but we won't need that right now.
As the text in the empty sheet indicates, Construct runs everything in the event sheet once per tick. Most screens update their display 60 times per second, so Construct will try to match that for the smoothest display. This means the event sheet is usually run 60 times per second, each time followed by redrawing the screen. That's what a tick is - one unit of "run the events then draw the screen".
Events run top-to-bottom, so events at the top of the event sheet are run first.
CONDITIONS, ACTIONS AND SUB-EVENTS
Events consist of conditions, which test if certain criteria are met, e.g. "Is spacebar down?". If all these conditions are met, the event's actions are all run, e.g. "Create a bullet object". After the actions have run, any sub-events are also run - these can then test more conditions, then run more actions, then more sub-events, and so on. Using this system, we can build sophisticated logic for our games and apps. We won't need sub-events in this tutorial, though.
Let's go over that again. In short, an event basically runs like this:
Are all conditions met?
- Yes: run all the event's actions.
- No: go to next event (not including any sub-events).
That's a bit of an oversimplification. Construct provides a lot of event features to cover lots of different things you might need to do. However, for now, that's a good way to think about it.
YOUR FIRST EVENT
We want to make the player always look at the mouse cursor. It will look like this when we're done:
Remember a tick runs every time the screen is drawn, so if we make the player point at the mouse cursor position every tick, they'll always appear to be facing the mouse cursor.
Let's start making this event. Double-click a space in the event sheet. This will prompt us to add a condition for the new event.
Different objects have different conditions and actions depending on what they can do. There's also the System object, which represents Construct's built-in features. Double-click the System object as shown. The dialog will then list all of the System object's conditions:
Double-click the Every tick condition to create an event with it. The dialog will close and the event is created, with no actions.
Now we want to add an action to make the player look at the mouse cursor. Click the Add action link to the right of the event. (Make sure you get the Add action link, not the Add event link underneath it which will add a whole different event again.) The Add Action dialog will appear:
As with adding an event, we have our same list of objects to choose from, but this time for adding an action. Try not to get confused between adding conditions and adding actions! As shown, double-click the Player object, for it is the player we want to look at the mouse cursor. The list of actions available in the Player object appears:
Notice how the player's 8-direction movement behavior has its own actions. We don't need to worry about that for now, though.
Rather than set the player's angle to a number of degrees, it's convenient to use the Set angle towards position action. This will automatically calculate the angle from the player to the given X and Y co-ordinate, then set the object's angle to that. Double-click the Set angle towards position action in the list.
Construct now needs to know the X and Y co-ordinate to point the player at:
The X and Y fields are called the parameters of the action. Conditions can have parameters too, but Every tick doesn't need any.
We want to set the angle towards the mouse position. The Mouse object can provide this. Enter
Mouse.X for X, and
Mouse.Y for Y. These are called expressions. They're like sums that are calculated. For example, you could also enter
Mouse.X + 100 or
sin(Mouse.Y) (although those particular examples might not be very useful!). This way you can use any data from any object, or any calculation, to work out parameters in actions and conditions. It's very powerful, and a sort of hidden source of much of Construct's flexibility.
If you get an error that says "Mouse is not an object name", make sure you added the Mouse object! Go back and check under Add the input objects.
You might be wondering how you'd remember all the possible expressions you could enter. Firstly, you might notice Construct shows some lists as you type. This is called autocomplete and helps show what you can type at each point in an expression. Secondly, there's also the Expressions Dictionary which lists them all. If there's room on your screen, it will appear faded out, so it doesn't distract you until you need it. If it's not there, you can click Find expressions to open it. You can double-click an object in the Expressions Dictionary to see a list of all its expressions. If you double-click an expression, it will also insert it for you, saving you from having to type it out.
Anyway, click Done on the parameters dialog. The action is added! As you saw before, it should look like this:
There's your first event! Try running the game, and the player should now be able to move around as before, but always facing the mouse cursor. This is our first bit of custom logic.
MORE GAME LOGIC
If each event is described in as much detail as before, it's going to be quite a long tutorial. Let's make the description a little briefer for the next events. Remember, the steps to add a condition or action are:
- Double-click to insert a new event, or click an Add action link to add an action.
- Double-click the object the condition/action is in.
- Double-click the condition/action you want.
- Enter parameters, if any are needed.
From now on, events will be described as the object, followed by the condition/action, followed by any parameters. For example, the event we have just inserted could be written:
Add condition System►Every tick
Add action Player►Set angle towards position, and for X:
GET THE PLAYER TO SHOOT
When the player clicks, they should throw a snowball. This can be done with the Spawn an object action in Player, which creates a new instance of an object at the same position and angle. The Bullet movement we added earlier will then make it fly out forwards. Make the following event:
Condition: Mouse►On click►Left clicked (the default)
Action: Player►Spawn another object, then for Object, choose the Bullet object. Leave the other parameters as they are.
Your event should now look like this:
If you run the game, you can shoot snowballs! However, you may notice the snowballs shoot from the middle of the player, rather than from the end of the gun. Let's fix that by placing an image point at the end of the gun. An image point is just a position on an image that you can spawn objects from, and we can reference it in the Spawn another object action.
Right-click the player in the Project Bar and select Edit animations.
The image editor for the player reappears. Click the origin and image points tool:
...and then the side pane turns in to a list of image points:
Notice the object origin appears in the list. That's the "hotspot" or "pivot point" of the object. If you rotate the object, it spins around the origin. That's also what's used when you spawn an object at image point 0, as our action did. We want to add another image point to represent the gun, so right-click in the list and select Add a new image point. A new item appears in the list, and an icon appears over the image to indicate where this image point is. Left-click at the end of the player's gun to place the image point there:
Close the image editor. Double-click the Spawn an object action we added earlier, and change the Image point to
1. The event should now look like below - note it says Image point 1 now:
Preview the game again. The snowballs now shoot from the end of your gun! They don't do anything yet, though. Hopefully, however, you'll start to realize that once you get the hang of the event system, you can put together your game's logic very quickly.
Let's make the snowballs explode the monster snowmen. Add the following event:
Condition: Bullet►On collision with another object►Monster.
Action: Bullet►Spawn another object►Explosion
Here's what the finished event looks like.
THE EXPLOSION EFFECT
Preview the game, and try shooting a monster. Oops, the explosion has that big black border!
You might have predicted it'd look like that from the start, and wondered if our game was really going to end up like that! Don't worry, it won't. Click the Explosion object in the Project Bar. Its properties appear in the Properties Bar on the left. In the Effects section, set its Blend mode to Additive. Now try the game again.
Why does this work? Without going too much in to the nuts and bolts, ordinary images are pasted on top of the screen. With the additive blend mode, each pixel is instead added (as in, summed) with the background pixel behind it. Black is a zero pixel value, so nothing gets added - you don't see the black background. Brighter colors add more, so appear more strongly. It's great for explosions and lighting effects.
MAKING MONSTERS A LITTLE SMARTER
Right now the monsters just wander off the layout to the right. Let's make them a bit more interesting. First of all, let's start them at a random angle.
Condition: System►On start of Layout
Action: Monster►Set angle to
They will still wander off forever when they leave the layout, never to be seen again. Let's keep them inside. What we'll do is point them back at the player when they leave the layout. This does two things: they always stay within the layout, and if the player stands still, monsters end up coming right for them!
Condition: Monster►Is outside layout
Action: Monster►Set angle toward position X:
Here are what the two finished events look like.
Run the game. If you hang around for a while, you'll notice the monsters stay around the layout too, and they're going in all kinds of directions. It's hardly AI, but it'll do!
Now, suppose we want to have to shoot a monster more than once before it dies, rather than instant death like it is at the moment. How do we do that? If we only store one "Health" counter, then once we've hit a monster, all the monsters will die. Instead, we need each monster to remember its own health. We can do that with instance variables.
USING INSTANCE VARIABLES
Instance variables allow each monster to store its own health value. A variable is simply a value that can change (or vary), and they are stored separately for each instance, hence the name instance variable.
Lets add a health instance variable to our monster. This works somewhat similarly to adding a behavior. Click the monster in the Project Bar. Alternatively, you can switch back to the layout using the tabs at the top and select a monster object. This will show the monster's properties in the Properties Bar. Click Instance variables to open the Instance Variables dialog.
You can add as many instance variables to an object as you like, but we only need one for the monster. Click Add new instance variable. The following dialog appears for adding an instance variable.
Type Health for the name, leave Type as Number, and for Initial value enter 5 (as shown). This starts every monster on 5 health. When they get hit we'll subtract 1 from the health, and then when health is zero we'll destroy the object.
Once you're done, click OK. Notice the variable now appears in the instance variables dialog and also in the properties for the monster as well. You can quickly change initial values in the properties bar, but to add or remove variables you'll need to open the instance variables dialog. Also note every object in the layout can have unique instance variable values set as well, so you could for example start every monster with a different amount of health.
CHANGING THE EVENTS
Switch back to the event sheet. Right now, we're destroying monsters as soon as the bullet hits them. Let's change that to subtract 1 from its health.
Find the event that reads Bullet: On collision with Monster. Notice we've got a "destroy monster" action. Let's replace that with "subtract 1 from health". Right click the "destroy monster" action and click Replace action.
The same dialog appears as if we were inserting a new action, but this time it'll replace the action we clicked instead. Choose Monster►Subtract from (in the Instance variablescategory), choose the instance variable "health", and enter 1 for the value. Click Done. The event should now look like this:
Now when we shoot monsters they lose 1 health and the bullet explodes, but we haven't made an event to kill monsters when their health reaches zero. Add another event:
Condition: Monster►Compare instance variable►Health, Less or equal, 0
Action: Monster►Spawn another object►Explosion
Why "less or equal 0" rather than "equals 0"? Suppose we added another more powerful weapon which subtracted 2from health. As you shot a monster, its health would go 5, 3, 1, -1, -3... notice at no point was its health directly equal to zero, so it'd never die! Therefore, it's good practice to use "less or equal" to test if something's health has run out.
Run the game. You now have to hit monsters five times to kill them!
Let's have a score so the player knows how well they've done. We'll need a global variable for this. Like an instance variable, a global variable (or just "global") can store text or a number. Each variable can store a single number or a single piece of text. Global variables are also available to the entire game across all layouts - convenient if we were to add other levels.
Right-click the space at the bottom of the event sheet, and select Add global variable.
Enter Score as the name. The other field defaults are OK, it'll make it a number starting at 0.
Now the global variable appears as a line in the event sheet. It's in this event sheet, but it can be accessed from any event sheet in any layout.
Let's give the player a point for killing a monster. In our "Monster: health less or equal 0" event (when a monster dies), click Add action, and select System►Add to (under Global & local variables), and choose Score with a value of
1. Now the event should look like this:
Now the player has a score, which increases by 1 for every monster they kill - but they can't see their score! Let's show it to them with a text object.
DISPLAYING THE SCORE
To display the player's score, we'll use a Text object. However we want to display it on a fixed position on-screen. The view follows the player, and we don't want the score to disappear as the player walks away! To fix this, we'll need to add a new layer.
ADDING A LAYER
Layouts can consist of multiple layers, which you can use to group objects. Imagine layers like sheets of glass stacked on top of each other, with objects painted on each sheet. It allows you to easily arrange which objects appear on top of others, and layers can be hidden, locked, have parallax effects applied, and more. We want our score to display on top of everything else, and also to stay in the same place on screen, so we can add a new layer to do this.
Try not to confuse layouts and layers. The words look quite similar.
Turn your attention to the Layers bar. By default this is in the lower-right corner of the screen.
You should see Layer 0 in the list.
Construct counts starting from zero, since it works better like that in programming.
Right-click in the Layers Bar and select Add layer at top. (Be sure to add it at the top, not the bottom, because we want the score to display on top of everything else!) When you add it, you can immediately type in a name. Enter HUD, which stands for Heads-Up Display - which is a term used for all the on-screen information.
Now, make sure the 'HUD' layer is selected in the Layers Bar. This is important - the selected layer is the active layer. All newly added objects are added to the active layer, so if it's not selected, we'll later accidentally add our Text object to the wrong layer. The active layer is shown in the status bar in the bottom-right corner of the Layout View - it's worth keeping an eye on.
The HUD should always stay in the same place on the screen. By default, layers scroll as the view moves. To keep them on the screen, we can use the layer Parallax setting. Parallax allows different layers to scroll at different rates for a sort of semi-3D effect. If we set the parallax to zero, though, the layer won't scroll at all - ideal for a HUD.
Since you have the HUD layer selected, its properties should be showing in the Properties Bar. Set the Parallax property to 0 x 0 (that's zero on both the X and Y axes).
Now we have a layer where we can place objects that appear in a fixed place on-screen! However, we don't have any objects on it yet.
ADDING THE TEXT OBJECT
Switch back to the Layout View using the tabs at the top. Make sure the HUD layer is selected in the Layers Bar, to ensure the Text object is added to the right layer. Double-click a space to add another object. This time pick the Text object.
Try not to confuse the Text object, which displays some text, with the Text input object, which is a box the user can type some text in to (e.g. for a form).
Place the Text object in the top left corner of the layout. It's going to be hard to see, so in the Properties Bar, make it bold, italic, brightly colored, and choose a larger font size. Resize it wide enough to fit a reasonable amount of text. It should look something like this:
Text objects won't display any text in the game if they are too small to fit the first word inside their box. If you don't see any text appear, try resizing the Text object larger.
Switch back to the event sheet. Let's keep the text updated with the player's score. In the Every tick event we added earlier, add the action Text►Set text.
Using the & operator, we can convert a number to text and join it to another text string. So for the text, enter:
"Score: " & Score
The first part (
"Score: ") means the text will always begin with the phrase Score: . Pre-defined text has to appear in double-quotes in expressions. The second part (
Score) is the actual value of the Score global variable. The & joins them together in to one piece of text.
Run the game, and shoot some monsters. Your score is displayed, and it stays at the same place on the screen!
We're nearly done. Let's add some final touches.
Firstly, let's have some monsters regularly spawning, otherwise once you've shot all the monsters there's nothing left to do. We'll create a new monster every 3 seconds. Add a new event:
Condition: System►Every X seconds►3
Action: System►Create object, Monster, layer 0 (that's the main layer), X:
LayoutWidth + 100, Y:
Note the position is a random place along the right edge of the layout. That's where monsters will come from. We also create them 100 pixels further to the right so the player can't see them suddenly appear at the edge, they will instead come in from the outside.
Finally, let's have ghosts kill the player.
Condition: Monster►On collision with another object►Player
SOME IDEAS TO TRY
Want to go a bit further? Here are some ideas for some extra things to add:
- Make the player get points for hitting monsters as well as killing them. You can adjust the score gained for each case.
- Make the monsters slowly speed up over time, so they're harder to hit and avoid.
- Add another kind of enemy!
- Add an alternative kind of weapon, which uses a different mouse button or keyboard control.
- Add the Audio object, import some sound files, and add sound effects or music.
- Add a title screen. Use the System object Go to layoutaction to switch between them.
- Introduce some scenery or obstacles in the level design.
- Add a "Game over" screen, or make something else happen when the player dies.
Congratulations, you've made your first game in Construct! If you want to show off your work, use Menu►Project►Export. You can publish to the Scirra Arcade, or upload to your own web server with the Web (HTML5) export. There are other platforms you can publish to, but you will need a subscription to access the full features of Construct 3.
You've learned some important basics about Construct: adding objects, using behaviors, events, layers and more. Hopefully this should leave you well prepared to learn more about Construct!
THE FINISHED THING
Click here to open a finished project for the Ghost Shooter tutorial in the Start Page. It's the same top-down shooter concept with some extra features added in, like "Game over" text, different art assets, and monsters which gradually speed up. There are also lots of comments (simply notes you can add above events) describing how it works.
The goal of this blog post is to pass on technical knowledge and to make games development easier for beginners new to the world of programming. I hope that I’ve done a good job of Demystifying Construct 3!
If you have any requests for other game engines, or wish to share tips and tricks of your own, hit me up on Twitter at @Saelia. Thanks for reading, and keep on building!!