Post your own tutorials, guides and demos.

Post » Sat Jun 14, 2008 2:17 pm

After reading

I suddenly realize that there are people who are *more a starter* then i am.
I still consider myself a absolute beginner.
And stated this, i can be legally present in my own topic.

Next month i will try to expose what i learned. (and learn more English, so wishfull).
I dont know if i can keep feeding this post, but i sure will try.

I hope to help new people.
So please, new readers, make an account to the forums,
and let me know if i am doing a little ok or not.
And do not be shy with using bad English, as you see mine is beneath any level anyway.

Also, please do the "ghost shooter" tutorial. All the basics are nicely explained in the tutorial.

Lets start with .................
Nothing at all.

Open up construct.

When Construct brings up its user interface, there is totally nothing we can do.
First we have to tell it the kind of program that we are going to *construct*.

Click top menu "file" / "new" / "new direct-X game".

The first thing you notice is a white canvas. Later we will place objects on this canvas.
The canvas + objects + layers together make up a "Layout".
The *user interface* that you are looking at now is the "Layout Editor".

I not gonna start with explaining the "Layout Editor".
There is so much more that i want to tell you first.

Notice this on the left bottom:

As you see there is a TAB for the "Layout Editor".
And another TAB for the "Event Sheet Editor"

Click on the TAB "Event Sheet Editor".

And again you look at an empty white square.
On top it states "Right Click to begin"

And that is exactly where my next post will start.

Simply stated you can say:

In the "Layout editor" we will place objects.
In the "Event Sheet Editor" we will make the objects do things.

(that statement is not 100% correct, but for now it will do)
Posts: 322
Reputation: 2,119

Post » Sat Jun 14, 2008 3:45 pm

To continue.

You might think. We did not add anything so far. Everything is empty.
This is not really true.

Lets discover 2 important things in 1 click.
How to add an event and the system object.

Right click anywhere in the empty event sheet editor.
A context menu will pop up.

Choose "insert event".

And the "events wizard" will show up.

The events wizard will guide you in building complicated events with just a few clicks of the mouse.
It will do this in steps.

In the first step the wizard will always show a list with available objects and order you to choose one.

At this moment there is only 1 object available.
The system object.
It is a very important object since it handles system related events.

Select "system" and the "next" button will not longer be ghosted.
Clicking "next" will take you to the next step.

In this step the wizard will list up all "conditions" for the chosen object, and it orders you to choose one.

Play around some.
Double click a condition to bring its window up (basically the next step).
Look at the windows.
Click back to look at another condition.
But do not click "finish" yet.

Now lets point out a very important something when you are done playing.

As you can see there are two sorts of events.
Those that ask you again for an object to pick.
And those that dont.

Those that dont pick objects i will later refer to as "Flow events"
Those that do pick objects i will later refer to as "Pick events"

Notice also the bottom part of each window. The real power of construct lays in there.
Here you find the guide to construct "Expressions".
But that is not for this post.

At this point, you can not make a "Pick event", because we did not add any object to pick yet.

So lets make a "Flow event" to complete this *tutorial* (if this is a tutorial for you)

Click "back" till you are back on the wizard asking you to pick a condition.

Scroll till you find "Every X milliseconds"

Double click it to take the wizard to the next step.

Keep the 1000 for now. (1000 = 1 second). Click finish, to finish and exit the wizard.

You successfully added an "event" to the "events sheet".

This event will run its actions every 1 second. But actions are for later.
First lets talk some more about events, conditions and sub-events.

And thats for the next post.

To resume about the events wizard.

Every event always starts from an object.

Thats why the wizard in its first step presents you a list with the available objects.
In the second step the wizard will ask you to choose a condition.
In the 3th step the wizard presents you the options for that condition.
And it is here that you find the difference between a "flow event" and a "pick event"
Posts: 322
Reputation: 2,119

Post » Sat Jun 14, 2008 5:22 pm

To share info with each other, we need a language.
A language is in base using the things by there names, and agreeing its named that way.

So lets name a few things, so we can talk about them.

