Select the device which you develop the application for:
On this lesson, we will:
- Look into the code of a simple game.
- Watch how the characters communicate with each other using messages.
- Look how slots work.
- Learn how to declare variables.
- Learn how to use the „if“ command.
- Learn how to use the function that calculates rotation angle of a character while the character moves.
- Learn how to use the function Distance(X, Y).
Start Game Pilot, select "Prepare demo project", then select the "8 Game 'Ladybird'" project. Open the project.
Also, download the folder of the project "8 Game 'Ladybird'" on your computer. Look which files the project consists of.
In this simple game, the ladybird must catch the aphid. If the ladybird doesn't manage to catch the aphid, the aphid would eat the leaf. If the ladybird manage to catch the aphid, the aphid would disappear and the leaf would not disappear. To make the ladybird move, one should tap it.
We will look into the code of this game. Here is the scene description (.sc) file.
- - - - - CODE BEGIN - - - - -
// Lesson 8. Ladybird game.
Scene Start
LadyX=0 // declare variable LadyX, to compare coordinates of the ladybird and the aphid
LadyY=0 // declare variable LadyY, to compare coordinates of the ladybird and the aphid
In the very beginning of the scene, we have declared two variables:
LadyX=0 // declare variable LadyX, to compare coordinates of the ladybird and the aphid
LadyY=0 // declare variable LadyY, to compare coordinates of the ladybird and the aphid
In a scene description file, you can declare general variables and set their value.
The expression LadyX=0 means "declaring the LadyX variable, its value is 0".
We will need the variables LadyX and LadyY to watch how close is the ladybird to the aphid. We will watch it in the .stt-file of one of the characters.
The next command is Png(background,,,1024,768) - loading background.
The following command will output the same character on the screen:
In each scene, there can be several characters that act according the same program. In our example, there are ten "leaf" characters. Each leaf has its own set of properties, for instance, its own coordinates. Note that all the leafs have the same Y coordinate. Therefore, they make a horizontal row.
All leafs on the screen besides the 5th one are in the state 1. The 5th leaf is the leaf that the aphid is crawling to. It would disappear if the aphid gets close to it. The commands that let the leaf disappear, are in the state 0 of the leaf .stt-description. The 5th leaf is therefore not in the state 1 as the other leafs, but in the state 0: Person(leaf,0, 465,700)
Besides the leaf, there are also the aphid and the ladybird described in the .sc-file:
Now we will look into the description of the leaf character:
- - - - - CODE BEGIN - - - - -
Scale = 50
// this leaf will disappear when the aphid comes
0: Img=1 Slot[Erase]=11
Rest
// leaf
1: Img=1
Rest
// leaf disappears
11: Delay=0 Opacity=0
Rest
- - - - - CODE END - - - - -
Here is used the command Scale = 50, because the image is originally made for Retina screen.
Then the state 0 follows. This state is for the leaf that disappears when the aphid gets close to it.
// this leaf will disappear when the aphid comes
0: Img=1 Slot[Erase]=11 Rest
In the first string of the state, we output the image leaf001.png on the screen and also register the Erase message slot. This message will be sent by the aphid as soon as it gets close enough to the leaf. The command Slot[Erase]=11 means: if the Erase message has been sent, go to the state 11.
Look to the state 11:
// leaf disappears
11: Delay=0 Opacity=0 Rest
Delay=0 Opacity=0 means: within 0 ms (immediately) make the character transparent. As a result, the leaf disappears.
Below is the state 1, which is meant for the other nine leafs:
// leaf
1: Img=1 Rest
The image is put on the screen and the character rests.
// move legs
2: Delay=200 Img=1 // legs position 1
Delay=200 Img=2 // legs position 2
Delay=0 if Distance(X-LadyX, Y-LadyY)<120 State=3 // compare coordinates of ladybird and aphid, go to state 3 if they are close
Delay=0 if x>425 {Send=Erase New=4} // if aphid got the leaf, send Erase message and go to state 4
State=2 // go to begin
// aphid eats leaf
4: if eat=1 Rest // do nothing if leaf is already eaten
Delay=0 Mp3=1 eat=1 Send=StopMoving // leaf is eaten, eat=1 - send StopMoving message
Rest
- - - - - CODE END - - - - -
In the head of the file, we declare a local variable:
eat=0 // if leaf is not eaten, eat=0
this variable shows if the 5th leaf is still here or if it is already eaten by the aphid. In state 4, this variable comes again:
if eat=1 Rest // do nothing if leaf is already eaten
now when we are sure the leaf is still here (eat=0), the next lines will execute. If we do not check it, the „eating“ sound will repeat several times even when the leaf is eaten.
The insect is not moving and is waiting for 2 seconds:
Img=1 Delay=2000 // aphid waits
Then the line with the following function follows:
Delay=0 Angle=AngleXY(X-465, Y-700)-90 New=2 // turn aphid and begin state 2
In this line, there is a function AngleXY(dX, dY) that calculates rotation angle of a character using its coordinates.
At the beginning, the aphid looks up. But the leaf it is moving to is not directly over the insect. The function that calculates rotation angle can help us to rotate the aphid so that it is crawling directly to the appropriate leaf.
In the expression AngleXY(X-465, Y-700)-90
X, Y - current coordinates of the character;
465, 700 - coordinates of the spot the character is moving to;
-90 - this value shows how is the image aphid001.png is rotated.
If the .png image were turned exactly to the right (as if it were moving along the OX axis), then there would no need to include -90 in this formula.
So we rotated the insect and open the new parallel state 2: New=2. In the state 2, the insect changes the position of its legs. We will look into it a bit later. Simultaneously, the state 1 is executing. Namely, the following string:
Delay=9000 x=465 y=700 // aphid moves 9 seconds
That means: within 9000 ms smooth move the insect into the spot that has coordinates: x=465 y=700. The spot with coordinates 465, 700 corresponds to the 5th leaf. In the .sc-file, there is the following line for this leaf:
Person(leaf,0, 465,700)
so the aphid is crawling to the 5th leaf.
If we didn't open the state 2 in the previous line (New=2), where the aphid changes the position of its legs, we would see the aphid's moving slowly to the 5th leaf. Changing the legs makes an impression the insect is crawling.
When the aphid reaches the spot with coordinates 465, 700, the following string will execute:
Delay=0 Stop=2 // aphid stops
that means, set the string execution delay time to 0 ms – as soon as possible – and, stop the state 2. Since the aphid reached the „end spot“ already, it doesn't need to change the position of its legs anymore, therefore we stop the state 2.
Now, look to the state 2, where the aphid changes the position of its legs:
// move legs
2: Delay=200 Img=1 // legs position 1 Delay=200 Img=2 // legs position 2 Delay=0 if Distance(X-LadyX, Y-LadyY)<120 State=3 // compare coordinates of ladybird and aphid, go to state 3 if they are close Delay=0 if x>425 {Send=Erase New=4} // if aphid got the leaf, send Erase message and go to state 4 State=2 // go to begin
In the first two strings, the images aphid001.png and aphid002.png change each other each 200 ms. Open these images on your computer and look what is the difference between them. You see that the only difference is the position of the legs. Changing the legs makes an impression the insect is crawling. Then follows the string:
Delay=0 if Distance(X-LadyX, Y-LadyY)<120 State=3 // compare coordinates of ladybird and aphid, go to state 3 if they are close
Here is determined how close is the ladybird from the aphid. The distance between the aphid and the ladybird is determined with the help of the function Distance(X, Y). This function calculates the distance using the given coordinates. In the description of the ladybird character, the value of the current ladybird coordinates is assigned to the variables LadyX and LadyY.
if Distance(X-LadyX, Y-LadyY)<120 means that we check if the distance is smaller than 120 points. Here we use the "if" command.
The "if" command has the following syntax: if Expression Command else Command.
The "else Command" block is optional (like in this case). For more information about the "if" command, see Help.
Suppose the ladybird came close enough to the aphid so the following condition is fulfilled:
if Distance(X-LadyX, Y-LadyY)<120
Since the condition is fulfilled, the next command will be executed: State=3 – the new parallel state will open. In this state, the aphid disappears. If the condition is not fulfilled, the next line will be executed:
Delay=0 if x>425 {Send=Erase New=4} // if aphid got the leaf, send Erase message and go to state 4
Here we see the "if" command again. In this line, the condition x>425 is checked. When the aphid comes close enough to the leaf and almost touches it, its X coordinate is 425. Then the aphid touches the leaf, the condition if x> 425 is fulfilled, and then several commands are executed. As you see in this example, if there are several commands after the "if" command, you should group them using the "{ }" brackets.
The first command that will be executed is Send=Erase – the aphid character sends the Erase message. This message will be received by the leaf character (see leaf.stt) in state 1. As a result, the 5th leaf will disappear. The second command New=4 opens the new parallel state 4 (we will be back to it a bit later).
The next line State=2 // go to begin sends to the beginning of the state so the cycle repeats.
Note that every time image 1 is replaced by image 2, two checks are performed instantly (whether the ladybird caught the aphid and if the aphid reached the leaf) so if the conditions are not met, the cycle repeats.
this state will be executed if the following condition of the state 2 is fulfilled:
if Distance(X-LadyX, Y-LadyY)<120 State=3
that means, the ladybird came close to the aphid. The first line in the 3rd state closes state 1, which is still executed.
Delay=0 Stop=1 Opacity=0 // make aphid invisible
Within 0 ms, the state 1 is stopped and the aphid becomes invisible: Opacity=0
The next line:
Delay=0 Send=StopCrawl // send message StopCrawl to stop ladybird
the aphid character sends the StopCrawl message. This message receives the ladybird, whereafter the ladybird stops because it doesn't need to chase the aphid anymore.
State 4 of the aphid is the process of leaf eating:
// aphid eats leaf
4: if eat=1 Rest // do nothing if leaf is already eaten Delay=0 Mp3=1 eat=1 Send=StopMoving // leaf is eaten, eat=1 - send StopMoving message Rest
This state opens when the following condition of the state 2 is fulfilled (i.e. when the aphid touched the leaf):
Delay=0 if x>425 {Send=Erase New=4} // if aphid got the leaf, send Erase message and go to state 4
First, we check in state 4 if the leaf is already eaten:
if eat=1 Rest // do nothing if leaf is already eaten
It can happen that the leaf has already been eaten, but state 2 (which is still executed for a fraction of a second) determines each time that the aphid is close to the leaf, and then opens state 4 again and again. To avoid the state 4 opening several times, we check: if eat=1.
The sound of leaf disappearance is played and the message StopMoving is sent (which is received by the ladybird character). If you start the game again, you will see that when the aphid eats up a leaf, the ladybird stops and blinks. The ladybird does this because it receives the StopMoving message, which is sent in the 4 state of the aphid character.
Now, look into the code of the ladybird character:
We have already spoke about [Touch_Self] on the Lesson 6. Here this command means: if one touches the ladybird – go to the state 2.
Slot[StopMoving]=4
When the StopMoving message has been sent, go to state 4. The StopMoving message is sent by the aphid character (when the aphid eats up the leaf, in state 4).
Slot[StopCrawl]=5
When the StopCrawl message has been sent, go to state 5. The StopCrawl message is also sent by the aphid character (in state 3, when the aphid is caught by the ladybird and therefore disappears).
Look into the state 1:
1:Img=1 Rest
Here the image ladybird001.png is put on the screen. This is exactly the state the ladybird is in at the very beginning of the game, because in the .sc-file, there is a string:
Person(ladybird,1, 120,124)
where 1 – is a state number of the character.
The other states of the ladybird are executed either when you touch it (then Slot[Touch_Self] is activated in the file header), or when the aphid character sends StopMoving or StopCrawl messages (one of the other two slots in the file header is activated).
State 2:
// try to catch
2:Delay=0 Slot[Touch_Self] // stop slot Angle=AngleXY(X-465, Y-700)-90 // define angle before ladybird begins to move Delay=0 New=3 // new parallel state 3 begins Delay=4000 x=465 y=700 // ladybird moves Delay=0 Stop=3 // now stop moving legs Rest
here the ladybird crawls to the aphid to catch it. The first string:
Delay=0 Slot[Touch_Self] // stop slot
The command Slot[Touch_Self] without parameter, stops the slot. If we don't stop the slot, then if you touch the ladybird one more time, it crawls two times faster and farther.
Angle=AngleXY(X-465, Y-700)-90 // define angle before ladybird begins to move
Here, we use again the function that calculates rotation angle, this time for the ladybird. We use the same values as for the aphid, because the both insects are on the same line and crawl in the same direction.
Delay=0 New=3 // new parallel state 3 begins
The new parallel state 3 begins (changing the position of the legs).
Delay=4000 x=465 y=700 // ladybird moves
The ladybird moves towards the leaf (the same path the aphid goes). 465, 700 are coordinates of the leaf.
Delay=0 Stop=3 // now stop moving legs
When the ladybird reaches the destination, it stops moving legs.
As we have already seen, state 3 is started from state 2, and has the following commands:
// move legs
3:Delay=200 Img=1 // legs position 1 Delay=200 Img=2 // legs position 2 Delay=0 LadyX=X LadyY=Y State=3 // go to begin of state 3
If you look at the images ladybird001.png and ladybird002.png, you will see that the only difference is the position of the legs. Changing the legs makes an impression the insect is crawling.
In the 3rd string, we see the variables LadyX and LadyY:
Delay=0 LadyX=X LadyY=Y State=3 // go to begin of state 3
These are general variables which we declared in the scene description file:
LadyX=0 // declare variable LadyX, to compare coordinates of the ladybird and the aphid LadyY=0 // declare variable LadyY, to compare coordinates of the ladybird and the aphid
Every time the legs change, the following line will be executed:
Delay=0 LadyX=X LadyY=Y State=3 // go to begin of state 3
new current value of the ladybird coordinates is assigned to the variables LadyX and LadyY.
There is a following line in the state 2 of the description of the aphid:
Delay=0 if Distance(X-LadyX, Y-LadyY)<120 State=3 // compare coordinates of ladybird and aphid, go to state 3 if they are close
It this line, the coordinates of the ladybug and aphid are compared, to determine if the ladybug caught the aphid.
this state starts when the command Slot[StopMoving]=4 in the head of the file is activated, i.e. when the aphid eats the leaf and sends the StopMoving message.
In the second line, we stop state 2 and state 3, which are still executed parallel to state 4.
Delay=0 Stop=2 Stop=3 // ladybird stops
Then we take another image of the ladybird (the eyes are closed now). And add a sound for the blinking:
Delay=100 Img=3 Mp3=1 // blink
And now again show the image where the eyes are open:
This state starts when the slot Slot[StopCrawl]=5 (in the head of the ladybird file) is activated. This slot gets activated when the ladybird and the aphid are close to each other. In this case, the aphid character sends (in the state 3) the StopCrawl message.
Delay=0 Stop=2 // ladybird stops
Now we stop the state 2, so the ladybird is not moving to the leaf anymore. Note that the state 3 is still running – the ladybird is still changing the position of its legs.
Delay=0 Mp3=2 // sound
- start playing the sound (the ladybird got the aphid).
Delay=700 Angle=180 // ladybird turns
- the ladybird turns at 100 degrees. The changing legs continues.
