Post your own tutorials, guides and demos.

Post » Sun Jun 15, 2008 7:29 pm

Be so nice to download the .zip from previous post.
Unzip it on a handy place.

Its time to leave the basic objects for what they are.
Lets add a sprite to the layout.

Make a new Construct direct X game.
Navigate to the layout editor.

Double click an empty place in the layout to bring up the new object wizard.
Choose Sprite from the objects.

Again you get a cross hair cursor. Click in the layout where you want the object to appear.

And the picture editor will show up.

The picture editor is very well explained on the wiki. There is no way i could explain it better.
Since i only use it to bring in the graphics i did outside construct and to set imagepoints.

I have a long resting love affair with Photoshop, Imageready, After effects and Illustrator.

Now on top of the picture editor you find the second icon. When you hover your mouse over it, it says "open".

Click that to open a graphics file and point it to the folder with sprites i provided.

Double click "info.png" to open it in the Picture Editor. Or when your system hides extensions, double click "info" to open it in the picture editor.

Close the Picture editor as u close any window. It will ask to save. Click "yes"

Now you have a new object in the layout.

Name it "info". Always give every new object a name.

And this is how easy it is to bring graphics into construct.

Sprite ? Object ?

Everything in the picture editor is a sprite.
Everything in the layout is an object and one of the many properties of this object is its face, the sprite. Which can be an animation, but thats for later.

There are faceless objects too. One of those we saw already. The system object.

Now lets rotate the object info with a basic behavior.

Uncollaps the behaviors tag in the left plane, the properties plane. Add a new behavior "Rotate".
Leave the values as they are.
And run .

As you ... it rotates !!!

Again with no events, no programming skills, no complicated code ..
we gave movement to an object.

Now lets combine this the last tutorial about the bullet behavior.

Add a new sprite to the layout. And choose "plane.png" from the sprites i provided.

Place it exact in the middle of the layout. And name it "plane"

Hmm exact ?

Ah well yes, we know that the layout is 640 pixels x 480 pixels.

You can see this by clicking on a empty spot in the layout. The left properties plane will give the properties of the layout. And there is width = 640. Height = 480

so the middle is
x = 640/2
y = 480/2

You can fill the results of this in the X and Y properties of the plane object. And it jumps to the middle.

(select the plane, uncollaps common, change X and Y )

But let me introduce you to another very nice feature of the layout editor.
Its Grid.

Click on "layout" on the top menu.
The ribbon will change to layout related buttons.

Click on edit grid in the ribbon.
Ah little window pops up.
fill in the horizontal the number 64.
fill in the vertical the number 48.
click ok

click in the ribbon on "toggle grid" to make the objects snap to the grid.

Now it is very easy to move the plane to exact the middle of the layout.

Ah yes construct has very nice features. Only.
At this moment (.95.3) the grid will return to its initial state of 16x16 when you reopen this project.

OK now, give the plane a bullet behavior, as explained in the previous post.
Leave all values as they are.
But toggle the "destroy when" to "never"

now move to the Event Sheet Editor.

Add a event with a system flow condition "always"
Add a sub-event with a system flow condition "always"
Add an action to the sub-event.

The action wizard shows up. The wizard usually comes in 3 steps.

Step1: the base object for this action. Or better said. The object that will be addressed when we use a "self expression" like

choose plain. (double click or select and click next)

Step2 : The actions show up. And thats pretty all you can "DO" with this object.

choose "Set Angle"

Step3: The parameters for this action.

fill in info.angle

You again will notice another way of construct helping you.
At the moment you type the point, construct will pop up a list of all accessible properties for the object "info".

Nice .. no ?

The events should look like this:

Now what have we done by this ?
We just set the angle of the plane to the angle of the info.

The info rotates by a behavior. In other words, its angle is animated.
The Plane moves by a bullet behavior direction its angle.
Since the Plane's angle will change according the info's angle,
the plane will change direction and fly circles.

Run all to see this.

Pretty simple to accomplish in construct. Dont you think ?

Now lets explore the next basic movement. And this way to move objects you will use A LOT.
Trust me on this.

