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

Challenges

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

• 
  Set a new game board background using a picture.
  
• 
  Add sound effects for when the ball hits the bats and for when a brick is destroyed.
  
• 
  Use different brick graphics for each row of bricks.
  
• 
  Add a power-up sprite which falls from one of the bricks when it is destroyed, which can be collected by the bat and which will then increase the bat size until the end of the level.
  
• 
  Publish your final game script.
  

End of session 3.

Session 4 – Creating games using the accelerometer

When finished, students will be able to:

• 
  Create a scrolling background
  
• 
  Rotate picture sprites
  
• 
  Make use of the tilt function of the accelerometer
  
• 
  Move multiple sprites at the same time
  
• 
  Shoot a sprite from another sprite based on a touch event
  
• 
  Use prompts to inform the player of something
  
• 
  Prompt the player for a yes/no decision
  
• 
  Use a sprite sheet to create a 2D animated sprite
  
• 
  Create on-screen buttons inside a game for controls
  

When finished, students should have a basic understanding of:

• 
  The Accelerometer
  
• 
  2D animation using sprite sheets
  

Accelerometer

Most mobile devices and tablet devices now contain an accelerometer and a gyroscope. The accelerometer can be used in conjunction with the gyroscope (which reports orientation of the device) to give a reading back on how much a device has been tilted in different directions.

The example below demonstrates how to read these values into a variable. The command I am using below “senses->acceleration quick” gives pretty much instant feedback when the user tilts their device, by returning a Vector3. Vector3 variables contain x, y and z properties and in this case x is the amount of tilt left to right, while y is the amount of tilt forward and back, z is to do with the orientation of the device which is not something we will be using in my exercises (basically whether your device is upside down or not). There are two other commands you may want to experiment with “senses->acceleration smooth” and “senses->acceleration stable”. These commands give feedback over a longer period of time, smooth over a medium time period and stable over a longer time period. I would suggest for games that “acceleration quick” is best as we usually want instant feedback. The value of x will range from -1 to 1, where -1 means the device is tilted all the way to the left, 0 means the device is not tilted at all on the x-axis and 1 means the device is tilted all the way to the right. The value of y will range from -1 to 1, where -1 means the device is tiled all the way forward, 0 means the device is not tiled at all on the y-axis and 1 means the device is tilted all the way back. For both of these the value will usually be somewhere between -1 and 1, for instance x=0.5 would mean that the device is tilted half way to the right.

In the example above I have applied ->scale(360) which basically multiples the x, y and z properties of the vector3 by 360. So instead of getting a value between -1 to 1 it becomes a value between -360 and 360. In this example I am adjusting the x axis speed of a ship sprite by adding the x value accelerometer reading to it, which has the effect of moving the ship sprite to the left as you tilt your device to the left and moving it to the right as you tilt right. Adjusting the scale value will adjust how fast the sprite moves. You could also do this on the y axis using the y reading from the accelerometer, to allow you to move a sprite it any direction just by tilting. If you are using a pc without an accelerometer, most HTML5 browsers allow you to simulate the tilt effect by moving your mouse left, right, up or down.

2D Animation

Most video games make use of some form of 2D animation; one method is to use a sprite sheet, some examples of which are shown below.

TouchDevelop sprites have a “set clip” command which allows you to select just part of a sprite to display; this can be used to create an animation sequence from a sprite sheet. Luckily my friends at Microsoft Research have written a library for doing animations which uses “set clip”, but makes it easy to do and allows you to use multiple sprite sheets.

To use this library first search for “sprite sheet” and add it into libraries in the script you want to use it in.

Then you must initialise it in your main action, as shown below.

You must add the sprite sheet you want to use into the art section of your script. Sprite sheets should generally be png files so that the background can be set transparent. To initialise a sprite sheet and make it ready for use, use the library and issue the set sheet action as shown below. This command gets “cuteman sprite sheet” from art and gives it the identifier Cuteman, it also sets the number of rows to 2 and columns to 8. The example below is for the sprite sheet shown underneath.

We can use the sprite sheet library to create sprites from the sheet, by issuing the command shown below and selecting the row and column numbers of the sprite we want. The command below creates a sprite containing the sprite at row 2 and column 1 from the sprite sheet shown above.

If we want to create an animation which loops through each frame of animation in a sprite sheet, we need to first initialise the sprite sheet in the same way as I demonstrated above, then we issue the “create full animation” action to create an animated sprite. In the example below we have set the duration it takes to play through the animation once to 1 second, if you increase this value the animation will play slower, decrease it and the animation will play faster. The last parameter is how many times the animation should be repeated, if we set it to 3, for instance, it would play through the animation 3 times, in the example below it has been set to -1, which indicates that the animation should repeat indefinitely.

Lastly to make the animation actually update and move through the different frames you must add the line shown below into the gameloop.

Once you have created an animated sprite, you can do all the things to it that you would do to a normal sprite, such as setting friction, speed, position etc.