In the last post we ended up here:

Now imagine you have a few hundreds of those lines,
and there will be a noticeable vertical line.

Everything on the left are Events.
Everything on the right are Actions.

Events are build with Conditions. Each new line in an event is a Condition.

Every event can have sub-events.

A sub event is also build with conditions.

An event and its sub events make up a "block of events" or a tree

All together now in one illustration.

Posts: 322
Reputation: 2,119

Post » Sat Jun 14, 2008 6:47 pm

Was it Newton who said something like "give me an immovable point in space and i can lift earth up" ?


Tell me where to click, and i can move everything around.

Yes sir, constructs events editor is very flexible. Its not really consistent yet. But flexible it is.
You have to know where to click.

Lets start over, and now to some point without illustrations.

Fire up Construct.
Make a new direct X game.
Bring yourself to the events sheet editor.

Add a new event. (bring up the events wizard)

Base object is the system object.
Choose the condition " for "
and as options fill in this, exactly as shown.

Click "finish" and the events sheet will look like this:

That is 1 event build with 1 condition.

Now how do we select the event ? and how to we select the condition ?

Lets define just for this moment two spots. The E-spot and the C-spot. No there is no G.

The E-spot.

Clicking on that place will select the event. And you will notice the yellow color to indicate so.

The C-spot

Clicking on that position will select the Condition indicated by a different yellow color.

Now lets make a subevent.

Right click the E-spot. Choose "insert sub-event".
The event wizard pops up.
Add a system object event "always"

The result will be like this:

Copy An event.

Click on the E-spot of the event, to select the event. U will notice that the whole event tree gets selected.

Press CTRL+c to copy.
Press CTRL+v to paste.

Now you have 2 events.

Another convenient way to copy an event is this way :

press de CTRL key.
left click on the E-spot, do not release the mouse
drag de event up or down
a black line will show where in the tree the event will be copied

Copy a Condition ?

All the same, just click the C-spot to select the condition.
and copy past, or CTRL + drag the condition where you want it to be copied.

Of course this E-spot and C-spot thing i only made up to show you where to click to select different things.
They do not really exist.

Delete an condition ?

Click the C-spot of the condition, end press the "DEL" button on your keyboard.
Or right click the C-spot, and choose delete condition from the contextual menu.
You will notice there is also "delete event". Yes an condition is part of an event.

Delete an event ?

Its all the same, just select on the E-spot.
But watch it !!!

Deleting an event will delete its whole tree,
including all actions and sub events.

If you dont want the sub-events to be deleted, then you first have to move them out of the tree.

Move an event ?

Click the E-spot and drag it around. A black line will show the position in the tree where the event will end up.

Move a condition ?

Click the C-spot and drag the condition around.

EDIT an event ?

If you Right click the E-spot, there will be no edit event entry.
That of course makes sense.

Edit a condition ?

Or double click the condition on its C-spot, this will bring up the events wizard to change the event.
Or right its C-spot to choose "edit condition" from the contextual menu. This also will bring up the events wizard to edit the event.

It is also possible to edit a part of a condition without bringing up the events wizard.
In our example we have an event like
For "TheLoop" from 1 to 10

you can double click on the "1" to change it directly to another value

Play around with this.
I guess you understand why we did not make any code that makes sense yet.
Posts: 322
Reputation: 2,119

Post » Sat Jun 14, 2008 7:02 pm

Now you ask:

Why not talk about the actions ?

Well we did not add a object yet to "do" something with?
Actions are "do" things. They are pretty straight forward.

And they will be clear to you while we do things.

So well lets start eh ?
Start with adding an object to the layout.
Posts: 322
Reputation: 2,119

Post » Sat Jun 14, 2008 8:08 pm

Sir, you're my new hero. Thats very kind of you to put all those tut for the newb' like me :D
Posts: 114
Reputation: 1,678

Post » Sat Jun 14, 2008 8:10 pm

And again we start over.

Fire up construct.
Make a new direct X game.
Bring yourself to the Layout Editor.