Add another sprite to the layout. This time "balloon.png" from the sprites that i provided.
Name it "baloon"
Place it anywhere in the layout. Yes it snaps to the grid.

Add an action at the last "always" sub event.
step1: baloon as object
step2: "set position to another object" as action
step3: the parameters .. select the "plane" as object to position to, leave image point at 0

the events should look like this

Run it.

As you see, the balloon moves the same way as the plane. Without the rotation.

We will use this A LOT. By instance for our own sensors. But that is for later.

So far, we did a lot with construct. With basic behaviors, and basic events.
As you see, with a little guidance, construct is really simple.
And, although construct is beta, we had no crashes yet.

next post will be a little break from moving objects, it will be about "picking objects".
yuck that will be a long post.
Is anyone reading btw ?
Posts: 322
Reputation: 2,119

Post » Sun Jun 15, 2008 8:45 pm

download this .cap


Its the layout to start from. Once downloaded, you can double click it to open it with construct.

I always make the difference between flow-conditions and pick-conditions.
Now is the time to look at the pick-conditions.

I have to say, for me this was the most difficult part to understand.
And the people in the forums expected me to understand all this coming from the ghost shooting tutorial. But i did not. Dumb ? i guess .. lol.
Every time i asked to explain, i got send back to the ghost tutorial.
But it never revealed its secrets to me.


Look at the layout.
You see 8 darts.

They are instances of the same object. You can see this on the right. Click on "layers".
On top you see the layers, we only have 1 layer.
Below the middle you see a list of the objects on that layer.

There is only 1 object shown. And we 8 objects ?

If u uncollaps the object in that list. It reveals its 8 instances.

They are a bit like shortcuts in Windows terms. You have 1 program. And you can make many shortcuts and place them anywhere on your hard disk. But they all point to this one program.
This just to give you a visual.

How do you make instances of an object ? Well just select the object, copy it, and pasted it.
The copy is an instance.

When you make an instance of an object, all properties, even the behaviors will be in the copy.
Its an exact copy, only X and Y will be different due the fact that we in the process of copying, place the copy on another place.

Most properties you can change then. You can move one to another place.
So they have different X and Y.

If you rotate one, the other will not rotate.
if You make one smaller, the other stays on its size.

But changes in some properties will effect all instance.

General rule: everything that can not be tweened, but only be toggled.

A short list:
Changing the name of one instance will chance the name for all instances.
Delete or add a behavior from/to 1 instance will be done in all instances.
Delete or add a private variable from/to 1 instance will be done in all instances.
Change collision in one instance will be in effect in all instances

There is also "the clone"

A clone you make by copying an object ..
and bring the copy in the layout with the contextual menu "paste clone"
I am sure there is a shortcut too for this, i just did not find it yet.

A clone has nothing in common with the original object, besides its sprite.
Change the sprite for 1 clone will change sprites for all clones, and thats it.

Ok, back to our layout.

So we have 8 objects. They all have the same name.
And the wizards will see them as being one object.

Say that again ?

The events wizard and the action wizzard and the picture editor and the expression wizzard will see them as only ONE object.

Lets check this out.

Bring yourself to the event sheet editor.

Add an event, and uhhh as you see.
We have 8 objects, and there is only one visible in the wizzard.

We have 8 instances of the same object.

And oh man it is so handy to be able to only add a private variable once, and have it added to all instances.
Also, there will be only one object adding to the size of the .exe file that we adventurously will make.
Well lets make it short, instances are for a 1.000.000 reasons handy.


If the wizards only see 1 object, how do we pick one of the instances to *do* something with, and leave the others in peace ?

We will do this with conditions, i call them "pick conditions".

And i better post this now, before it gets lost. And continue in the next post.
Posts: 322
Reputation: 2,119

Post » Sun Jun 15, 2008 9:33 pm

It was really great of you to do this, Instance. Surely this will be of help to anyone picking up Construct for the first time. :wink:
Posts: 401
Reputation: 2,302

Post » Sun Jun 15, 2008 9:49 pm

At this point,
i do have to tell you about a problem that i have with construct.

Construct sometimes points to totally different things with the same name.

By instance.
It names every new sprite that you bring into the layout default as sprite1, sprite2, sprite3 ....
I think that should be object1, object2, object3 and so on ...

