I thought programming would have been really hard, but this wasn’t

Activity 1a – Creating a new script

• 
  Go to www.touchdevelop.com
  
• 
  Login using your Microsoft Live account, Google account or Facebook account.
  
• 
  From the HUB which appears, select “CREATE SCRIPT” and select blank.
  
• 
  Enter a name for the script in the box which appears, I suggest you call it “Activity1a”.
  
• 
  Select the create button.
  
• 
  You should now see the main action script, select the first line in the main action where it says “do nothing”.
  
• 
  Select the string button and type in “Hello World!” and select the “Post to Wall” button.
  

• 
  Try running the script by selecting the RUN button; the wall should be displayed with the message “Hello world!” on it.
  
• 
  Select the back button to return to editing the script.
  
• 
  Select the existing line of code and select the part which says “Hello world!”.
  
• 
  A box should appear allowing you to edit the text. Change it to say something else and run the script again to test it works.
  
• 
  Select the back button twice and you will be back at the hub. TouchDevelop automatically syncs your script and you should see a message in the top left hand corner saying syncing done. Syncing basically means your script has been saved to the cloud. If you log into TouchDevelop on another device you should find that the script you just created is there as well.
  

Activity 1b – Creating a game script

We are going to create a script for making a game this time, but we will do it step by step, so we won’t use the “Physics Game Starter” button which creates a partially created game.

• 
  Select “Create Script” & select blank. Give the script a name like “My first game”.
  
• 
  Now let’s set a background colour on the wall. If you are using a keyboard you can type this code in, if you are using a touch device then use the buttons at the bottom right of the screen. The line of code we want to enter is shown below, which will set the background to red. If you are typing on a keyboard you should notice that as you start to type each command a list of matches will appear on the left. When you see the command you are looking for, you can use the UP and DOWN cursor keys to move onto it and then press ENTER to select it. Each part that comes before an arrow must be confirmed by pressing enter or by selecting it from the buttons at the bottom, before starting on the next part. The “set background” command will default at first to colors->random which, as you might have guessed, sets a different colour on the background each time you run the script. Change this to red so that your background is always set to red.
  

• 
  Run the script to make use it works (the screen should go red).
  
• 
  Next we want to add a game board to our script. A game board is a 2D game engine that comes with TouchDevelop. This will be our first use of variables, the variable we need is of type BOARD. First select the ADD (+) icon to create a new line underneath the last one.
  
• 
  Select or type the keyword VAR (which stands for variable). After selecting VAR the line of code should read var x :=
  
• 
  Press Enter or touch to the right of the equals symbol.
  
• 
  Enter media->create landscape board. You should notice after selecting this command that it defaults to 800 by 480. This is the width and height of the game board in pixels; 800 by 480 is the default resolution for windows phone games. If you want the game to be portrait the command becomes “create portrait board” and it will default to 480 by 800. If you are developing a Windows 8 application the resolution is 1366 by 768. However when you are testing your script, TouchDevelop will automatically rescale the board for you to fit within your browser.
  

• 
  TouchDevelop assigns a default variable name of board to a variable of type game board. You can change this by selecting board and using the RENAME button. However I would just leave it as board, which is a good enough name for the game board.
  
• 
  The board variable really needs to be global, as we will need to redraw it on the wall as the game progresses. So select board and then select the “promote to data” button. The keyword VAR should disappear to be replaced by a symbol which means global variable.
  
• 
  Add a new line and select the DATA button (which lists all the global variables) and choose board. Then enter the command shown below after board, which will set the board to black.
  

• 
  We need to draw our game board onto the wall, so add the line below to do this.
  

• 
  We need this to be drawn repeatedly as the game progresses and as things change on the game board. So let’s add a GAMELOOP event. An event is much like an ACTION in TouchDevelop except it is triggered by an EVENT. In this case the EVENT that triggers it is just a timer which triggers the gameloop approximately every 50 milliseconds. This is similar to cartoons where animations are created by moving the characters a little in each frame. The gameloop is the place where your game comes to life.
  

• 
  Select the “add new event” button from the EVENTS group and select gameloop() from the list that pops up.
  

• 
  Select the new gameloop event and inside it enter two lines shown opposite. The first line evolves the gameboard, which basically means it updates the positions of sprites or anything else on the board. The second line updates the board, which means it re-draws the board on the wall.
  

• 
  Run your script and you should now have a black background board in the middle with a red wall behind it. Imagine that the black box is the screen on your phone.
  
• 
  Now let’s add our first sprite to our game. Add the following lines of code into the MAIN action script. The first line adds an ellipse shaped sprite into the game board, with a width of 100 and a height of 100. The second line sets its colour to orange.
  
  
• 
  Run the script and you should see an orange ball in the middle of the screen.
  

• 
  We can add some basic physics into the game by setting gravity. Add the line below, which applies a constant downwards force of 200, simulating gravity which is also a constant downwards force.
  

• 
  Run the script and the sprite should now fall out the bottom of the game board. Below is a diagram demonstrating how the positions work in a TouchDevelop game board, like the one we have been using. This is why setting the Y value of gravity to 200, forces sprites to move downwards, because the bigger the Y position of a sprite gets, the farther down the screen it will appear.
  

• 
  Add the line below which creates a boundary around the game board using the “create boundary” command. Setting the boundary to 0 puts the boundary right around the edge of the board, you can bring this boundary in by setting a negative value or out by giving it a positive value. The sprites hitting the boundary will automatically bounce on it.
  

• 
  Run the script and you should notice that the sprite no longer falls out the bottom, but bounces on the bottom.
  
• 
  Try experimenting with the boundary value to understand what I meant by bringing the boundary in an out. Try 100, then -100 and then experiment with other numbers.
  
• 
  Try changing the gravity, for instance setting gravity to (10, 200) and you will find that the sprite will move to the right as well as down. This could be used to simulate wind blowing from left to right. Try also (0, -200) or (200, 0) and take notice of what happens.
  
• 
  Our final physics lesson for this activity is friction. Pretty much any object in the real world has some sort of resistance acting on it, which acts to slow that object down when it is in motion. This resistance could be caused by air resistance or by friction between an object and the surface it is moving on. Apply a default friction to all objects on our game board by entering the line below. You can try setting the friction to values between 0.0001 and 1.
  

• 
  Run your script again and you should notice that the sprite now comes to a stop after bouncing a number of times.
  
• 
  Another property we can set on a sprite is its speed. The speed is really it’s velocity as it gives the sprite speed on both the x axis and the y axis, which means we are also defining the direction it is moving in as well as the speed (which is velocity).
  
  
• 
  Run the script and the sprite should now move initially quite quickly from left to right, but again gravity and friction take effect pulling it down and eventually bringing it to a full stop.
  
• 
  Another property we can set for a sprite is its position. Enter the line below which will start the ball in the top left corner of the screen.
  
• 
  Run the script and the sprite should come from the top left hand corner of the screen and move across the board in a projectile fashion.
  
  
• 
  Try setting the sprites initial position to (0, 480) and the speed to (400,-200) and see what happens. We have basically simulated projectile physics in this example, much in the vein of games such as Angry Birds.
  
• 
  Experiment with different settings for speed, friction, gravity etc. You could also try using “CREATE RECTANGLE” instead of “CREATE ELLIPSE” which will create a rectangular shape for the sprite instead of a circular one.
  
• 
  Our final activities for this session will involve making our game look nicer. We will replace the sprite ellipse with a proper PNG graphic image of a soccer ball and we will add a nice background image to the game board.
  
• 
  First of all we need to choose a picture. Select “add new art resource” from the art group.
  
• 
  Give the new piece of art the name ball.
  

• 
  You have four choices for choosing the art for your games. The first is to enter a URL to an image (this could be found using your search engine of choice). The 2^nd method is to “search online art pictures” and choose a piece of art already uploaded by another TouchDevelop user. The 3^rd is to search for an image using “search Bing images” and lastly you can upload your own image.
  
• 
  Probably the simplest method is to “search online art pictures” and use one of the 3 images I have uploaded for this activity. Select the button to search online and then type in a description of the art you are looking for and then select it from the matches which appear.
  

• 
  If you are uploading a picture for the ball sprite, select the UPLOAD button. When you go into the UPLOAD window, you must select an image from your hard drive, give it a name and select publish. The image should be a PNG and the white space around the sprite image should be set transparent, something jpegs can’t do.
  

• 
  Repeat this process for another art resource which we want to name “game background”. Search for a suitable image from the online art pictures or upload a suitable background image, either in jpg or png format. Preferrably its size should match the game board resolution we have been using of 800 by 480.
  
• 
  Go back into the MAIN action script and alter the 2 lines which set the board background colour & creates the sprite, by changing it to match the lines below. To select the your art, you must select the art button and then choose the name of your art from the buttons that will appear on the bottom right. You can also delete the line which sets the colour of the sprite as it doesn’t need coloured now that it is a picture.
  
  

If the picture is too big then try entering the following line of code to resize the sprite, by specifying a new width for it.

• 
  Run the script again and you should now have a much nicer looking version, which should look something like the one below.
  

• 
  One final trick before we end this session, let’s make the ball spin based on its horizontal movement. To do this we are going to have to set its rotational speed in the gameloop. To access the sprite in the gameloop it needs to be set to global. So go back into the MAIN action script and PROMOTE the sprite variable to DATA, so that it becomes global.
  
• 
  Next go into the gameloop script and add the following line, which will set the rotation speed of the ball based on the current speed of the ball. If you want to just set the angle of a sprite, rather than the angular speed, use the “set angle” command instead of the one below.
  

• 
  Run the script and you should have a nice simulation of a ball being thrown.
  
• 
  Back out of your game script to the HUB so that it syncs.
  

End of session 1