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

Activity 4a – Creating a basic accelerometer game

• 
  In TouchDevelop create a new “physics game starter” script (name it whatever you want).
  
• 
  Add a ball image into the art section of the new script (I named mine “Soccer ball”).
  
• 
  Make the following changes and additions to the main action, which will set the gravity to 0, set the background to green, set friction at 0.03 and create a boundary around the game board.
  

• 
  Add the lines below into main, to create a global variable for the ball and set its height.
  

• 
  In gameloop add the following 3 lines of code. The first line reads the accelerometer and scales the result up by a multiple of 60. The second line adds the x and y tilt values from the accelerometer to the current speed of the ball, which has the effect of allowing the player to control the balls movement by tilting his or her device. The last 2 lines sets the angular speed (spin) of the ball based on the speed of the ball; this is just to give the effect of the ball spinning faster as it moves faster. We do this by creating a Vector variable based on the ball speed & using its length to set the speed the ball spins at, because the vector length is the speed that the ball is travelling at, no matter what direction it is going in.
  

• 
  Run the script and if possible test it on a device with an accelerometer. If you are using a pc simulate the accelerometer using the mouse.
  
• 
  Experiment with adding some obstacles in. To create your first obstacle, add the following line into the MAIN action.
  

• 
  Test the script with at least one obstacle and see if it works.
  

Challenges

Making use of what you have learnt so far, try and complete the following challenges in your game.

• 
  Add multiple obstacles to create a maze to navigate the ball through.
  
• 
  Set the position of the ball to be at the start of the maze.
  
• 
  Add an ellipse sprite as a hole in the maze for the ball to fall into to complete the level.
  
• 
  Add code into the gameloop to check when the ball touches the hole and display a message to say the level is complete. You can use the
  

wall->prompt command as shown above to do display a message.

Activity 4b – Creating a scrolling shooter game

• 
  In TouchDevelop create a new “physics game starter” script (name it whatever you want). If you remember games like Defender, R-Type, Xenon, 1942; this is the type of game we are going to create.
  
• 
  First let’s select our scrolling background. Start by loading a background image into ART. I suggest you choose one of the following 2 pictures (from search online art pictures) as they are both almost seamless so you won’t be able to easily see the join when we repeat the images as we scroll them, plus they both work well horizontally and vertically.
  

• 
  Add the following changes and additions to the code (marked in red) into the main action to create a vertically scrolling background. The code creates obstacle up the left and right sides of the game board to stop sprites leaving either side. It adds two sprites called back1 and back2 which you must set as global. They each hold the same background picture and it positions the 2^nd background immediately above the 1^st background by subtracting the height of the 1^st background from its y position to give the y position for the 2^nd background. It sets both backgrounds to have the same positive speed vertically on y, which basically moves the two backgrounds downwards to give the impression that we are flying upwards.
  

• 
  If instead you want to create a horizontally scrolling game, use the following code which has minor changes. The minor differences in the code are marked in blue. The main differences are that we create a landscape rather than portrait board. We create obstacles along the top and bottom of the board, instead of the left and right sides. We set the width of the backgrounds to the width of the game board, rather than its height and we set the second background position on the x rather than the y and use the width of the 1^st board, rather than its height to calculate its position. Also we scroll the backgrounds by setting the speed on the x axis, rather than the y axis. The scroll speed is a negative value as we are moving the backgrounds from right to left.
  

• 
  Run the script you have created and you should have a background that scrolls, but after the 2 backgrounds have left the screen, they disappear and it stops scrolling. What we need to do is that when either background leaves the screen, we need to put it back at the top or to the right, of the other background to give the impression of a never ending scrolling background.
  

• 
  Add the following action and call it from the gameloop event. The first version swaps the backgrounds around for a vertically scrolling game and the second version swaps the backgrounds around for a horizontally scrolling game (only add the one you need). The code basically just checks if either background has left the screen and if so it sets a new position by adding the width or height of the other background to its position.
  
  

Remember that the position of a sprite is the middle of it, which is why I am subtracting half of the height to calculate the top of the background in the first example and adding half of the width in the second example to calculate the right hand side of the background. Don’t forget to call the action as shown below from the gameloop.

• 
  Run the script and make sure the backgrounds scroll indefinitely. Feel free to adjust the scroll speed as you see fit.
  
  

• 
  Next let’s add the user controlled spaceship to the game. Create an art resource called spaceship and choose or upload a suitable image for it. The one I choose was the third image shown opposite, but feel free to choose your own graphic.
  
• 
  Add the code below after the previous code in the main action, to initialise a sprite variable for the ship. The left hand side code is for the vertical scrolling version and the right hand side is for the horizontally scrolling version. The only difference is the starting positions of the ship and on the horizontal version we rotate the ship sprite 90 degrees so it is facing to the right. This is only necessary if you are using an image where the ship faces upwards, if your image is already facing to the right you won’t need to do this.
  