Why ?

Well a sprite is no more then 1 property of an object. Lets say the objects face.
And just we can tween the properties "x" of an object ,
we can tween the properties "sprite" of and object.
Then we have an animation.
A sprite is then also 1 frame of the animation.

I can not handle a sprite and an object being called a "sprite". Because thats difficult to think with.
And its difficult to explain. And trying so will lead to confusing.

The same for conditions.

A condition works like this.

When you go to lets say a 6 flags park. And you want to ride on the roller coaster.
There will be a guy with a measuring wood.
If you are smaller then the wood, you can not ride.
If you are bigger then the wood, you are allowed to ride.

Thats a conditions.
Its true or not true.
If its true it allows its sub-events and actions to run.
If its not true, the actions and sub-events will be skipped from execution in that tick.

Now the conditions that pick objects do not act like this.
They are totally different.
And in base this is why i at first could not understand them.

Two totally different things named the same way "conditions".
I can not explain this, not to myself (think with them), not to you.

There for i call them pick-conditions.

A pick condition basically filters out objects,
and will pass the filtered object to its sub-events and actions.
The sub-events and actions will only run on the passed objects.

Now lets see this in action.

Hope you still have the layout i provided with the 8 darts. Else open it in construct.

Bring yourself to the events editor.

Add an system flow condition "always"
Add a sub-event to this event ...

The wizard pops up .. and lets go trough the steps.

Step1: choose object "dart"

Step2: choose the condition "compare Y position"

Step3: the parameters: choose "greater then" in comparison and put 200 in Y co ordinate.

click finish.

ad an action to the sub-event "greater then"

there is the action wizzard

step1: choose dart as object (this will be the "self" object)

step2: as action choose "set angel"

step3: the parameters: fill in .angle + 2

click finish.

the events should look like

run all ... and see what happens.

Only the bottom line darts rotates.

How ?

Well its a pick-condition.

The pick-conditions takes the object we choose in step1 of the events wizard and all its instances.
Then it will filter out all the instances that do not meet the filter condition.
In this case all the instances that who's Y is not greater then 200.
Or to say it different,
Only the instances who's y is bigger then 200 will reach the sub-events and actions.
All the instances on the bottom row have an Y greater then 200.
So the action to rotate will only rotate those instances.

Ha !

Now let me introduce you to another awesome feature in construct.
lets inverse the pick-condition.

to do this, right click on the condition, remember the C-spot ?
And choose "inverse condition" from the contextual menu.

now run all again.

and ?

only the top row will rotate.

lets Narrow the filter by adding an additional pick-condition.

Right click the condition, not the event, remember the C-spot ?
Choose add condition from the contextual menu.

step1: choose dart as object

step2: compare X position as action

Step3: the parameters: choose "greater then" in comparison and put 330 in X co ordinate.


its looks like this

Run all

And now only 1 dart is rotating !!

What did we do ?

Well the first pick-condition takes all instances of the dart.
Its filters out all the instances with Y bigger then 200. (we inverted the condition)
Wich is the upper row darts.

the result of this filter goes trough the second pick-condition.
This pick-condition filters out all instances who's X is smaller then 330.

Only one instance escapes that filter.

Now the actions and sub-events will only run on this instance.

Notice also that we now have an event thats build with 2 conditions.

Hope this was a help for you.

Next post will be about private variables, pick objects based on a private variable, and another very basic movement but done by events.
Posts: 322
Reputation: 2,119

Post » Sun Jun 15, 2008 10:25 pm


There are 4 kinds of variables.

1/ the properties. We can tween the properties. That makes them variables. We can change the angle of an object. We can change its sprite. Its X. its Y. And other properties. There are properties that we can not change, like the unique ID of an object.

2/ the behavior properties. Like the gravity of the physics behavior. The speed of the bullet.
The track object in the turret. And many more.

3/ there are global variables.

4/ there are private variables.

Forget 1 and 2 for this moment.

Global variables i will mostly use as flow-variables. Remember flow-conditions ? more about this later.

Private variables have 2 functions.
The first and obvious function is to store/retrieve a variable related to a specific object.
And this said, its second function is to give an object an identity, a passport.