You find yourself on a white Canvas.

On the Left you see the Layout Properties. Width 640 (pixels). Height 480 (pixels)
That are the dimensions of the white square.
The dimensions of the Layout.

When we run the game. We will look at this layout trough a window.
Click under the layout properties on "application properties".

And see the window dimensions of the application.
At the moment they are also 640 x 480 pixels.
Which means: The whole layout will be visible when running the game.

I will always try to sneak in some general info at certain points.

But back to topic.
Ad an object to the layout.

Double click on an empty place in the layout. The Object wizard will pop up.

There are many objects. And to be honest i only used like 10% of them so far.
So dont be worried about the amount of objects.

For now choose the "text" object. Double click it.
The object wizard disappears.
You are trowed back in the layout.
The cursor is now a cross hair.

Click a place in the layout where you want the text object to be.
And there it is.

Select the object and move and scale it till it looks like this ..

Check the bold properties on the left.

And, IMPORTANT, give the object a name. Name it "Hello".
On the left uncollapse the common properties. They are on top.
Locate the name, and change the name.

ALWAYS do this !!!!

Now click the Events Sheet Editor TAB on the bottom.

Add a system event "always"

Add a sub-event "always"

so it looks like this ...

whats is "always" ?

Its a system "flow-condition".
It will run any sub-events and action when the condition "always" is met.
In other words, they run always.

Why 2 times always ?

In my eyes it is a good practice to start an event with a "flow-condition".
The first "always" condition we will change at one point in developing the game to a real condition.
The second "always" is to give structure to the events, keep it readable, and easy editable.

now click on the "+ new action" behind the second "always".

This will pop up the Action Wizard !!!
Ohhh another wizard. Ah yes. Its the best way to make actions with a few mouse clicks, in a way that the user gets constructive guided in constructing.

And it acts the same as the Events Editor.

It starts with showing the list of objects. And asking you to choose one.
The "Hello" object is listed there.
Choose it, double click it or press "next"
Just as the events wizard showed all conditions for an object ..
the action wizard shows all action that you can do with this object.
And thats like all you can do with it.

For now choose "Set Text" from the list ..
double click it , or click the "next" button to advance ..

this brings the "parameters" for this action to you ...

under text to display write exactly this .. including the brackets ..

Click finish.

Now in the top menu, click on project.

The Ribbon should change to project related things. Click "run all"

An application window pops up, running your game.

Every tutorial to a programming language starts with a "hello world" tutorial.
Usually you learn all the basics with a few "hello world" lines.

And yes this you did.

Next post will be about moving and stopping objects. And the first steps in behaviours.
Posts: 322
Reputation: 2,119

Post » Sat Jun 14, 2008 10:09 pm

Ok now lets move things.

The most easy way to move things is using the build in behaviors.

So lets start over again.

Fire up construct.
Make a new direct X game.
Bring yourself to the layout editor.

Add and the box object.

(double click an empty place, choose box from the objects list, click to place it in the layout)

Now you have a rectangle with green borders.

Select the box.

On the left under properties uncheck the "transparent fill"
Click on the black square behind the "fill".
A drop down menu will appear.
Choose red as color.

Uncollapse "common" and name it "Bug"

There that is the object that we gonna move.

Now lets add a behavior that makes it move.

Still with Bug selected, on the left properties pane, uncollapse "behaviors", and click on "new behavior add"

A list with behaviors will pop up.

Choose bullet from the list.

The Behavior bullet will show up in Bugs properties. For now let all the values as they are.

Position Bug close to the left edge of the layout.

Click the Events Sheet editor TAB on bottom left.
This brings you to the Events Editor.

Notice that there are NO events. And yet.

Click on the project menu. Click Run all in the Ribbon.
And watch Bug move from left to right.

Easy no ?

Now lets add one events to control Bug.

But before we do something about the Bullet behavior.
The Bullet behavior moves an object with the speed You gave it (in this case 250).
And in the direction it is facing.

Go back to the layout editor and lets check this.
Select bug .. and ...

