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


Activity 3 – Creating a Breakout clone



Yüklə 197,55 Kb.
səhifə7/10
tarix21.06.2018
ölçüsü197,55 Kb.
#50331
1   2   3   4   5   6   7   8   9   10

Activity 3 – Creating a Breakout clone


  • In TouchDevelop create a new “physics game starter” script and name it Breakout or something similar, as we are going to recreate the classic arcade game of the same name.

  • Go into the main action and set the gravity to (0,0) effectively turning it off.

  • Add the line of code shown opposite to set the game board background colour to black.



  • Go to the Art group and add a new art resource. I suggest you search the online art pictures and choose a picture of a ball. Change the name the new art resource to ball.

  • In the main action create a new global variable called ballsprite and load the new art resource into it. The second line below, uses a command called “set width”, which as you might imagine, sets the width of the sprite in pixels. This basically resizes the graphic, but it does it proportionality, so you don’t need to resize the height as well, but if you do want to there is a command for “set height” also.



  • Next let’s create a new action for firing the ball. Notice that I’ve added two input parameters, which I’ve named x and y, this is so we can pass in the position of where we want the ball to start at. To add a parameter you click on the name of the action, where it says “private action fireball” and then select the “add input parameter” option. The action simply sets the position of the ball to the x and y values that are passed in and then generates a random speed on the x axis and a negative random speed on the y axis to make sure the ball travels upwards first.



  • In Pong we used IF statements to check for the ball hitting the top and bottom of the screen, but there is another way to do it in TouchDevelop, we can use something called obstacles. In Breakout the ball bounces off the left, top and right sides of the screen, but not the bottom, so we want to create single line obstacles around those 3 sides of the screen. Add the 4 lines of code below into the MAIN action. The first line fires the ball from the bottom middle of the screen. The 2nd line creates an obstacle across the top of the screen, the 3rd line creates an obstacle on the left hand side and the 4th line creates an obstacle on the right hand side. You specify the obstacle by giving it a start position (x & y) and then setting the x segment which is the width & the y segment which is the height, lastly the final parameter is how much of a bounce the obstacle should cause, which is a value between 0 and 1 (try setting it to 0.5 to see the difference it makes).



  • Let’s add in the user controlled bat, much in the same way as we did for Pong.

  • First go to the art group and add in a suitable graphic for the bat. You can search online art pictures, search Bing images or upload your own. You can even go onto the World Wide Web and find a free image using your favourite search engine and copy and paste the URL in. Name the art resource as bat.

  • Next add in a global sprite variable called userbat and load the bat graphic into it as shown below. Notice that we are also setting the size of the bat by setting its width to 100 and we are setting the position of the bat to near the bottom middle of the screen. I have suggested that you move the bat up 80 pixels from the bottom of the screen, this is because we are going to use touch control for moving the bat in the same way as we did in Pong and we need to leave room for the user to put their finger on the screen while still seeing the bat. Notice that I have also changed the position of where the ball fires from so that it now fires from the top of the bat.

To set the ball so that it starts on top of the bat, we first set the X positions of the 2 sprites the same; this is because the position of a sprite is the centre point of the sprite as shown in the diagram below. To move the ball to sit on top of the bat, we take the Y position of the bat and subtract half of the height of bat from it and also subtract half of the ball height. The diagram below illustrates this.





  • Run the script and you should find that the bat is displayed and the ball fires from on top of the bat.

  • Add the following lines of code (within the red box) which will check for the user touching the screen. When this occurs it will set the x position of the bat based on where the user touches the screen.