And there is 1 really big difference between global and private variables.

When restarting the layout the global variables keep there values,
While the private variables return to there initial state.

at least i think think so, i better check this out tomorrow to be sure.

Its bed time anyway, have a nice day.
Posts: 322
Reputation: 2,119

Post » Mon Jun 16, 2008 5:41 pm

Yup, i was right.
A private variable is in base no more then an object properties.

All properties will return to there initial state, including the private variables,
when calling/ recalling a layout.

This means when u have to choose to use a private or a global variable,
and the value stored in the variable has to survive layout changes ...
then you can only use a global variable.

For the rest you are free, just keep in mind if you destroy an object,
you also destroy its private variables.

Me, myself, i will only use global variables when then they represent a value used
in flow condition, or indeed when they have to survive layout changes.

Concrete: If you want the score to be "global" over all layouts, you have to use a global variable.

But lets concentrate now on the private variables.
Posts: 322
Reputation: 2,119

Post » Mon Jun 16, 2008 6:50 pm

The real actor in this is "The Value".

Examples of values are: the score, lives, level, health, damage ..... etc.

The value can be a number or a text.

In order to store and retrieve those values, we need a special place that remembers them,
and a way to address them.

When we store the values in a variable belonging to an object. We call it a "private variable"

Private Variables in Construct get addressed by there object and there name.

First we need to create this special place, and that can be done in 2 ways.

Bring up the .cap with the darts i provided, or download it again from previous post.

way 1:

bring yourself to the layout editor.
Select any of the darts ...
locate "Private variables" in the properties pane. Uncollapse it.
Click add to add a new one.

A window "manage private variables" will pop up.

click on the green + to add one.
name it Xstep
keep the type op op number
and let it keep the value zero.

Check on errors before you click "done"

And thats it.
Select the other darts .. and notice that they now all have this private variable added.

They are instances of the same object. If you add/delete a variable in 1 instance ...
it will be added/deleted in all instances. Handy though.

So that was the first way.

Second way.

Go to the Events Editor.

Click on the "New action"
The wizard shows up.

Step1: self object = dart
Step2: action = set value (yes the actor in this is a value)
Step3: the parameters ... under "private variable" you will find a drop down menu.
Notice that Xstep is allready present.
There is also <..add new..>

just select "add new" and you get the same "manage variables" window.
make one with the name "Ystep"
and value = zero
click done and finish.

That was the second way.

Construct will not let you unneeded run from layout editor to events editor and back and forth.
For the same reason, the properties plane is visible in both editors.
Handy though ?

Ok now the dart object has 2 private variables. Xstep and Ystep

We can store a different values in each instance.
As i said before this will give a instance an identity too.

You can store by events, and you can store in the layout editor.

Go to the layout editor.

Give Ystep of the second dart in the upper row the value -1 (negative one) by changing it in the properties plane.

Give Ystep of the third dart on the bottom row the value 1 (just one)

Now lets isolate those 2 based on there private variables and do an action on them

Go to the events editor.

Delete all events in there, and all actions. There is at least the action from making the Ystep.
And maybe you have auto save on and there will be the events from last session.

Add a system flow condition "always"
Add a sub event

step1: self object = dart
step2: action = compare a private variable
step3: parameters .. Ystep as variable .. greater then as comparison .. 0 as value


we just retrieved a private variable btw

Add an action to this condition that rotates the dart by .angle + 1
(re-read previous post if you forgot how to)

Now lets save us a lot typing. And do what computers are made for. Copy and paste.

Select the sub event. (click the E-spot, member ?) The whole tree of the sub event will be selected.

Press CTRL+c, Press CTRL+v.

A copy of the sub event will appear.
And more important: Its all ready a sub event on the right place.
And on top, the action followed in the copy.

Handy no ?

Now double click the compare condition (C-spot, member ?) ..
The wizard will come up to allow you to edit the condition.
Just change the "greater then" to "less then" .. and finish.

Change the .angle + 1 in the action to .angle -1

As you see, construct has some great edit functions, but you do have to find them.

Run all, and see that we picked instances based on there private variables.

