Post your own tutorials, guides and demos.

Post » Mon Jun 16, 2008 9:31 pm

I will not finish this today, its almost bed time.

But lets give it a start.

Making a game starts with planning it. We gonna make a simple Snake game.

Make a new direct X game.

Goto to events editor.

1/ Add a system flow event "start of layout"
2/ right click on an empty space, and add "insert comment" from the contextual menu.
type "keyboard input" in the comment
3/ Add a system flow event "always"
4/ Add a comment "move head"
5/ CTRL drag the first always to copy it at the end of the events. Be carefully to not make it a sub event of the comment !
5/ Add a comment "move body"
6/ copy an always
7/ add a comment "eat"
8/ copy an always
9/ add a comment "grow body"
10/ copy an always
11/ add a comment "dead"
12/ copy an always
13/ add a comment "restart"
14/ copy an always

It should look like this.

I strongly advise you to plan every project this way.
Some of the events we planned here will meld together ..
others will split.

We dont know that yet. We will see where the process of constructing brings us.

But let me ask you again. Write what you have in your head regarding the game down.
And make a planning like i just did. It will save you a lot of time.

Save this, i will continue tomorrow.
But maybe, after i slept and worked my job, you have done the game already all by yourself.
There will be only 1 new pick condition that we did not use so far.

Have a nice day
Posts: 322
Reputation: 2,119

Post » Tue Jun 17, 2008 5:06 pm

Most people start out constructing with
setting up the unmovable part of the environment of the game
that interacts with "the player", in the layout editor.

Say that again ?

The environment that interacts with the player, as there are ...
a maze (like in pac-man)
a platform (like in Donkey Kong)
grass, buildings, rivers (like in rts games)

Then they start exploring and coding the sensors/dedectors.
Those are like the eyes of the player object to sense the environment.

Then they attach the player object to the sensors.

Then they explore/code the other objects that move, like monsters, enemys, moving deadtraps ....
Artificial intelligence ...

Then they do things as score, layout changes, level changes, dead situations .....

Thats a very rough description, every game is different.

Our game is simple.

Its environment is no more then 1 sprite. And none of the moving objects will interact with it. Its just a visual grid, that helps the player to orientate.

So, or do the things explained in the previous post, or if you did this already and saved it ...
bring it up in construct.

Add a sprite, and choose "raster.png" from the sprites that i provided.

Name it, and for once you are free in what name you use.
Position it at exact x = 320 and y= 240.
Give it an opacity of 5%

And that is all that we will do with this object.
So lets lock it away, so we can not accidental move it, not even select it, thats annoying anyway.
To do this ..
Select it, right click and choose under hide/lock .. "lock selection".
You can try to select it now, and you cant no more.

Also, we will not use this object in events, and not in actions. So lets hide it for the wizards.
This keeps the list of objects small in the wizards. And thats a real time boost in developing a game.

To do this,
untoggle "show in editors" under the common properties.

Thats our environment. I said it would be a simple game.

We do not need sensors for this game. I will explain sensors in depth later. Thats a promiss.
Posts: 322
Reputation: 2,119

Post » Tue Jun 17, 2008 6:18 pm

blahhhhhhhhhhh .. it logged me out before post was done .. got to type it all over
Posts: 322
Reputation: 2,119

Post » Tue Jun 17, 2008 7:03 pm


** growwwling at myself for not copying the text before posting as i always do ***

Lets add the main actor. The snakes Head. But before we do that,
there is a question to answer.

What Z-order will the snakes head flow trough the game ?

Z-order is no more then then this :
When 2 object overlap ? which object will show in front of the other?
The object that shows in front has the highest Z-order.
Thats all !

We want the Head to move in front of almost every other object.

This can be simple accomplished by using Layers.

I introduced u already to the left properties plane. Now let me introduce you to the right organize plane. The right plane is to organize things.

This if you still have construct in the original interface layouts.

On the right you find TABS for:

Project: to organize the layouts and there event sheets.
Animator: to organize sprites into animations.
Resources: to organize application specific resources.
Layers: to organize .. well .. layers and there objects ... and easy Z-orders.

If one of those is not showing, then simply activate by clicking Home in the top menu, and the button on the ribbon for the missing organizer.

Note: layers have an internal Z-order too, but i am not gonna go there at this moment.

Click the Tab "layers".

The layer pane has 3 parts. On top the layers and there commands. On bottom a list of the objects.
And in the middle a filter to show certain objects in function to the selected layer.

We have only one layer so far. And on that layer *lays* the grid object.

Lets add another layer. Click the green up arrow on top.

The up arrow adds a layer a layer on top of all the existing layers. Easy as that.

The Z-order of the layers is "top - down". The higher positioned layer will be in front of all underlaying layers.

Select the top layer.

Add the sprite "dot.png" to the layout. It will be automatically placed on the selected layer.
In this case the top layer. So it will always display on top of other objects.

TIP: If you plan to make hundreds of objects in a big project with many many layers. Then immediately add a private variable to every object you bring into a layer. Name it like "Z-order" and give it as initial value the number of the layer. Now we do not have to remember what layer the object is when we spawn it in events. And it will be such a big help when we copy/past events to "lazy edit" them as base for the next event. : )

