If you run this as it is, the snake will move under the Butt object.

I would rather have the Snake moving in front of the Butterfly.

Go to the layout editor.

Bring up the layer organizer on the left.

Add a new layer on top, with the little green up arrow key.

Drag the newly created layer One down, so it is in the middle of the 3 layers.

Locate the Butt object in the object list in the layer organizer plane. Depending on the filter in the middle you might have to select another layer to see it.

Then drag it from that list up into the middle layer (on upper half of the organizer)

Now we have in the lowest Z-order layer, the bottom layer, the grid.

On top of everything we have the Snakes head and its body.

In between them we have the butterfly.

The other objects are not visible, they dont really matter. But to be a good boy, u could organize them on a special layer, that you name "controls", or so.

If the snakes body's instances are not on the most top layer, then also drag this object to the top layer.

As you see, its easy to organize Z-orders in construct with layers.

...

Butt will jump to a random place on screen when the snake eats it.

But that condition does not exist on start of the game. You will find yourself many times in that situation.

Now you can do this. Create a global flow variable like Is_but_eaten. And give it the value "yes" when starting up the game.

And make the Butt event move the Butt when that global variable is set to "yes"

The variable gets set to "yes" when the snake eats the Butt. And will be set "no" right after the Butt is moved to another place.

In general, sometimes you have to force conditions to happen at startup of the game, to get the flow nicely going.

In this game we will keep things simple. But be aware of all this.

We will not use a flow for moving the Butt.

And we will use the "On layout start" condition to bring in the Butt for the first time.

Every action, and sub events attached to "on start layout" will run between the moment that you run the game and the moment its screen pops up.

Or when we restart the layout, in the moment between the screen changes.

It will only run once, and be excluded from the top-down execution during the rest of the game.

Right click the "start of layout" condition (C-spot), and add a sub condition "always" to it.

click new action to this "always"

step1: self = Butt

step2: action = set X

step3: parameter: will be an expression ..

double click system object in the expression guide

scroll some trough the expressions .. as you see this is heaven for the math freak

locate "generate random number"

double click it

it will bring random(1.0) in the X field

now change this to ((random(61) ) * 10 ) + 15

we need the Butt also to be on the 10x10 grid

not to close to the left edge of screen and in the middle of the grid ..

screen width = 640 - 15 for the left border - 15 for the right border = 610

610 / 10 (grid is 10 based) = 61

so random(61) will generate a number between 0 and 61

* 10 will give 10 based numbers

+15 will place it in the middle of the grid, and not to short to the left side.

click finish.

Duplicate that action.

Click back 1 step.

step2: action = set Y

step3: parameters : change the expression to ((random(46) ) * 10 ) + 15

click finish

go to the layout editor.

Add a sprite from the butterfly animation that in the folder with sprites i provided for this tutorial.

Any of the butterfly sprites will do.

Yes this gonna be an animation, but a simple basic one.

Name it "Butt", yes i like little joke in my events.

Bite my butt, hahahaha, oopz.

Set width and hight to 20. It is a bit to big now, compared to the snake.

Not that its gonna look realistic. But though ........

Place it outside the layout canvas. We will bring it on screen by an event.

Now we add animation.

With Butt selected, click the "animator" TAB on the organizer on the right.

The Animator has two screen parts. On top you see the animations.

Below the middle you see the sprites (frames) that make up the animation.

On top you see "default" and a sub entry "angle:0�"

"Default" is the name we will call the animation with in the events.

In the animator "Default" acts as a folder, containing animations that match with the angle of the object.

When we want to animate a walking man. We want him to have his nose to the right when he's walking to the right. This animation is different (mirrored) when he walks to the left, nose faced to the left.

When u add an animation for 0�(faced right) and 180� (faced left), construct will automatically use the right animation when the angle of the object changes to left or rigtht.

NOTE: You can mirror sprites by giving it a negative width (or hight) in its properties. Bet not to many people know this.