• 
  Add the following code to the gameloop event which will allow you to move the spaceship using tilt. The code on the left hand side is again for the vertical version and the right hand side is for the horizontal version. Feel free to adjust the scale as need be. In the vertical version we are allowing the player to move the ship left and right, whereas in the horizontal version we are allowing the player to move the ship up and down. You could put both set speed lines in and allow the player to move the ship in all directions.
  

• 
  Run the script and test that it works correctly.
  
• 
  Next we will add multiple alien ships using a sprite set, but first we need to add an art resource for the aliens. The one I choose is shown opposite.
  
• 
  Declare a sprite set for the aliens in main as shown below.
  

• 
  Add the following code into an action to spawn alien enemies (left is vertical and right is horizontal). It creates a sprite using an art resource that I’ve just named alien. The methods set the width of the sprite and randomly generate a position for the sprite off screen at the top or to the right, depending on which version of the game you are creating. It also randomly generates a speed for the enemy ship, on either the y axis or the x axis depending again on whether it’s horizontal or vertical. Lastly it adds the sprite into the enemies sprite set.
  

• 
  Next add the action shown opposite which will use the action above to spawn multiple aliens. We will use this action to spawn extra waves of aliens and also when the game restarts. The first thing we do in it, is to delete any existing alien sprites from the game board using a FOR EACH loop and the delete command. Then we issue a clear command for the enemies sprite set to remove all sprites from it. Lastly we use a FOR loop to spawn multiple aliens by repeatedly calling the “spawn enemy” action. The number of aliens we want is passed into the action as a parameter called “number to spawn”.
  

• 
  Add one more action called “Reset game”, in which we will initialise everything that needs reset at the beginning of each new game. So we declare global variables for score and lives and assign initial values. We will also set the initial number of aliens and call the “spawn alien wave” action to create the sprite set. Make sure you call this new action from the main action as shown opposite.
  

• 
  Run this script and the aliens should appear and move. However you will find that they don’t re-spawn after they leave the screen.
  
• 
  So let’s add another action called “check aliens” which will use a FOR EACH loop to go through each alien and check if it leaves the screen. If it does leave the screen we will remove it from the sprite set, delete it from the game board and spawn a new alien in its place by calling “spawn enemy”. If it doesn’t leave the screen we check to see if it has hit the ship, in this case we remove it from the sprite set and delete it from the board, but we do not re-spawn it, instead we subtract a live from the player. The code shown below is for the vertical version. Make sure you call this action from inside gameloop.
  
  

If you are creating the horizontal version then just change the initial IF condition to the one shown below, to check for them leaving the left hand side rather than the bottom of the screen, the rest of the code is the same as shown above.

• 
  Run the script again and make sure that the aliens re-spawn when they leave the screen.
  

• 
  Next we want to add the ability to shoot at the aliens and for them to shoot back. In this game we are just going to add one rocket for the player and one for the aliens, but you could easily add multiple rockets using a sprite set. Add at least 2 art resources to your game for the rockets for both sides to fire.
  

• 
  Add the following lines of code into the main action to create sprites for each rocket. The reason we are hiding the sprites, is because we don’t want them displayed before they have been fired. Depending on the art you chose, you may need to use the “set angle” command to make sure the rockets are pointing in the correct directions. I named my art resources “Rocket” and “Enemy fire” so make sure to choose the correct name for the art you added.
  

• 
  Next let’s add an action to shoot the rocket sprites, which can be used for both sides. We pass into this action the sprite we want to shoot, a speed for the rocket and x and y co-ordinates for the position to fire the sprite from. The IF condition checks to see that the sprite is NOT already visible on the screen before trying to shoot it. It then sets the sprite to visible by using the SHOW command, sets the initial position of the sprite and assigns speed to it. If you are making the horizontally scrolling version change the line which sets the speed to set the speed on the x axis rather than the y as shown below.
  

sprite->set speed x(speed)

• 
  We need to have a way of firing the rocket from the player’s spaceship, let’s make it so that when the player touches the screen that the rocket fires (you can simulate this on a pc by clicking the LMB). We can do this by checking board->touched in an IF statement as shown below and then we call the shoot action passing in the rocket sprite, a speed of -450 (change it to 450 for horizontal) and the x & y positions of the ship so the rocket will fire from the current position of the player’s spaceship. The second IF statement checks for the rocket leaving the screen at the top and hides it when it does so it can be re-fired.
  

• 
  If you are creating the horizontal version change the IF statement to check for the rocket leaving the right-hand side of the screen as shown below.
  

• 
  Run the script and check that you can fire the rocket from the spaceship and when it leaves the screen that you can fire it again.
  