OK, back to the head. Name it Head. Always name your objects.
Place it in the middle of the layout.
Then edit the X and Y in the properties, so they end on a 5.
Thats in the middle of our 10 based grid.
X = 325 will do, Y = 235 will do.

The head will move according keys pressed by the player.
On arrow up key pressed the Head needs to move up. Same for left, right and down keys pressed.

To use the keyboard this way, we need an additional object.

Double click an empty place to add an object, and choose "mouse & keyboard" from the "new objects" wizard. A flashing message will confirm that it is added.

Dont look for it in the layout. It is a faceless object. Its has no sprite attached, just like the system object. You can see it in the layers pane on the right though.
Posts: 322
Reputation: 2,119

Post » Tue Jun 17, 2008 7:36 pm

I just could tell you what to do without trial and error.

But, ahhhh thats boring. So lets error and distillate little lessons out the errors.

Time to dive in the events editor. You should have the structure with comments and "always" events.
If not, then go back and do it. Takes one minute.

Now double click the "always" condition (C-spot) under the "keyboard" comment.
The events wizard shows up.

Click back to the first step of the wizard. This is what i call "lazy editing".

Step1: object = mouse & keyboard
Step2: condition = on key pressed
step3: parameters: click under "key" to access the drop down menu with keys. Choose "right arrow"


Add an action to this.

Step1: self object = Head
Step2: action = Set X
Step3: parameters = .x + 10 (respect the spaces, and do not forget the dot)

set x position of self + 10 pixels, every time the player will press the right arrow key

Run it, and try it out.

Yes that movement is right. But. Hmmm.
A snake in a snake game keeps moving, and will change direction according the pressed key.

This snake will stop moving when no arrow key is pressed.

Well then we are taking the wrong approach. No disaster.

Lets rethink this.

This means we need 2 events.

One to keep moving the Head.
One to catch Keys pressed and feed the changes to the directions of the head.

To do this we will need to store the keystrokes in a variable.

Or, we feed the X and Y of the head from a variable, changed according the directions by the keystrokes.

Lets choose for the last option.

But ? what kind of variable .. private ? or Global. And if private, which object its gonna hold it ?

Answers and theory in next post.
Posts: 322
Reputation: 2,119

Post » Tue Jun 17, 2008 8:01 pm

Carefully choose how to store your variables is half way the game.

So lets point a few things out.

The snake will have only 1 head. We do not have to deal with instance having each a different X and Y. So we could use a global variable.


Global variables do not reset when recalling the layout. And we will offer the player when he dies, to replay the game. And thats no more then recalling the layout.

I do not want to worry about resetting those variables. So Private it will be.

Now is the Question, which object is gonna hold this private variable ?

The snakes head? The sprite for the snakes head is a black dot. The body sprites will have the same sprite.

A small version of the sprites, thumbnails, will be present in the events. Adding to readability.
But if every call to a variable will be presented with a black dot. Thats too much of the same,
and certainly not adding to the readability of the event sheet.

In fact this is true for every game/project. I like my events to read nice. There for i will bring in different objects just to group, organize and store certain private variables. Those objects will have eye catching sprites, just to improve readability of the events.

There is a perfect sprite for that purpose in here


download, decompress somewhere handy.

Many times people told me, thats a wasted object.

An object that brings law and order is never a wasted object.
Posts: 322
Reputation: 2,119

Post » Tue Jun 17, 2008 9:01 pm

Add the sprite "info" from the last posted file.

Place it outside the canvas of the layout.
Name it "Vault". Size it if you feel its to big.

add 2 private variables to it

X_head, number, 0
Y_head, number, 0

Now we are set to take a new start.

back to the events editor.

Double click the action. Click back till we are in the first wizard step. (lazy editing :) )

step1: self object = Vault
step2: action = set value
step3:parameters .. private variable = X_head .. value = 10


You see the eye catching thumbnail ? Much better then a black dot.

now we "lazy edit" some more

CTRL + drag the action under itself to copy it. I do advice to not use copy / paste short keys in present version of construct when dealing with actions. Sometimes the copy shows up on a random place in the events. If you have all events but the one you work on collapsed, then suddenly your
game is messed up, and u dont know why. Using CTRL dragging to copy actions.

double click the copy.

we land allready in step3.
change X_head to Y_head
change value 10 to 0


Lazy but fast. And more of this.

Select the on key event. (line 2 in the sheet). The event, not the condition. (E-spot)
They whole tree will go selected.
press CTRL+c, press CTRL+v

Now we have a copy of the event, including the actions.

Double click the condition in the copied event. Automatically we land in step3 in the wizard.

Change the right arrow to left arrow.

Change the X_head value directly in the action line, by clicking the value 10.
Change it to - 10
The value stored in Y-head stays the same 0.

Do the same for up and down arrow keys. (copy event, change condition, change values)

the values for the up arrow will be
X_head 0
Y_head -10

the values for the down arrow will be
X_head 0
Y_head 10

Do you see how fast you can code ? make events ? edit events in construct ?
This is another reason why i like it so much.