But our animation will not change direction. It will not walk. The butterfly will just sit and wait patiently to be eaten by the snake.

Told you, we will only use basic things in this game.

So select the sub entry "angle: 0� attached to "default". (Yes you can change "default' to another name in the left properties pane, if it annoys you.)

So select the sub entry "angle: 0� attached to "default".

This is what actual is containing the animation frames.

On the bottom part you will see one sprite, numbered 1. At the moment there is 1 frame in the animation. Right click it. Choose "import frames" from the contextual menu.

The file explorer comes up. Point it to the folder containing all the butterfly's that i provided.

Press CTRL+a to select them all. Or have your way clicking and selecting them all.

Click open.

Now you are confronted with a import wizard.

I can not explain u everything in this wizard. I dont know it in depth yet. But there are not to many buttons and check boxes to figure it out, if you want to.

For now, just click "import"

The frames will be imported.

And you can see them, and bring them in the picture editor by double clicking a frame.

This why i say "one frame of an animation is also a sprite"

The sprite is no more then a variable property of an object. This sprite will animate its face over time. And thats close to animate X over time. Same thing.

Now with angle:0 still selected, change its speed in the properties on the left to 12.

note:

Initial its set on 50.

To give you an idea about commonly used animation speeds :

35 mm Cinema (the big movies) runs at 24 images / sec (a speed of 24)

television in Europe runs at 25 full images / second

in America thats 30 images / second

Most .gif animations on the Internet are set to a speed of 12 images /second (most monitors are set to 60 hertz, and 60/12 gives a whole number)

ok thats enough for now. Lets bring the butterfly with an event in the layout, and lets get it eaten by the snake.

Actual, its funny to see that snake walk backwards.

But, it has to go.

Lets first analyze "backwards" ..

The snake can not change direction to the right when we are all ready going left. = backwards.

Not left when currently going right.

Not up when currently going down.

Not down when currently going up.

When is the snake going right ? How do we know ?

Well, when X_head = 10

We go left when X_head = -10

We go up when Y_head = -10

and down when Y_head = 10

When do we change direction ?

Well when the corresponding key is pressed.

So we just have to link the keys with a condition to X/Y_head variables.

Lets add conditions based on this to the key inputs.

STOP ! you yell. You said no conditions to key inputs.

I meant, no conditions to key inputs on top of them. They will slow them down. And the event sheet looks like a mess.

Key board and mouse detection conditions are triggers. Currently in construct they dont act as triggers yet.

A trigger will pause the execution of events, run the action and sub events under a trigger condition, and when done with them, return in the events sheet where it paused.

I am sure this will be implemented some day in construct. Therefor, today already i threat triggers as triggers.

Rule 1: triggers will always be the first event in a tree.

So lets add conditions to the keyboard triggers to LIMIT execution of its actions.

NOT on top of the key conditions to limit the key inputs.

You are allowed to place hundredths of sub_events under the key conditions, just not 1 on top.

Select the condition "on key Right".

Right click choose "insert new conditon"

step1: object = vault

step2: condition = "Compare a private variable"

step3: private variable = X_head / comparison is "not equal to" / value = 10

finish

Now lets *lazy edit*

Ctrl + drag that condition into every "on key" condition.

then double click copy by copy to edit the conditions.

Key left

private variable = X_head / comparison is "not equal to" / value = -10

key up

private variable = Y_head / comparison is "not equal to" / value = 10

key down

private variable = Y_head / comparison is "not equal to" / value = -10

Run all

Yup, this is right. eh ?

<img src="http://usera.imagecave.com/j0h/tick/07_more.jpg">

In next post we bring in the pray for this hungry little snake.

Here i go again.

Add 4 Private variables to the object vault.

X_to, number, 0

Y_to, number, 0

X_from, number, 0

Y_from, number, 0

go to the events editor.

First we have to store the Position of the Head in variables before it moves to a new place.