You dont feel the love for construct yet ?
Posts: 322
Reputation: 2,119

Post » Mon Jun 16, 2008 8:00 pm

OK, its time to take a dive into "expressions".

Expressions are no more then variables used in math. Like.

X + 6
Y * x
Y -5

Where x and y stand for variables. Private or global. But also object properties and behavior properties.

Ashley made a document about expressions here:

But lets access expressions, and show you the ease of use.

Bring up again the .cap with the darts. Clean it from all events and actions.

Go to the layout editor.

Lets give the darts numbers.

Dart 1 is the top left dart. 2 is second in the same row .. 3 is next in same row .. 4 is last in same row .. 5 is first on the bottom row .. 6 is next in bottom row . and so on ..

Give the private variables Xstep and Ystep for each numbered dart the follow values.

dart 1
Xstep = -1
Ystep= 1

dart 2
Xstep = 0
Ystep = -1

dart 3
Xstep = 0
Ystep = -1

dart 4
Xstep = 1
Ystep = 0

dart 5
Xstep = -1
Ystep = 0

dart 6
Xstep = 0
Ystep = 1

dart 7
Xstep = 0
Ystep = 1

dart 8
Xstep = 1
Ystep = 0

Ah yes, it also an exercise in selecting, locating, getting along with the properties pane. Sorry ?

OK !

Select any dart, so its properties plane is displayed.

Now go to the events editor.
Make sure its empty.

Add a system flow condition "always"
Add a sub event "always"

add an action to the sub event ..

Step1: dart = the self object
Step2: as action choose "set X"

Step3: take a look at the parameter window ..

And especially the lower part, where the objects are listed again.

Click in the X field (thats where we want the expression to appear)


Double click dart in that list and a whole new world of expressions will open itself to you.
Full with properties and variables that you can access and use.

look for the "private variable" entry.

double click "get private variable", the expressions guide will disappear ...

and in the parameters (the step3 in the action wizard) will come back.

This time filled in with the expression.

dart.Value('Variable name') ???

Yes thats the call to a private variable. As i said, private variables get called with there object and name.

the name you can still find on the left plane.
I asked u to select any dart before opening the events editor.
every little help is welcom.

So fill in its name .. and leave the ''s

( "uhhh"= a string, 'uhhh'= a variable)

so yo get


Construct will not allow you to make an error here, if you just give good names, it should be easy.


Now copy the action by CTRL dragging it under itself. A black line will mark its future position.

Double click the copied action.

The action wizard will come up allowing you to change the action.
As you see, we always land in step3 of the wizard, the window with the arguments.

But, we want to keep the arguments, partly, but change the action to "set Y" instead of "set X".
Just click "back"
Now we are in step 2 ...
As action choose "set Y"
click next ..
The expression will be still there.
Another perfect editing option offered by construct.
Just change the Xstep to Ystep in the expression .. and click finish.

Run all ...

And look what we did with just 2 actions using an expression.
Nice eh ?

And here i sneaked in another basic movement.
Animate X and Y values of an object over time by setting them in events : )

next post is briefly about Global variables ... and then we will make a simple game to bring in practice what we learned so far.
Posts: 322
Reputation: 2,119

Post » Mon Jun 16, 2008 8:29 pm

Global variables are pretty the same as private variables.

Only they are carried by the system object.
In base they are just a private variable of the system object.

Create a place to store global variables can also be done in two ways.

Make a new Direct X game. We do not need any objects to show global variables.
And the system object is added moment you create a new direct X game.


Click on project in the top menu.
The ribbon will change to project related buttons.
Click on the big button labeled "manage variables" ..
And from there its the same as "private variables"


Go to the events editor.
Add a system flow condition.

step1: base object = system
step2: condition = compare global variable
step3: the parameters = pretty the same as private variables

a global variable is the same as doing so with a private variable.
The only difference is that you start any action or event with the system object.
Since the system object is holding the Global variables.
Posts: 322
Reputation: 2,119

Post » Mon Jun 16, 2008 8:38 pm

Sprites that i will use in the next post.

Posts: 322
Reputation: 2,119


Return to Your tutorials & example files

Who is online

Users browsing this forum: No registered users and 0 guests