Now we translated directions, given by a key, directly to X and Y changes.
All we have to do know is move the head's position + the changes

right click the always event under the "move head" comment.

Add an "always" sub event.

give the sub event an action.

step1: self object = head
step2: action = set X
step3: parameters ... click the vault object in the expressions guide .. click the expression "get private variable" ... change the 'Variable name' to 'X_head' ..
so its Vault.Value('X_head')
add .X + in front of that .. so it is

.X + Vault.Value('X_head')


note to ashley : it would be nice if the wizard preselects the Variable name, would be very nice.

Copy the action.
Double click the copy

Click back to step 2 of the wizard. Select "Set Y" as action.
Click next. The expression is still there, just change X_head to Y_head and .X to .Y

And we can run and test.

Hey that works. But OMG, that snake is fast.

Lets slow it down.

Double Click the TOP "always" condition in the event that moves the Head.

it brings up the events wizard.
click back to step 2 of it.
step2: Choose "every X milliseconds as" condition
step3: change the default value 1000 to 100 (hundred)

DO you Understand NOW why i want you to open each tree of events with a "always" condition ?
Its easier to edit, organize 1 condition, then to add a level of events to a tree.
And the structure stays correct.

run all .. and ..

is this better ?

there is something else to solve though.
Posts: 322
Reputation: 2,119

Post » Tue Jun 17, 2008 9:25 pm

Yes there is something to solve, but we do that after we made a body for the snake.

But before we go there, i have something so say.
About the key input events, or and mouse input events.

We have them now nicely added, visible, and easy accessible on top of the events sheet.

Thats a good practice.

Do not attach conditions to user inputs. How faster the game reacts on user input, how faster it feels.

Do not not bury the user inputs deep in a event tree. For the same reason, and also for another reason.

If you share .caps in here. Then remind that there are left handed and right handed people.
Usually you do not share complete games here. Including options for changing keys.
Mostly they lack instructions on how to play the game, which keys to use.

Most left handed people i see use the AQSD keys in stead of the arrow keys. Its handier for them.
Do not act as u are alone on the world. Make the user inputs clear and visible, readable and editable.

So anyone you share .caps with in here, can easy read what keys are used for, and edit them according there needs.

there ! .. now lets give the head a body. But that is for tomorrow.
Posts: 322
Reputation: 2,119

Post » Wed Jun 18, 2008 3:22 pm

Its a simple game. We will use the same sprite for the body as we use for the head.

But while the head gets straight directions from the players input, the body get its directions from the head. It will just follow the head.

There for we need a totally new object for the body.

The most simple way to do this would be cloning the head. But in the current construct release, when u copy an object and past it back as clone, the copy will like random jump allover the layout.
Like everywhere except on the place you told it to be. Even far outside the canvas.

At least, thats what it does on my computer, and i think it will also do so on yours.

The clone command is a little obsolete anyway, less you have no access to the original sprite.

Because, bringing the sprite again into the layout as a new object is exactly the same as cloning it.
Besides ofcourse, when you want to change the sprites, you will have to in both objects.

Well lets do this.
Add a new sprite to the layout from the "dot.png" that i provided.
Give it the name "body".
position it at exact x = 325 / y = 225. (again positioned according the grid of our little world)

Lets start out with 3 body parts.

So copy body twice, to make 3 instances in total.

Position instance 2 at x= 325 / y = 215
Position instance 3 at x= 325 / y = 205

Now we have a vertical row of dots. The bottom dot is the Head. The other 3 are instances of the body.

To translate the movement of the body in events, we do need to understand the movement.

Let me try to visualize the movement inside 1 tick for you and for myself.
1 tick is the execution of 1 complete events sheet, remember ?
Lets also forget the Y movement for a minute to simplify.

Step 00

The *rest situation" we start from.
The head will move to the left.

Leaving an open spot. We want the body part to jump to that position, where the Head was.
In other words, we need to store the position of the head in a variable BEFORE it jumps to its new position. So we can Jump the body to the stored variable.

Lets call that variable X_to. Since its the place the body will Jump_to.

Now the next body will jump to the place where this body was just a moment ago. So we also need to store the place the first body is coming from in a variable.

Lets call it X_from. Standing in the shoes of the first body, its X_from.
Standing in the shoes of the next body its X_to.

We will need to make a loop that runs trough all instances of the body. When the loop starts with the second body part, we will have to store the X_from into the X_to. = Change point of view from the first body to the next body.

i have to post this, to check it what i wrote with the pictures. And to use it myself as guide for coding the events.
Posts: 322
Reputation: 2,119

Post » Wed Jun 18, 2008 4:35 pm

LOL .. i hit the windows shortcut for page back in IE explorer at almost the end of my next post. LOL .. all gone .. LOL .. *hits head* I need to start writing this outside IE. But all my other spell checkers are DUTCH talking !!!! LOL.

Oh btw this IE plug in containing this spell checker is just plain awesome.
Google for IEpro.
I actual love this plug in.

Well, i got to start over. First will be dinner.
Posts: 322
Reputation: 2,119


Return to Your tutorials & example files

Who is online

Users browsing this forum: No registered users and 0 guests