Construct2 Tutorial
Construct2 Tutorial
A powerful new game maker. Build your games in the world's best editor. No prior
experience in programming is necessary to use our event system. Be up and running
in minutes. HTML5 is the future of the web. Construct 2 makes HTML5 games that
run in a browser. Run your games on Mac, iPhone, iPad, Windows, Linux and more!
Just like Flash, but no plugins necessary.
Events ............................................................................................................ 13
About events........................................................................................................................ 14
Conditions, actions and sub-events ........................................................................................ 14
Your first event .................................................................................................................... 14
2 of 47
Physics ............................................................................................ 31
How to add Physics ......................................................................................... 31
Gravity ................................................................................................................................ 31
Making the scenery .............................................................................................................. 31
Conclusion ...................................................................................................... 34
Timescaling .................................................................................................... 41
Pausing ............................................................................................................................... 41
3 of 47
Conclusion ...................................................................................................... 43
4 of 47
In the New Project dialog, you don't need to change anything. Just click Create project. Construct 2
will keep the entire project in a single .capx file for us. You should now be looking at an empty layout
- 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.
Inserting objects
Tiled Background
The first thing we want is a repeating background tile. The Tiled Background object can do this for
us. First, here's your background texture - right click it and save it to your computer somewhere:
Now, double click a space in the layout to insert a new object. (Later, if it's full, you can also rightclick and select Insert new object.) Once the Insert new object dialog appears, double click the
Tiled Background object to insert it.
5 of 47
A crosshair will appear for you to indicate where to place the object. Click somewhere near the middle
of the layout. The texture editor now opens, for you to enter the texture to tile. Let's import the tile
image you saved earlier. Click the folder icon to load a texture from disk, find where you downloaded
the file to, and select it.
Close the texture editor by clicking the X in the top right. If you're prompted, make sure you save!
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
1280, 1024 (the size of the layout).
6 of 47
Let's survey our work. Hold control and scroll the mouse wheel down to zoom out. Alternatively,
click view - zoom out a couple of times. You can also hold space, or the middle mouse button, to pan
around. Neat, huh? Your tiled background should cover the entire layout now:
(If you're impatient like me, click the little 'run' icon in the window title bar - a browser should pop up
showing your tiled layout! Woo!)
Adding a layer
Okay, now we want to add some more objects. However, we're going to keep accidentally selecting
the tiled background unless we lock it, making it unselectable. Let's use the layering system to do
this.
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
7 of 47
arrange which objects appear on top of others, and layers can be hidden, locked, have parallax
effects applied, and more. For example, in this game, we want everything to display above the tiled
background, so we can make another layer on top for our other objects.
To manage layers, click the Layers tab, which usually is next to the Project bar:
You should see Layer 0 in the list (Construct 2 counts starting from zero, since it works better like
that in programming). Click the pencil icon and rename it to Background, since it's our background
layer. Now click the green 'add' icon to add a new layer for our other objects. Let's call that one Main.
Finally, if you click the little padlock icon next to Background, it will become locked. That means you
won't be able to select anything on it. That's quite convenient for our tiled background, which is easy
to accidentally select and won't need to be touched again. However, if you need to make changes,
you can just click the padlock again to unlock.
The checkboxes also allow you to hide layers in the editor, but we don't need that right now. Your
layers bar should now look like this:
Now, make sure the 'Main' layer is selected in the layers bar. This is important - the selected
layer is the active layer. All new inserted objects are inserted to the active layer, so if it's not selected,
we'll be accidentally inserting to the wrong layer. The active layer is shown in the status bar, and also
appears in a tooltip when placing a new object - it's worth keeping an eye on.
8 of 47
Note: these objects don't need placing in a layout. They are hidden, and automatically work projectwide. Now all layouts in our project can accept mouse and keyboard input.
Monster:
Bullet:
and Explosion:
For each of these objects, we will be using a sprite object. It simply displays a texture, which you can
move about, rotate and resize. Games are generally composed mostly out of sprite objects. Let's
insert each of the above four objects as sprite objects. The process is similar to inserting the Tiled
Background:
1. Double click to insert a new object
2. Double click the 'Sprite' object.
3. When the mouse turns to a crosshair, click somewhere in the layout. The tooltip should be
'Main'. (Remember this is the active layout.)
4. The texture editor pops up. Click the open icon, and load one of the four textures.
5. Close the texture editor, saving your changes. You should now see the object in the layout!
9 of 47
Note: another quick way to insert sprite objects is to drag and drop the image file from Windows in to
the layout area. Construct 2 will create a Sprite with that texture for you.
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 will 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:
Adding behaviors
Behaviors are pre-packaged functionality in Construct 2. For example, you can add a Platform
behavior to an object, and the Solid behavior to the floor, and you instantly can jump around like a
platformer. You can do the same in events, but it takes longer, and there's no point anyway if the
behavior is already good enough! So let's have a look at which behaviors we can use. Amongst
others, Construct 2 has these behaviors;
- 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 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 if it
does. 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 gradually makes an object fade out, which we will use on the explosions.
Let's add these behaviors to the objects that need them.
10 of 47
Click the green 'add behavior' icon 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,
and also the Bound to layout behavior, to keep them inside the layout. The behaviors dialog should
now look like this:
11 of 47
Hopefully you have a HTML5 compatible browser installed. Otherwise, be sure to get the latest
version of Firefox or Chrome, or Internet Explorer 9 if you're on Vista and up. Once you have the
game running, 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 bits of functionality. We'll be using the event
system soon to add customised functionality.
This allows us to tweak how behaviors work. Change the speed from 400 to 80 (this is in pixels
travelled 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).
12 of 47
Now it's time to add our custom functionality via Construct 2's visual method of programming - the
event system.
Events
First, click the Event sheet 1 tab at the top to switch to the Event sheet editor. 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.
13 of 47
About events
As the text in the empty sheet indicates, Construct 2 runs everything in the event sheet once per tick.
Most monitors update their display 60 times per second, so Construct 2 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.
Remember a tick runs every time the screen is drawn, so if we make the player face the mouse every
tick, they'll always appear to be facing the mouse.
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.
14 of 47
Different objects have different conditions and actions depending on what they can do. There's also
the System object, which represents Construct 2's built-in functionality. 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 insert it. The dialog will close and the event is created, with
no actions. It should now look like this:
15 of 47
Now we want to add an action to make the player look at the mouse. 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, doubleclick the Player object, for it is the player we want to look at the mouse. The list of actions available
in the Player object appears:
16 of 47
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.
Construct 2 now needs to know the X and Y co-ordinate to point the player at:
These 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 2's flexibility.
You might be wondering how you'd remember all the possible expressions you could enter. Luckily,
there's the "object panel" which you should see floating above it. By default, it's faded out so it
doesn't distract you.
Hover the mouse over it, or click on it, and it'll become fully visible. This serves as a sort of dictionary
of all the expressions you can use, with descriptions, to help you remember. If you double-click an
17 of 47
object, you'll see all its expressions listed. 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. This is our first bit of custom functionality.
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 -> X: Mouse.X, Y: Mouse.Y
If you run the game, you'll notice the bullets 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.)
Right-click the player in the project or object bar and select Edit animations.
18 of 47
The image editor for the player reappears. Click the origin and image points tool:
Notice the object origin appears as a red spot. That's the "hotspot" or "pivot point" of the object. If
you rotate the object, it spins around the origin. We want to add another image point to represent
the gun, so click the green add button. A blue point appears - that's our new image point. 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 origin is always the first image point, and remember Construct 2 counts from
zero.) The event should now look like below - note it says Image point 1 now:
19 of 47
Run the game. The bullets now shoot from the end of your gun! The bullets don't do anything yet,
though. Hopefully, however, you'll start to realise that once you get to grips with the event system,
you can put functionality together very quickly.
Let's make the bullets kill monsters. Add the following event:
Condition: Bullet -> On collision with another object -> pick Monster.
Action: Monster -> Destroy
Action: Bullet -> Spawn another object -> Explosion, layer 1
Action: Bullet -> Destroy
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 either the Object bar
in the bottom right, or the Project bar (which was tabbed with the layers bar). Its properties appear
in the properties bar on the left. At the bottom, set its Effect property to Additive. Now try the
game again.
Why does this work? Without going in to the nuts and bolts, ordinary images are pasted on top of the
screen. With the additive effect, 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.
20 of 47
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 come right for
them!
Condition: Monster -> Is outside layout
Action: Monster -> Set angle toward position -> For X, Player.X - for Y, Player.Y.
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 five times 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 five times, all the monsters will die. Instead, we need each monster to remember its
own health. We can do that with instance variables.
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. Click the monster in the project bar or object bar.
Alternatively, you can switch back to the layout and select a monster object. This will show the
monster's properties in the properties bar. Click Add/edit by Edit variables.
21 of 47
The Instance Variables dialog appears. It looks similar to the Behaviors dialog we saw earlier, but
instead allows you to add and change instance variables for the object. Click the green Add button to
add a new one.
In the dialog that pops up, 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 click the Add / Edit link.)
22 of 47
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 variables category) -> Instance
variable "health", and enter 1 for Value. Click Done. The action should now appear 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, layer 1
Action: Monster -> Destroy
Why "less or equal 0" rather than "equals 0"? Suppose we added another more powerful weapon
which subtracted 2 from 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!
Keeping score
Let's have a score so the player knows how well they've done. We'll need another variable for this.
You might think "lets put the score as one of the player's instance variables!". That's not a bad first
idea, but remember the value is stored "in" the object. If there are no instances, there are no
variables either! So if we destroy the player, we can no longer tell what their score was, because it
was destroyed with the player.
Instead, we can use a global variable. Like an instance variable, a global variable (or just "global")
can store text or a number. However, there's only ever one value stored, and it's 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.
23 of 47
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.
Note: there are also local variables which can only be accessed by a smaller "scope" of events, but
we don't need to worry about that right now.
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) -> Score, value 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.
24 of 47
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:. 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!
Finishing touches
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 1, 1400 (for X), random(1024) (for Y)
25 of 47
1400 is an X co-ordinate just off the right edge of the layout, and random(1024) is a random Y coordinate the height of the layout.
Finally, let's have ghosts kill the player.
Condition: Monster -> On collision with another object -> Player
Action: Player -> Destroy
Conclusion
Congratulations, you've made your first HTML5 game in Construct 2! If you have a server and want to
show off your work, click Export in the File menu. Construct can save all the project files to a folder
on your computer, which you can upload or integrate to a web page. If you don't have your own
server, you can share your games on Dropbox.
You've learnt some important basics about Construct2: inserting objects, using layers, behaviors,
events and more. Hopefully this should leave you well prepared to learn more about Construct 2! Try
exploring its features and see what it can do for you.
----oOo----
Loops In Theory
A loop is an event that is executed a number of times, or 'iterations', every tick. There are two types
of loops that you need to know about: the While loop and the For loop.
A while loop executes an instruction while a condition is true, e.g.
1: While (you are breathing)
2:
As you can see, a while loop is useful when you don't know how many iterations you're going to have
- after all, you don't know how long you're going to be breathing, but while you are, you'll be alive.
A for loop can be considered a subcategory of a while loop. It is used when you know how many
iterations you want, e.g.
26 of 47
1: For 0 to 9
2:
Print Hello!
This will print "Hello!" 10 times. It's important to remember Construct 2 (and a lot of programming
languages) are zero-based as a rule (however, this can get confusing when we get to Arrays, but
don't worry about that just yet).
Loops in Construct 2
Most loops in Construct are system conditions. You can insert one by creating a new event, selecting
'System' and then a condition under the heading 'Loops'.
For
After creating a For loop, you'll be prompted for 3 fields:
Name - the name of the loop. Try to give it something descriptive, so it gives you an idea of what it's
counting.
Start Index - This is the number the loop starts counting at.
End Index - This is the number the loop finishes at.
Keep in mind that both indexes are inclusive. Also, if the start index is greater than the end index, the
loop will not execute.
A while loop can be made by putting a variable in either of these index fields like so:
27 of 47
For Each
This type of loop will execute once for each instance of an object. It is important to note that events
included in this loop relating to the object specified will pick to that object. E.g. the following events
will create a text object for each 'Button' sprite, move it to the button's location, and set the text to
the Button's "ButtonText" variable.
It's important to note that any 'For Each' event will pick to the object it is currently counting.
Repeat
The repeat event just repeats a series of events a set number of times. Note that this number can be
a variable (and therefore adjusted at runtime).
Arrays In Theory
If you've ever done Euclidean geometry, you've already encountered a form of arrays in the form of
the X and Y axis. An array is a set of values with distinct coordinates.
28 of 47
The X axis is usually referred to as 'width', the Y as 'height' and the Z as 'depth'.
Each coordinate in the array contains a value. For instance, in the array above, (1, 0) has the value
"World".
Arrays in Construct 2
Arrays are an object, which means they are created like any other object by double clicking the
canvas, or right clicking and selecting "Insert new object".
In Construct 2 (currently) arrays are 3 dimensional, although often they can be used as 2 dimensional
or 1 dimensional. This means they have a X (width), Y (height) and Z (depth) axis.
Size
The size of an array determines how many values it can hold in each axis. Remember when I said
Construct 2 was zero-based? This is one slightly confusing thing about arrays. Size is not zerobased, but coordinates are.
Let me give you an example. An array with a width, height and depth of 1 will only have 1 location
where a value can be stored. This value will be at x = 0, y = 0 and z = 0.
Depth, height and width can be changed by clicking on the array object and altering their values in
the Properties panel.
29 of 47
30 of 47
Physics
Created by Ashley
http://www.scirra.com/tutorials/64/physics-in-construct-2-the-basics
Construct 2 includes the Physics behavior, powered by Box2DWeb. This allows you to have objects
moving with real-world physics. Physics can make your games really fun and engaging! Here's an
overview of how you can get Physics to work in your game.
If you ever took a Physics class in school, you'll find some of the things you learned applicable to
Construct 2's Physics. I'll still explain the basics in brief in case you haven't learnt the concepts
before. Interested in some of the theory? You might want to read Wikipedia's article on Newton's
laws of motion.
Lots of physics examples come with Construct 2! Click Browse all examples on the start screen,
and all the physics demos filenames start with "Physics - ", e.g. "Physics - basics.capx". They're well
worth having a look. The descriptions here will probably make a lot more sense if you've seen it in
action first.
Gravity
By default, gravity is present on physics objects, which accelerates all objects downwards. The
default gravity is 10 (remember, the Y axis increases downwards in Construct 2). If you want to turn
off gravity, you can use the Set gravity action on any physics object. Note: gravity applies to the
whole "world". If you set gravity to 0 on one object, gravity is turned off for all objects.
31 of 47
Collision mask
This sets the collision shape of the object. By default, it's use collision polygon. If you open up the
image editor and click the collision polygon tool, you can change the bits of it that will collide. Be
careful not to use too many points, or it could slow down the game!
If set to either bounding box or circle, the collision polygon from the image editor is ignored. Instead
it'll either use a rectangle around the object (bounding box), or a circle which is useful for rolling
objects like balls.
Prevent rotation
If enabled, the object will never rotate even if struck at a glancing angle. This might be useful if you
want to control the angle of the player yourself. For example, in a platform game, you probably don't
want your player to trip over and fall on their face every time they try to run.
Density
Density is used to determine the object's mass. Mass defines how hard the object is to move. (Note
that "weight" isn't the exactly correct term - weight is dependent on gravity, and objects still have
mass in zero gravity. Objects with a large mass are still harder to move in zero gravity.) Your object's
mass is determined by its density multiplied by the area of its collision shape. So a really huge object
has a much bigger mass than a small object, even if their densities are the same.
If you have a concrete block, you'd want to give it a much higher density than a block of foam!
Friction
Friction affects how much the object is slowed down by sliding against another object. No friction is
like skating on ice, and high friction is like dragging a brick along concrete. It's harder work to pull
32 of 47
Elasticity
The elasticity (or "bounciness" or "restitution") affects how bouncy the object is. An object with high
elasticity will bounce high when dropped on to the floor, and an object with no elasticity won't
bounce at all.
Linear damping
Objects move at the same speed in the same direction forever, unless something else affects them.
Think of throwing a tennis ball in space - off it goes forever. (Newton's first law of motion: "every
object in a state of uniform motion tends to remain in that state of motion unless an external force is
applied to it".) On Earth, forces like gravity, friction and air resistance tend to make this less
noticeable.
In your physics game, you might find you push an object and it carries on forever, in accordance with
Newton's third law. You might want to simulate some friction against the floor, or air resistance.
Increasing the linear damping makes objects slow down gradually by themselves, ultimately to a
stop. Zero linear damping is like in space - objects will carry on forever.
Angular damping
Angular damping is a very similar concept to linear damping, but instead to do with the object's spin.
Again, in space, a spinning object will spin at the same speed forever. Increasing the angular
damping will make a spinning object gradually slow down until it is no longer spinning. Note the
damping occurs regardless of how fast the object is moving.
Stability
Physics simulations are not totally robust. If you simulate unrealistic things, like a gigantic concrete
object hitting a block of foam at the speed of sound, the result is likely not to be realistic either. In
fact, anything involving extreme forces is likely to cause the simulation to become unstable
(unrealistic, e.g. objects moving through or inside each other).
33 of 47
Things like incredibly heavy objects piled on a stack of really light boxes, huge piles of objects, or
very fast moving heavy objects tend to cause instability. Try to keep everything in your game at
reasonable proportions.
The same also applies to object sizes. Very small (under 5 pixels) or very large (over 500 pixels)
objects may not simulate realistically either. Try to keep all widths and heights in the 5-500 pixel
range, and still avoid extreme proportions (e.g. a 5x500 sized object).
In other words, Physics will work best with objects of about the same size and mass interacting at
relatively low speeds.
Conclusion
Physics can be really fun to have in your games, but don't forget: avoid having too many objects,
avoid extremes, try to move things by forces and impulses alone - and it doesn't hurt to know some
of the theory!
34 of 47
35 of 47
Normally you'd apply forces and torque in a continuously true condition like is left mouse button
down, impulses in triggers like on collision with an object, and create joints on start of layout or
after creating a new object.
Forces
When applying a force, you can specify the strength and direction of the force, as well as the point on
the object it applies.
There are three actions to apply a force. They all essentially do the same thing, but some do a bit of
math behind the scenes to make it easier to specify the force you want. Apply force can apply a
force on the X and Y axes separately. Apply force at angle applies a force of a particular strength
at an angle (and works out the X and Y components for you). Apply force towards position
applies a force of a particular strength towards a position (and works out the angle, and then the X
and Y components for you).
Here's an image to demonstrate a force on The Pirate Princess:
36 of 47
The force (the blue arrow) can be specified in three ways: the X and Y components, the angle and
strength (length of the arrow), or the strength and a position somewhere the arrow is pointing to. All
three specify the same force, but each is convenient in different situations.
Point of application
You can also supply an image point when applying a force. This allows you to apply the force from a
different position on the object. By default, it's applied from the object's origin, normally in the middle
of the object. Notice the blue spot where the arrow starts in the image above is in the middle of The
Pirate Princess.
Suppose we want to pull The Pirate Princess by his/her hook instead of from the origin. In the image
editor, an image point can be placed on the hook. Then, we can provide that image point's name or
number in the force-applying action. The force is then pulled from that point. See the image below:
now the force is applied from the hook.
When you apply a force at the edge of an object, it's more likely to rotate, and move with that point
in front. Forces from the middle tend to be more "floaty", as if they're orbiting.
Impulses
The Apply Impulse actions are very similar in that you can apply an impulse with X and Y
components, towards an angle, or towards a position. You can also specify the impulse point from an
image point on the object. Again, applying impulses from the edge of the object are more likely to
send the object off spinning.
Remember impulses are one-off hits - you probably only want to use them in triggered events like on
collision with an object.
37 of 47
Torque
Torque is a rotational force. Instead of giving an X and Y component, you simply enter a single value.
A positive torque accelerates the object in a clockwise direction, and a negative torque accelerates
the object in an anticlockwise direction.
Torque affects the object's angular velocity. That's how many degrees per second it is rotating.
Again, a positive value is clockwise rotation, and negative is anticlockwise.
You can apply torque towards an angle. This applies the rotation force either clockwise or
anticlockwise towards the given angle - whichever's shortest. You can also apply torque towards a
position. While that might sound like an odd thing to do, it simply calculates the angle to that
position, then applies the torque towards that angle.
You can't apply torque from a position. Rotation affects the whole object!
Joints
There are two kinds of joints available to the Physics behavior.
Revolute joint
A revolute joint is like a hinge: an object is pinned on to another object. The objects are free to
rotate, but are joined together at that point. See the Physics - revolute joint example provided with
Construct 2 for a demonstration. Revolute joints are created with the Create revolute joint action.
You only need to create the joint once, either on start of layout or when the objects are created or
need to be attached, then it applies to the objects forever. You can join the objects from an image
point, so the other object doesn't have to be attached to the origin. You don't need to apply an image
point for the other object - it's attached from its current position, so make sure it's in the right place
before the Create revolute joint action.
Distance joint
A distance joint makes two objects act as if they are joined by a pole. They always stay exactly the
same distance apart, although they can rotate about their attachment points. See the Physics distance joint example provided with Construct 2 for a demonstration. Distance joints are created
with the Create distance joint action.
38 of 47
Note the connecting pole is not shown by the action itself! If you use this action on its own, there is
nothing visible joining the objects, although they act as if there was a pole joining them. The above
picture and the distance joint demo use a sprite to display the pole, so it's easier to see how the joint
works. You might want to do something similar in your games, since it can look odd having objects
joined by an invisible pole.
You can specify image points for both objects being attached. In the action's parameters, This image
point refers to a point on the object the physics behavior is added to, and That image point refers to
an image point on the other object. This allows you to connect two objects by their edges, for
example.
You can also specify the damping ratio and spring frequency. The spring frequency makes the
connecting pole act more like a large spring. If you set it to 4 Hz and one of the objects is struck, the
connection between the two objects will "bounce" a little at about 4 oscillations a second. The rate
the oscillations diminish is set by the damping ratio. A damping ratio of 0 means the spring will keep
oscillating forever, and 1 means the spring will stop oscillating almost immediately.
Don't forget...
Newton's second law says "The relationship between an object's mass m, its acceleration a, and the
applied force F is F = ma". In other words, if you apply a force of 100 to a small object with a low
mass, you get a lot more acceleration (a) than if you applied the same force to a big object with a
large mass. It should be obvious that big, heavy objects are harder to move and tend to move
slower! Therefore, you may find yourself needing to use smaller forces for small objects, and larger
forces for big objects. The same is true of impulses and torque.
Conclusion
Forces, impulses and torque allow you to throw objects around in your game, setting them
accelerating, rotating and flying. Joints allow you to connect objects up in fun ways. You can even
make strange contraptions! Check out the Physics - vehicle example for one idea. You could try
connecting a whole series of objects up by distance joints and see what happens. The possibilities are
endless - and it's great fun to play with, too!
39 of 47
How to use dt
Typically, framerate dependent motion is done with an event like this:
Every tick (once per frame), the object moves one pixel to the right. Notice that at 30 FPS this means
30 pixels per second, and at 60 FPS this means 60 pixels per second. Those are different speeds,
depending on the framerate.
Remember from the example above that dt always adds up to 1 every second. So if we change the
event to the following:
40 of 47
...the object will move to the right at 60 pixels per second at any framerate. Since dt adds up to 1
every second, 60 * dt adds to up to 60 every second. This means at both 30 FPS and 60 FPS our
object moves to the right 60 pixels every second - the same speed, regardless of framerate.
Use dt everywhere
Any time you move an object at a steady speed, you need to use dt in that way to achieve framerate
independence. For example, Sprite's Move forward action takes a number of pixels to move the
object forward. If you constantly move the object forwards, you could move it forward 60 * dt pixels
to move it at 60 pixels per second at its current angle.
Timescaling
A really cool feature in Construct 2 is timescaling. This allows you to change the rate time passes at
in the game, also known as the time scale. You can set the time scale with the system Set Time
Scale action. A time scale of 1 means normal speed. 0.5 means half as fast, and 2.0 means twice as
fast. If you set your game's time scale to 0.1, it's going ten times slower but still smoothly - a nice
slow-motion effect!
Timescaling works by changing the value returned by dt. This means behaviors are affected, and any
movement using dt. If you don't use dt in your movement calculations (like the first event above) the
motion is not affected by the time scale! So to use time scaling, you simply have to use dt properly in
all movement.
Pausing
You can set the time scale to 0. This stops all motion. It's an easy way to pause the game. Set it back
to 1 and the game will resume.
It's also a good way to test you have used dt correctly. If you have used it correctly, setting the time
scale to 0 will stop everything in the game. If you have not used it correctly, some objects might
continue to move, even though the game is supposed to be paused! In that case you can check how
those objects are moved, and make sure you are using dt properly.
41 of 47
Rotation
Similar to before, the following event rotates the piggy 1 degree every tick:
This is 30 degrees per second at 30 FPS, and 60 degrees per second at 60 FPS - again, different
speeds for different framerates. Using dt in the same way solves the problem again. This way the
piggy rotates at 60 degrees per second regardless of the framerate:
Acceleration
Acceleration is also fairly straightforward. Usually this only applies when you are making a custom
movement via events.
If you have a speed variable, your object will be moving at Object.Speed * dt pixels per tick. Your
object's speed variable therefore contains a speed in pixels per second.
Suppose you want to accelerate the object by 100 pixels per second over one second. You simply
need to add 100 * dt to the object's speed variable every tick, and it will accelerate in a framerate
independent way. In other words, you use dt both to adjust the object's position, and to adjust the
object's speed.
Advanced considerations
Minimum framerate
At very low framerates, dt can become very large. For example, at 5 FPS, dt is 0.2. An object moving
at 500 pixels per second is therefore moving 100 pixels per tick. This can cause it to "teleport"
through walls or miss collisions with other objects.
Games are usually unplayable at such low framerates, but it is even worse if they become unstable
like that. To help the game stay reliable even at very low framerates, Construct 2 does not let dt get
larger than 0.1. In other words, below 10 FPS, dt stays at 0.1. This does also mean below 10 FPS the
game starts going in to a slow-motion effect (described earlier as one of the issues of framerate
dependent games), however this is usually a better result than the "teleporting objects" problem.
Random variation
As mentioned with physics, dt usually has small and random variations, usually due to imperfect
timers in the computer. Like with physics, this can also cause slight random variations in your game.
42 of 47
However, usually the effect is negligable and much less noticable than with physics. It's
recommended that you always use dt in your games unless exact precision is required (which is rare).
Conclusion
It's important to design your game from the start using dt. This improves the gameplay, ensuring the
pace never slows down in particularly intense parts of the game. As an extra bonus, you can also use
the time scaling feature, easily pause the game, and even control object's individual time scales.
Don't forget behaviors already use dt (except with Physics where you must turn it on yourself). If you
use behaviors to control all motion in your game, you don't have to worry about dt at all! However,
most games have some event-controlled motion, and it's important to remember how to make it
framerate independent.
43 of 47
The default settings should be fine, so click OK. Construct 2 fills a folder with all the necessary files. If
Construct 2 asks you, click to open the folder. Otherwise, browse to the folder Construct 2 exported
to, and open it. By default, it exports to a new folder on your desktop. You should see some exported
files a bit like this:
44 of 47
Log in to Dropbox
Log in to Dropbox.com with your new (or existing) Dropbox account.
By default all your files on Dropbox are private. To share them with the world, we need to put them
in the public folder. In the Files tab, click the public folder to open it.
Click New folder. We might want to upload another game later, so let's keep one game to a folder.
Name the folder after your game, and click Create. Open this folder.
45 of 47
46 of 47
47 of 47