This has nothing to do with the X_head and Y_head variables we made earlier.

They are not holding a position. The head will never be positioned at 0,-10.

X_head and Y_head are holding "relative values"

Relative values have not much meaning by there own. They relate to something. They only get a meaning by adding them to a absolute value. Like we added them to the Head's position to move the Head 10 pixels.

The Values we use to remember Heads old position are absolute value's.

We gonna store Heads X and Y in the variables X_to and Y_to. Because thats what the first body will jump to.

So locate the comment "move head"

there is the condition "every 100 milliseconds" and its sub condition always.

Easier then adding a new sub tree to all this...

is again go by the *lazy editing* way.

Duplicate the always sub-event.

Now you have a duplicate of the event and its actions. And on the right branch in the tree.

We need to store the variables before the Head moves.

So, delete the actions behind the first "always" sub event.

And we are ready to code.

hit new action behind the first "always" sub event.

Step1: self object = Vault

Step2: action = set value

step3: parameters: private variable = X_to / value = Head.X

finish

Yes, Head.x not .x The self where "." refers to is Vault in this action not Head

Duplicate that action.

Double click it.

step3: Private variable = Y_to / value = Head.Y

finish

There, now we we always know where the Head was before it moved.

Now lets snap the first body to that position.

Locate the comment "move body"

Double click the "always" event under it.

Automatically you land in step2 of the events wizard. Thats because "always" has no parameters. Another, you probably think coincidental, reason to make a structure with comments and "always"'s before starting to code. I will try always to start a tree of events with a flow condition.

step2: condition : For Each Object (ordered)

step3: parameters : select Body as object (its a pick condition) / Order expression = Body.UID /

Mode = Ascending

Finish

Body.UID and not .UID because its a condition, conditions dont know "selfs", only actions do.

what is the property UID ? it stands for Unique ID. Every object, made in the layout editor or/and made by events, will get an Unique ID, a number. The first made object will have a lower UID then the second made object. Not necessarily 1 and 2. But for sure ascending.

For Each Object (ordered) is a pick condition.

It well run trough the instances of the object chosen in the parameters step. One by one. And feed this instance as picked (one by one) to its sub-events and actions.

It will do that in an order and direction you told it to do.

In this case, it will pick the instances of the object Body. One by one, and feed them one by one to the sub-events and actions we gonna make for it.

It acts as a Loop. And it will adjust its end to the count of instances for Body in this layout. In other words, we can add as many instances of the object body on runtime as it pleases us, the "For Each" will just adjust and take into account all instances.

Now well the condition is in place. Now it needs actions.

First we will store the position of the currently picked instance of Body in a variable. Before we move it.

Lets *lazy edit* . Under the events moving the head u see the action

Vault Set 'X_to' to Head 0 .X

Duplicate it by CTRL + dragging it to the actions of the "For each" we are working on

Double click the copy.

step3: parameters: private variable = X_from / value is Body.x (self = Vault)

finish

Duplicate that action.

Double click it

step3: parameters: private variable = Y_from / value = Body.y

finish

There thats that.

Now we stored its position, we can move the currently picked Body instance.

click new action.

step1: self = Vault

step2: action = set x

step3: parameters: it will be an expression.

double click Vault in the expressions guide

double click the expression "get private variable"

Body.Value('Variable name') will be filled in (you can of course type all that too)

change it to Vault.Value('X_to')

finish

Duplicate the action.

double click

click one step back to step2

step2: action = set Y (select, and click next)

step3: ahh that expression is still here, just change X_to in Y_to

finish ...

Now all we have to do is change point of view from the current picked instance of Body, to the point of view for the next instance the pick-condition will pick.

For the next instance, the X_from will be the X_to. So all we have to do is store the value of X_from into X_to (same for Y)

X_from is where the previous instance jumped from, and the point the next instance will jump to.

Lets *lazy edit* this.