The code above works perfectly on a touch screen device, but you may have a bug when using it with a mouse on a pc as you will be able to click outside the screen and put the bat off screen. If you want to stop this happening, replace the IF statement above with the one below, which will only move the bat if the user touches within the board area.





  • Run the script and make sure you can control the bat by touching the screen or by holding down the LMB on the mouse and moving your mouse (if you are using a non-touch screen computer).

  • Next let’s re-spawn the ball when it leaves the bottom of the screen. To do this we use an IF statement, with the condition being that the ball position on the Y is less than the bottom of the screen. So enter the following code into the gameloop action.



  • Run the script and test that the ball re-spawns when it leaves the bottom of the screen.



  • Next we need to make the ball bounce off the bat. To do this we use an IF statement with the condition being does the ball overlap with the bat. If it does then we set the speed of the ball on the Y axis to negative to make it go back up the way. Add the code below into the gameloop action.



  • Run the script and check that the ball bounces off the bat.

  • Breakout uses some special game physics, much like in Pong, to allow the player to aim the ball depending on the part of the bat the ball hits off. If the ball hits to the left of the bat, it sends the ball to the left, if it hits to the right, the ball bounces upwards and to the right. To do this correctly, involves some Vector Maths, which I’ve done for you in a small library. Add the “game events” library to your script, the same one we used in Activity 1b.



  • Go back into gameloop and change what happens when the ball overlaps with the bat, by deleting the original line of code and replacing it with the 2 lines shown below. We pass the speed (x and y) of the ball and the x positions of the bat & the ball into the “bat collisions” action and it returns a new x and y speed for the ball.



  • Run the script and test that the collisions work properly and that you can aim the ball depending on the part of the bat it connects with.



  • Next we need to add in our bricks. First let’s add a sprite set for our bricks as we will need a lot of them, which means we will be making use of collections for the first time. Add the line below at the end of the MAIN action to create a sprite set.

  • Go into the art group and add a suitable brick graphic and call it brick.



  • Next we will add a new action called “add bricks” which will add the bricks and set the individual positions of each brick. So create the action shown below.



  • The action you just entered to create the bricks may seem a quite complicated action if you are new to programming. The action takes in two parameters which set the number of rows and columns of bricks. We issue the bricks->clear command to make sure the sprite set is empty. We declare variables called firstx and firsty, which will be used to set the position of the first brick in the set. We declare variables called xspacing and yspacing which will be used to set the gaps between the bricks. Feel free to change these values and see what happens. Next we create 2 FOR loops, one which loops from 0 up to the number of rows and then another FOR loop inside the first FOR loop which loops from 0 up to the number of columns. This means that if we pass in 4 rows and 10 columns, the code inside the two FOR loops will repeat a total of 40 times. Inside the FOR loops we create a brick sprite and load the brick picture into it. We set the width of the brick to 60 (again feel free to alter this) and then we set the x and y positions of each bricks to lay them out in rows and columns, making use of the first bricks position and the spacing variables. Lastly we add the new sprite into our bricks sprite set. This repeats until both FOR loops have completed.




  • Go back into MAIN and add in the following line to call this new action and create a sprite set of bricks.



  • Run the script and you should have rows and columns of bricks on the screen as shown below.



  • One major thing is missing; the ball doesn’t break the bricks! So let’s make this happen. Add a new action into the code group called “check bricks”. Then add the following code which uses a FOR EACH loop to loop through all the bricks and check for collisions between them and the ball. If a collision occurs the brick is removed from the sprite set and the sprite is deleted.






  • Call the “check bricks” action from the end of the gameloop as shown opposite.

  • Run the script and check that the bricks get destroyed when they are hit by the ball.

  • One glitch with our script is that the ball destroys the bricks and keeps going right through the space where the brick was and does not bounce off them, which is not meant to happen in breakout. Since TouchDevelop checks for sprites overlapping rather than touching, we need to create 2 new variables to hold the x and y positions of the ball sprite just before it overlapped with the brick. So we will declare 2 new global variables to do this by adding the following 2 lines at the bottom of the main action.



  • Add the code on the next page into the “check bricks” action. It will check which side of the bricks has been hit and make the ball respond accordingly. The first IF checks for the ball hitting the left hand side of the bricks and sends the ball left if it does. The second IF checks for the ball hitting the right hand side of the bricks and sends the ball right if it does. The third IF checks for the ball hitting the top of the bricks and sends the ball upwards if it does. The fourth IF checks for the ball hitting the bottom of the bricks and sends the ball downwards if it does. The local hit Boolean variable is used to store whether a collision has occurred with any of the bricks and if none have occurred the IF statement at the end (which is outside of the FOR loop) just stores the current position of the ball sprite into the “ball oldx” and “ball oldy” variables that we created.



  • Run the script and check that the ball bounces correctly off each side of the bricks. Carry out some further play testing to make sure that the ball responds correctly when it collides with the bricks.

  • You might be wondering why I have divided the height and width of the ball by 3 instead of 2, in the conditions for the IF statements; this is because we are dealing with a circular object not a square object. Using a third of the width and height rather than a half, works better, especially when the ball hits the corner of a brick as shown in the diagram above.

  • Now that we have the game mechanics working, we just need to add score, lives and a counter so we know when the bricks are cleared, so we can spawn a new level. Since we will need to spawn a new level, let’s extract the line which creates the bricks into a new action called “new level”.




  • Add the following lines of code at the bottom of the main action to create 4 new variables to store the lives, score and to display lives and score on the screen. Also make sure you still call the “new level” action to create the bricks.




  • Add the code marked in red opposite, into the “check bricks” action. It will assign 5 points for each brick destroyed. It will also check for when all the bricks have been destroyed by checking the number of sprites left in the bricks sprite set, using the count command which returns the number of items like in a collection. When this happens it will call the “new level” action to re-spawn all the bricks for a new level.



  • Add the following 2 lines (marked in red) at the top of the gameloop action to update the text which displays the current score and lives, before the board is updated on the wall.



  • Create the following new action called endgame, which will post scores to the global leaderboard, display a “Game Over” message and then stop the script.



  • Add the following code (marked in red) into the gameloop action, which will subtract one from lives when the ball leaves the screen and end the game when lives becomes 0.



  • Run the script and check that the game functions correctly; in that score is added, lives are lost, bricks re-spawn if they are all cleared and that the game ends correctly.




  • Finally let’s add a couple extra things to make the game interesting. Add the code below at the end of the gameloop. It will gradually increase the speed of the ball to make the game more difficult as time goes on and it will spin the ball depending on the “speed x” property of the ball sprite.



  • Run the script and check that everything works.



Yüklə 197,55 Kb.

Dostları ilə paylaş:
1   2   3   4   5   6   7   8   9   10




Verilənlər bazası müəlliflik hüququ ilə müdafiə olunur ©genderi.org 2024
rəhbərliyinə müraciət

    Ana səhifə