• 
  Go into the “check aliens” action and add in the following IF statement against the ELSE part of the last IF statement. This code checks if an alien is hit by a rocket which is visible on the game board. If this is the case it then hides the rocket, removes the alien from the sprite set, deletes the alien sprite from the game board and adds 5 points to the score for destroying an alien ship.
  

• 
  Run the script now and check that the player’s rocket can destroy the alien ships.
  
• 
  Before we go much further it would be useful if score and lives were displayed on the screen. Go into the main action and declare a text sprite as shown below. I am setting the width of the sprite to the full width of the game board and then setting the position of the sprite to be in the middle of the screen on the x-axis, by setting the x position to the board width divided by 2.
  

• 
  Next we need to update the score board text sprite in the gameloop so that it displays the current score and lives. Do this by adding the line below into gameloop.
  

• 
  Run the script and make sure score and lives appear. Shoot some aliens and check that score is assigned and run into some aliens to make sure that you lose a life.
  

• 
  Next we are going to add code into the “check aliens” action which will fire a rocket from the alien ships when they are in line with the player’s spaceship. So add the code below at the end of that action.
  

Make sure that the IF above is being added against the previous ELSE statement, this is because if any of the previous IF conditions are true then the alien ship will not be in a position to fire a rocket, since it will either have left the screen or been destroyed. Due to this statement being added into a FOR EACH loop which loops through all the aliens, this code will check if any of the aliens are in line with your spaceship and shoot a rocket if it is. It does this by checking if the left hand side of the alien is less than the centre position of the spaceship and checking that the right hand side of the alien is greater than the centre position of the spaceship, which means the alien is directly above the spaceship.

If you are creating the horizontally scrolling version of the game, use the code below instead. Notice the minor differences, which check if the aliens are in line with the spaceship horizontally rather than vertically.

• 
  We also need to check if the alien rocket leaves the screen and if the alien rocket hits the spaceship. So add the following code into either the gameloop or the “check alien” action, either place is fine (I went for putting it into the “check alien” action). If you are adding it into the “check alien” action be careful that you don’t put it inside the FOR EACH loop, as that would be very wasteful. Use the diagonal arrow button to make sure the new line you add for the code is as far to the left as you can make it, so that it is not contained within a previous condition.
  

• 
  Go through the 2 IF statements you just added and make sure you understand fully what they do, check with your tutor if you don’t. An important part of learning to code, is being able to read code, much like when you are learning a language like English or French, it helps to be able to read it; being able to read code helps you write it.
  
• 
  If you are making the horizontal version of the game, then change the first IF statement above to check for the rocket leaving the left hand side of the screen rather than the bottom of the screen; as shown below.
  

• 
  Add the following code into the gameloop or into the “check aliens” action, either place will work. This code checks if all the sprites have been removed from the enemies sprite set, and if the number of sprites left is 0, then we use the wall->prompt command to inform the player that a new wave of aliens is about to begin. We also increase the “number of aliens” variable by 5 for the next wave and then call the action to spawn the next wave.
  

• 
  The game is almost complete; however we will also need to have an action to call whenever the game is over, to deal with it. So add in the action shown below. This action prompts the player to tell them the game is over, it then clears the wall and posts the leaderboard to it. It then pauses for 5 seconds before prompting the player to see if they want to play again or not.
  

• 
  Lastly we just need to check for lives reaching zero and call the action we just added if it does. So add in the code below into the gameloop.
  

• 
  Run the script and check that the game is now fully working. Debug any errors that you find. The game should look something like the screenshot opposite.
  

• 
  To finish the game off let’s add some 2D animated explosions, for when the player destroys an alien ship. Add an art resource by searching the online art pictures for the 2D sprite sheet shown below; name it “explosion sprite”.
  

• 
  Go into Libraries and add in the “sprite sheet” library.
  
• 
  Go into MAIN and add the following 2 lines at the end. The first line just initialises a sprite sheet for your game board. The second line loads in the explosion sprite into a sheet that I have called “explosion”. The numbers being passed in at the end are the number of rows and columns in the sprite sheet, it is vital to get this correct. So if you choose a different animation then make sure you change these numbers to match.
  

• 
  In gameloop add the following line to evolve (update) the sprite sheet as and when the animation is used.
  

• 
  Lastly go into the “check aliens” action and add the last 2 lines shown below, inside the IF statement that checks for aliens being hit by the player’s rocket. The first line creates a sprite containing the full animation, the first number being passed in sets the length the animation takes to play through once to 1 second and the second number passed in is the number of times to play the animation, which is this case is once. The second line of code just sets the position of the animation sprite to the last position of the rocket, so that the explosion will appear where the rocket hits the alien ship.
  

• 
  Run the game and you should have an animated explosion each time you destroy an alien with a rocket.