Duplicate the "Vault Set 'X_to" and the Vault Set 'Y_to' actions from the "move head" events to the place of actions that we are working at.

Double click the "Body: set 'X_to" action (2 actions back under this event)

Copy the expression in it ( Vault.Value('X_to') )

click cancel or finish

double click the first duplicated action. the one that sets the X_to

step3: just paste the clipboard content in the value. And change X_to in X_from

finish

A computer is made to copy and paste, and for nothing else !!!

double click the second duplicated action.

step3: just paste the clipboard content in the value. and change X_to into Y_from

finish

note: every time i make an expression, i will trow it in my clipboard. Usually turns out to be handy.

Run all to check. And it looks like a big mess. And theoretical. The math is right.

Most beginners stop here. At this point. (or at the next problem).

And yet, there error is easy.

We forgot the "every 100 milliseconds" condition. In other words .. Head and body run out of sync.

Aha !!!

OK lets sync them up. Add a another ""every 100 milliseconds" condition" ?

Nah,

lets not do that.

Just drag the event tree with the "For each" loop up, under the second always that moves the head, and on the same tree level.

Delete the "move body" comment.

Edit the "move head" comment to "move head and body"

there, run all again.

Perfect!!!! Only a snake can not move backwards, lol. oh thats easy solved.

And we will in next post.

Here is how the events should look, if you ran in a problem, compare with is picture.

Maybe it was my english, or you forgot a detail somewhere. So check up with this.

<img src="http://usera.imagecave.com/j0h/tick/06_result.jpg">

I do not want to post the .cap. Because i really need you to type and click all this.

Else it is no tutorial. sorry ?

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.

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

<img src="http://usera.imagecave.com/j0h/tick/00_step.jpg">

The *rest situation" we start from.

The head will move to the left.

<img src="http://usera.imagecave.com/j0h/tick/01_step.jpg">

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.

<img src="http://usera.imagecave.com/j0h/tick/02_step.jpg">

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

<img src="http://usera.imagecave.com/j0h/tick/03_step.jpg">

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.

<img src="http://usera.imagecave.com/j0h/tick/04_step.jpg">

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.

<img src="http://usera.imagecave.com/j0h/tick/05_step.jpg">

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.

http://www.autoitscript.com/autoit3/

I do think though, that most games have there own routines to route user input a "non windows" way. There for macro and scripting will fail on most games.

I can not add this to the wiki,

for several reasons.

For one, my english looks childish and foolish.

For two, ik take a very personal aproach to some things. And i am aware that they can not be the official statement of the makers of construct. The way i aproach pick-conditions and flow-conditions could even be contraversial.

For 3, There is, besides showing the great things and calling them great, also honest critic on the program, i think there is no place for that in the wiki.

for 4, some critic is only true for the current release, every new release seems to tackle more and more on my critical points.

For that last reason, any wiki will be made to soon, maybe.

Although i desperatly miss guides on how to use the things in the present wiki.

There is a good wiki about expressions, but it laks the essential info on how to acess the expressions.

There is a wiki about conditions, but neither the pick-conditions are explained, and its lacking the essential guide on how to copy, select events, select conditions, actions, move them, delete them, and so on ...

I still do not know how to use containers. If i make a container containing 2 objects, and move one, the other stays in place. And yet i feel that containers are essential.

I dont understand yet the "include event" thingy. Although it should make a lot things easyer.

Look at the *dumb* way i just copied event sheets to differend layouts in my pac-man example.

so,

for 5, i dont know for sure that i choose the best solutions in my explinations yet ! There for it can not be in the wiki.

But i do think that structure, the flow, the order i bring new things in that post is right. I do think that it is correct to start with the system object and its flow conditions. move to basical movemet by behaviours, move to pick-conditions and so on .....

So yes i do think some one can take it as base to write a practical wiki.

[quote:zkggwtuc]where PickedObjects is not the name of the PickedObjects but a token

Glad that i am finaly not the only one asking for this.

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.