Description
|
Symbol
|
Usage example
|
Explanation
|
ADD
|
+
|
score := score + 10
|
Adds 10 to score
|
SUBTRACT
|
-
|
lives := lives – 1
|
Subtracts 1 from lives
|
MULTIPLE
|
*
|
score := timeleft * 5
|
Sets score to 5 times the value of timeleft
|
DIVIDE
|
/
|
timeleft := timeleft / 2
|
Divides timeleft by 2
| Actions
Functions are called Actions in TouchDevelop and I will refer to them as Actions from this point forward. TouchDevelop also has events, which are Actions which are triggered by an event which occurs. The event could be that the user touches the screen on a sprite or presses the camera button on their device.
Actions can have parameters which you pass in and out. Below is a very simple example of this to try and get the principal across.
 
The action on the left has 2 input parameters called A & B; these are local & exist temporarily within the action. The same goes for the output parameter (answer) it is also local & temporary. If you look at the picture above on the right, it shows how to call these actions. I have demonstrated two different ways; in the first I have declared a variable called result and I have assigned to it the result from calling “add numbers” and passing in the numbers 1 and 2. The outcome of this is that the result variable will now hold the value 13, because inside the action b has 10 added to it and then a is added to b, so basically it does result = 1 +2 +10 (which adds up to 13)
In the second example I have declared two variables, assigned values to them and then passed them into the same function. The result of calling it this way is that result2 will be equal to 22 (10+5+7), however x and x2 will still be equal to 5 & 7, despite the fact that x2 is passed into B and B has 10 added to it, the original x2 is unchanged as B is just a temporary copy of it. In TouchDevelop variables of most data types, when passed in as a parameter, remain unaffected by what happens inside the action which they were passed into and inside that action a temporary copy of the original is made. However, if you pass a sprite in, the local variable points to the original sprite and any changes made to the sprite will affect the original.
Some actions may be useful in more than one game script; in this case you may want to put them into a library which allows you to use that action again in another script without having to re-create it. Libraries can be added into any script you create and then used in the same way as any other actions. If you publish your library other TouchDevelop users can also make use of them. In the exercises which follow, I will get you to make use of a library that I wrote, which contains some useful actions that come in handy when creating game scripts.
Collisions
The game board in TouchDevelop has built in collision detection, although it doesn’t actually check for sprites touching each other, it checks for them overlapping, a subtle difference which is important to take account of when creating a game script. In the example below we are checking if bat1 sprite overlaps with ball sprite and if it does we then set the ball’s horizontal speed on the x-axis to positive to reverses its direction and simulate the ball bouncing off the bat. The math->abs function is a maths function to set any number to positive, whether it was already positive or not.
Activity 2a – Creating a Fruit Ninja clone -
Login to your TouchDevelop account and open up the script that we created in Activity1b.
-
Select EDIT and then select where it says the name of your game. 
-
Select “clone script” and a copy of your game script will be created.
-
In the new script go into the same “script name” screen and change the name of the script to something new, if you can’t think of anything just call it “Fruit Ninja Clone”.
-
Select the main action and delete out the lines which set the position of the sprite, the speed of the sprite and the boundary around the game board as shown below.
-
Let’s make use of random numbers to generate the position of the sprite and the speed of the sprite. When you use the math->random function you pass in a number to tell it how many random numbers to generate. So for instance math->random(10) returns a number between 0 and 9, which is 10 different numbers starting at 0.
-
Enter the lines of code below at the end of main action and test that it works by running it.
This first line above sets the Y position of the sprite to below the bottom of the board, by adding the height of the sprite to the height of the board. The second line generates a random X position for the sprite of between 0 and the board width, putting it somewhere between the left and right sides of the board. The third line generates a negative vertical speed for the sprite of between -300 and -699, to make the sprite move upwards. The IF condition, generates a horizontal speed of between 0 and 399, if the sprite starts on the left hand side of the board. It generates a speed of between -399 to 0 if the sprite starts on the right hand side of the board. This is so that the sprite doesn’t fly out of the board right away, but moves left if it spawns on the right and right if it spawns on the left.
-
The code above basically generates a position and a speed for the sprite, which is something we need to do over and over again, so this code should really be in its own action. So select the  button and highlight the section of code as shown below. Name the new action “fire sprite” and select extract.
You should find you have a new action in your script and a new line in your main action which calls the new “fire sprite” action.
-
Now we want the sprite to fire again and again each time it falls out of the screen, so add the following code into the gameloop action, which will re-fire the sprite when it leaves the game board at the bottom.
-
Add a new event for “tap sprite: sprite” which will be called when the player taps on the sprite.
-
Open the new tap sprite event and add in a call to the fire sprite action. So that the sprite re-fires when it is tapped on.
-
Run the script now and check it works.
-
Next we need to add score into the game. Go into the main action, add a global variable called score and give it an initial value of 0. Remember the process in TouchDevelop for declaring (creating) a variable. First you must select or type VAR, then if you wish, change the variable name, in this case to score. Then enter an initial value for the variable on the right-hand side of the equals’ symbol, in this case the number 0. Lastly select the new variable name (score) and select the “promote to data” button.   
-
In the main action, create a global text sprite variable called scoreboard, by entering the lines of code below. Notice that I have suggested that you set friction to 1, which stops gravity from moving this new sprite. The “create text” function has 4 parameters passed into it; the 1st value is the width of the text box, the 2nd is the height of the text box, the 3rd is the font size and the last bit is the string you want to draw. Feel free to change the colour of the text and change the position that I have suggested.
-
Add the following line into the gameloop action which sets the string for the scoreboard by converting the score numeric value into a string and concatenating it to the string “Score”.
-
In the tap sprite event, add the following line to add 10 to the score each time a sprite is touched.
-
Run the script and test that it works. You almost have a game, except that it never ends.
-
Before we go any further let’s make the game more fruit ninja style, so go into the ART group and change the pictures you are using for the BALL and the GAME BACKGROUND. Feel free to go with any theme you want with regards to the art.
-
Now let’s add a timer and a text sprite to display the timer. The time->now function returns the current system time, we will use this to store the time when the game starts. Enter the code below at the end of the main action script.
-
In the gameloop action add the code marked in red. The first line works out the time remaining in the game and stores it into a variable called timeleft. The second line updates the timeboard text sprite, so that the time left is displayed on the screen.
-
Add the following lines at the end of gameloop to check for the game ending when time left is less than or equal to 0. When it does reach zero the next 2 lines of code use the Bazaar library to create an online leaderboard for your game. Once you publish your game, people around the world will be able to play your game and get on your leaderboard. The first line posts the score variable to the online leaderboard and the second line draws the leaderboard to the wall. Time->stop stops the script from running and the game is over. 
-
Run your game and check the game ends when the time runs out.
-
In fruit ninja, part of the fun is that you swipe your finger through the fruit, not tap on it, so let’s change that. There isn’t a built in function in TouchDevelop as of yet to do this, but there is a library which you can use which allows you to do a “swipe through” event on a sprite. Libraries are made up of actions and variables, which combine to provide commonly used functions. These can be created by any TouchDevelop user, so perhaps one day soon you will create a library that does a specific task that you think other TouchDevelop users could make use of. The first thing we need to do is add the library, so go down to the Library group and select the + button besides “add new library resource”.
-
Search for the “game events” library and select it. It should then be added to your libraries.
-
Delete the tap sprite event action and add a “swipe board” event instead.
-
In the swipe board event add the lines below, which do the same thing we were doing in the tap sprite event, but it runs when a swipe through the sprite event occurs. To bring up the “game events” library select the library button  . Note that x & y form the start position of the users swipe and “delta x” and “delta y” gives the vector length of the swipe. The last parameter you pass into the “check swipe” action is the actual sprite that you want to check for a swipe against.
-
Run the script and test that you can swipe through the sprites correctly. If you are using a mouse, you need to click & hold the LMB while moving the mouse to swipe and then release the LMB when the swipe is over.
-
Before we finish the game and publish it, let’s make things a little more interesting by adding a second sprite which the player must try to avoid swiping. To help with adding a second sprite, let’s change the “fire sprite” action so that we can use it to fire more than one sprite. To do this we will pass in the sprite that we want to fire. So change it to match the one shown on the next page, by adding an input parameter for sprite. You do this by selecting the main name for the action where it says “private action fire sprite” and then selecting “add input parameter”. By default it creates a number parameter called p, select this and an option should appear on the left saying “of type” with Number underneath. Select Number and a window should appear which allows you to search for and select a variable type. Select Sprite from this list. 
-
Next go through the fire sprite event action changing all the global  references to the new local sprite variable (you need to delete the sprite references and replace them with just sprite).
-
Once you do this you will need to go through the main, swipe board and gameloop actions, changing  to  . Once you have done this, run the script and make sure it still works as it did before.
-
Let’s also extract the 3 lines of code which happen at the end of the game into their own action, so that we can call it whenever we want. So extract the 3 lines of code shown below into a new action called gameover.
-
Now we can add a second sprite. So add the 2 lines shown below to the main action around the same place where you declared the original sprite. Note that the order that you declare sprites in the code, determine which is drawn first and therefore which sprite will appear on top if two sprites are drawn on top of each other, the sprite declared last is last drawn and therefore on top of the rest. You will also need to add another piece of art for the badsprite, the picture I am using is called “Brussel Sprout” and the art resource name I used was “not fruit”, but feel free to choose a different image. 
-
Add the following lines of code (marked in red) into the gameloop action, the first line makes the new badsprite spin based on its horizontal speed. The IF statement checks for the new sprite leaving the bottom of the screen and re-fires when it does.
-
To check to see if the player swipes through badsprite, we need to add the IF statement below into the swipe board event, so that when it detects a swipe through badsprite, it calls the endgame action.
-
Lastly, let’s add a sound effect when the fruit is swiped. Go to the Art group and add a new art resource, which we will name swipesound. Select the “of type” button and change it from Picture to Sound. The sound I would suggest using can be found by selecting “search online art sounds” and searching for fireball.
 
-
Add the following line by selecting the ART button and choose swipesound and then play. You should now find that when you swipe the fruit it will play a sound effect.
-
Run your script again and test that the sound plays.
-
Now that your game is complete, let’s publish it so that other users can play it. Publishing it is not putting it into the Windows Store to sell, it’s simply allowing other TouchDevelop users to try out your script and make use of your code. As soon as you publish it other TouchDevelop users can play your game and get entries on your high score table. To publish select the PUBLISH button beside the name of your script and select PUBLISH on the window that pops up.
-
Once you have published it, try your game again and set a high score for others to try and beat.
-
You can also tweet, email and facebook like your script, so friends of yours can log into TouchDevelop and try it out. To do this, select the SHARE button from the main screen of your script as shown below.
-
Finally hit the back arrow and return to your HUB.
Dostları ilə paylaş: |