You find the speed in the Behavior Properties.
The angles it is facing you find under Common. At this moment that is an angle of zero degrees.

NOTE: An Angle of 0 degrees is facing horizontal to the right of your screen. Remember this !

Take a look at the X and y position of Bug under common.
Move Bug to the corners of the layout and see the x and y update.

NOTE: The point where where x = 0 and y = 0 is on the left top corner of the layout. Remember this.

For now edit the x, y and angle values.
make x 300
make y 440
make angle 270

bug will update to its new positions and angle.

changing the angle to 270 will face the object Bug Upwards.

Run all, and u will see that bug will move upwards.

In other words, to change bug's move direction, all we have to do is change its angle.

Lets use this in an event.

First, change the "destroy when" under the bullet behavior to "never".
(dont forget to select the Bug in the layout)

Bring yourself to the events editor.

Add an event from the system object "always"
Add an sub-event from the Bug object

(right click the E-spot of the always event, choose add sub-event, choose Bug to start from)

When you are confronted with the events wizard asking you to choose a condition ..
notice there is a second tab now

For now we will not use it, so click on the bug tab.
Look for "Object is outside layout?"
Click finish.

Again this is a "flow-condition"
When the condition "is the object out of layout" is true,
every sub-event and action attached to this event will be executed.

Add an action to the "is outside layout event" ..

Choose the bug as object to start from ..
Choose "set angle" as action
and in the angle parameters window
fill in .angle - 180

click finish

Strictly .angle - 180 is an expression.
But since we are not at the point to explain expressions in depth,
i keep the it simple.

.angle refers to the angle of the object that you choose in the first step of the action wizard.
Also named "self"

bug.angle is in this case the same, since you started the action off by choosing bug.

you can also use

self.angle .... but thats a lot of typing .. this why u can shorten it to just .angle

so .angle = its own angle
.angle - 180 = turn the object to opposite direction

you should now have this in the events sheet

How to read this ?

When we run this ...

The bullet behavior will move Bug in the direction its facing with a given speed.

The events will first come to the "always" event.

That is a system "flow condition". It will always run the sub-events and actions attached to it ..

so next is the "is outside layout" sub-event.

This condition will run the action only if bug is outside the layout.

In this case the action is = .angle - 180 = reverse the direction Bug is facing to.

next will be again the "always" event.

and so on ....

Construct events run top-down and in a loop that never" stops.

"Run all" to see what we made so far.

And now for me it is bedtime, have a nice day.
Posts: 322
Reputation: 2,119

Post » Sun Jun 15, 2008 9:24 am

Now i mentioned the "top-down" execution, i should first introduce you to "Always"'s sister.

The "trigger once while true" system flow condition.

Lets repeat the top-down principle again.
And imagine mister Executor. The little Japanese that runs it all. So ....

When we Run the game.
The executor looks at the first event.
If its true, he will run all sub-events and actions.
If its not true it jumps to the next event.
and so on ...
After the last event,
it returns to the first event.
In a never ending Loop.

The time the Executor takes to run the Events Sheet Only Once we call "1 tick".
How many times the Events sheet gets executed / second depends on the speed of your computer, or the ticks/second

This means ...

When we bring a the system flow condition "always" in the events sheet,
It will run its sub-events and actions every tick !!

If the action creates an object .. in a few seconds we have hundreds of this object.

To solve this, "always" has a sister.
the system flow condition "trigger once while true"

You will always use this ..
or as the last condition in a event,
or as a sub-event.

It can not be used as the only condition in a event.

Why ?

Because it states:

Run this action or sub event when the above conditions are met, but only once !!

So the right syntax to use "trigger once" is this way.

next post will be about the next basic movement: rotation.
Posts: 322
Reputation: 2,119

Post » Sun Jun 15, 2008 5:34 pm

3 sprites that i will use in the next post ..


First dishes, my god, 6 guests can make some dishes mess.
Posts: 322
Reputation: 2,119


Return to Your tutorials & example files

Who is online

Users browsing this forum: No registered users and 1 guest