The interface for the BreakDroid android application is minimal, but it gives you a sandbox to play around in to explore sprite interaction. You use two canvas components for the game play
interface. The first is the canvas for the block sprites, paddle, and ball. The second is used as
a control interface to control the paddle. You use the Screen1.Title to display score information much as you did with the TwiTorial project.
1. Start a new project and name it BreakDroid.
2. Set the Icon with the icon file from the project files that you downloaded from the companion Web site.
3. Uncheck the Scrollable property.
Next, place all of the Canvas and Sprite components for the game play interface.
1. Drag and drop a Canvas component onto the viewer. Set its Height and Width property to Fill Parent.
2. Drag and drop six ImageSprites from the Animation palette onto the canvas. Align
them across the top of the canvas, as shown in Figure BC-1.
3. Rename the ImageSprites sprtBlock1 through sprtBlock6. You should end up
with six sprites with sequential names. These are the blocks that disappear when the Ball sprite collides with them.
4. Upload the block.png fi le from the project files into the Media column so it can be applied to your sprites. If you need instructions on downloading the project fi les from the companion Web site, see the Introduction to this book.
5. Set the Image property of each sprtBlock to the block.png.
6. Drag and drop a Ball component in the center of the canvas.
7. Drag and drop a new ImageSprite at the bottom of the canvas. Set the component
name to sprtPaddle. Set its Image property to the paddle.png fi le from the project
fi les. This is the paddle that interacts with the ball. The Control paddle you will add
moves this paddle to catch the ball and bounce it back toward the blocks.
8. Drag and drop a new Canvas component below the Canvas1 component.
9. Set the new Canvas2 Width property to Fill Parent. Set the Height property to 40 pixels.
10. Set the BackgroundColor property to Grey. This gives the second canvas some visual separation.
11. Drag and drop a new image sprite into the second canvas. Rename it sprtControl Paddle.
Th is is a control mechanism for the paddle. If the user has to drag the paddle with a direct tap, their fi nger blocks the screen. You use a “ghost” paddle whose actions the real paddle mirrors.
12. Apply the paddle.png image from the project fi les just as you did with the main paddle, to sprtControlPaddle.
Next, add your two interface buttons. You have a Start button to allow the user to start the
ball moving. You also place a Reset button to completely reset the game interface and allow
the user to start over. As I mentioned previously, this is just a framework and would require
other processes and some retooling to be a workable game.
1. Drag and drop a HorizontalArrangement below the second Canvas component.
2. Drag and drop a button into the HorizontalArrangement. Change the Text property to
Start and rename it btnStart in the Component column.
3. Drag and drop a second button into the HorizontalArrangement and rename it
btnReset. Set the Text property to Reset.
Those are all of your basic interface elements for the BreakDroid android application. Most of the fun
begins in the Blocks Editor. The BreakDroid android application interface should look like Figure BC-2.
Figure BC-:
The BreakDroid user interface
Start adding the logic and sprite interaction by following these steps:
1. Open the Blocks Editor and typeblock the Screen1.Initialize event handler.
2. Typeblock the Screen1.Title [to] block and snap it into the event handler.
3. Typeblock a text block and set the text to Press start and use lowest paddle
to move game paddle. This gives the user some indication of how to utilize your interface. You later change the Screen1Title to display the user’s score.
Each time the Ball sprite collides with a block sprite, you need to increment a score variable,
update a score display, and make the block disappear. This is one rudimentary way you could
handle scoring or collision events. Depending on your game type, collision events might need
to be recorded and checked. For instance, you might want to record the number of times a
sprite is hit and then check to see if that number is high enough to consider the sprite “dead.”
In the following steps, you create a procedure called procScoreIncrement. You call this
procedure each time a block/ball collision occurs.
For this case, a simple incrementing of the variable and display in the Screen1.Title is suffi cient:
1. Defi ne a new variable and change its name to varScore.
2. Typeblock a 0 number block and snap it into the score variable.
3. Typeblock a new procedure and name it procScoreIncrement.
4. Typeblock the varScore [to] block and snap it into procScoreIncrement.
5. Typeblock an addition (+) block. Snap it into the varScore block.
6. Typeblock the varScore global variable block and snap it into the fi rst socket on the
addition (+) operator.
7. Typeblock a numeral 1 number block and snap it into the second open socket on the addition (+) operator.
8. Typeblock the Screen1.Title [to] block and snap it into the procScoreIncrement procedure next.
9. Typeblock a join block and snap it into the Screen1 block.
10. Typeblock a text block and change the text to BreakDroid Score. Snap it into the fi rst socket on the join block.
11. Typeblock the varScore global variable block and snap it into the second socket on the join block.
Every time the procScoreIncrement procedure is called, the varScore variable is incremented and the score display in the Screen title bar is updated.
NOTE Currently the title bar cannot be removed. Using it as a display method for data is a smart
use of screen area. You also need to call a reset procedure to reset the ball when it misses the paddle. This includes returning the ball to a given X/Y position and resetting its heading and speed: