Avoider Game

Avoider Game App Instructions (Project #3)
(Version 1 of App Inventor)
Description:
App Inventor is a web based tool that allows the user to create apps for Android devices. The Avoider
App employs a canvas, image-sprites, and a timer to control animation events. This lesson combine
timer based animation events with Android’s collision detection and variables to create a simple game.
Elements of Android Animation:
Image Sprites are objects that hold
the data of position, size, orientation,
and graphic. Image Sprites also have
built in collision detection with other
image sprites. The image Sprite is
similar to Actor class we wrote in
Processing Java.
Process:
Part 1: Download the graphics for the Avoider Game
1. Go to the Project 03 on the App Projects Webpage. (http://nebomusic.net/appinventorlessons/ )
2. Click on “Avoider Game Media Files”
(http://nebomusic.net/appinventorlessons/avoidergame/avoidergamemedia/ )
3. Download the asteroid.png, rocket.png, and star_field.jpg files to your App Inventor directory.
Remember, right click and “Save Link As” to save the images.
4. The files should look like this in your App Inventor Folder:
Note the other
graphic files from
the Drum App
Project
Part 2: Building the App User Interface
5. Go to the App Inventor website at: http://ai2.appinventor.mit.edu
6. Click “My Projects” to go to the Project List.
7. Select “New” to start a new App Project. Name the project “LastnameAvoider”. Click OK when done.
8. The first setting we want to change is the screen orientation. The final screen for this app looks like
this:
So we want the App to be in the Landscape orientation. On the Screen1 Properties select “Landscape”
in Screen Orientation:
9. We need a canvas in which to draw the animations. Click on “Basic” in the Palette and drag a Canvas
object to the phone screen.
10. We now need to set the properties for the Canvas1. Set the Width to “Fill parent” and the Height to
“225” pixels.
11. Now click on “Animation” in the Palette and drag three Image Sprites to the Canvas.
12. The Image Sprites do not have any images associated with them – so the screen looks very blank.
Go to the Media Section of the Components and Upload the rocket, asteroid, and star_field graphics.
(Remember to click “Upload New” and then select the graphics and click “OK” for each image)
13. Click on “Canvas1” and Select “star_field.jpg” for the BackgroundImage property.
14. Click on “ImageSprite1” and select “rock.png” for this Sprite’s Picture:
15. For ImageSprite2 and ImageSprite3 – assign the asteroid.png image to the Picture property.
16. The Sprites now need new names to match the images. Use the “Rename” button and name each
object according to its image: (rocket, asteroid1, asteroid2)
17. Resize the Asteroids and Rocket by adjusting the Width and Height Properties. You want the rocket
to be able to fit between the Asteroids when the “fly by”.
18. Click on Screen Arrangement in the Palette and drag a Horizontal Arrangement below the Canvas.
19. Click on Basic in the Palette and drag a Button and a Label object to the HorizontalArrangement.
20. Name the Button1 “btnStart” and the Label1 “lblTime”.
21. Click on btnStart. Set the Test property to “Start” so the user sees “Start”. Set the Width to 75
Pixels.
22. Click on the lblTime. Set the text property to “---“ and the width to 75 pixels.
23. We need one more element in the User Interface. Click on “Basic” in the Palette and drag a Clock to
the phone screen. The Clock will act as the “timer” that will advance the frames of the animation. (Like
the draw() function in Processing).
24. Rename the Clock “timer” and set the TimerInterval to 33 milliseconds. This will have the App
Animate at about 30 frames per second.
25. The User Interface design is finished. In the next section we will program the blocks to make the
game function.
Part 3: Programming the Avoider App
26. Click the “Open the Blocks Editor” to start the Blocks Editor. Remember to click “Keep” on the
bottom left of the screen when prompted.
27. Click the Downloaded Applet to start the Blocks Editor: (Click Run if needed . . .)
28. The Blocks Editor Window should open. Click the “My Blocks” tab to show your objects.
29. We will make the rocket move with touch first. Click on Canvas1 and place a “When Canvas1
Dragged” event block in the programming area.
30. We are going to set the y position of the rocket to match the y position of the touch on the phone
screen. (Like the mouseY value in Processing). Click on the rocket object and drag a “set rocket.Y to”
block into the programming area.
31. Place the set rocket.Y inside the Canvas1.Dragged block.
32. Notice that the ‘rocket.Y’ looks like a puzzle piece. We need to place a value in the rocket.Y block.
Click on ‘My Definitions’ and drag a currentY block to the rocket.Y block.
33. We now will test this on the Emulator. Click the “New emulator” button and then click “OK” when
the message window appears.
34. After the emulator starts, select “Connect to device” and choose the Emulator.
35. The emulator should run the App. Test the App by dragging the mouse on the screen and the rocket
should slide “up and down” with the drag.
36. To turn the emulator, press control-F11 to rotate:
37. We will now make one asteroid move from right to left on the screen. To do this we will use the
timer object to “advance” the animation. Click on the timer object on the left and drag a timer.Timer
block to the screen.
38. Go to asteroid 1 and drag an asteriod1.X block to the screen. We want an .X block because we want
the asteroid to move right to left on the X axis.
39. We now want a ‘minus’ block. To get a ‘minus’ block click the screen one time to get a list of built in
blocks.
40. Click the “Math” block and select “-“
41. The ‘minus’ block should appear.
42. Go to asteriod1.X and find the asteroid.X block. Drag this to the ‘minus’ sign:
43. We now need the number 10 in the second part of the ‘minus’ block. Click the screen to get ‘Math’
again and select ‘123’.
44. Change the ‘123’ to 10 and place it in the ‘minus’ block.
45. Connect the set asteroid.X to the ‘minus’ block: We now have the expression:
asteroid.X = asteroid.X – 10;
// recognize this idea from processing?
46. Place the asteroid.X expression in the timer.Timer block. Note that the asteroid1 will move to the
left of the phone screen and stop.
47. We now need to make the ‘btnStart’ button move the asteriod1 back to the left of the screen. Click
on ‘btnStart’ and drag a ‘when ‘btnStart.Clicked’ to the programming area.
48. We want to reposition the asteroid1. Drag an ‘asteroid1.MoveTo’ into the btnStart.Click
49. For the x position, we want the width of the Canvas, so select Canvas1.width from the Canvas1
block and place it in the x of the .MoveTo block.
50. We want to pick a random y position. Click on the screen and select Math – Random Integer to get
a random block.
51. We want a random number from 0 to the height of the screen. Place the number 0 in the ‘from’
input and ‘Canvas1.height’ in the ‘to’ input.
52. Now connect the ‘random integer’ block to the y input of the .MoveTo block.
53. Click the ‘Start’ button on the emulator. You should see the asteroid move back to the right portion
of the screen and choose a new vertical (Y) position.
54. We now want the asteriod1 to go back to the right side of the screen automatically when it reaches
the edge. This is similar to what we did in Processing. Examine the following code:
if (asteroid.X < 10) {
asteroid.X = Canvas1.width;
asteroid.Y = random(0, Canvas1.height);
}
We are going to build this with the App Inventor blocks. Click on the screen and then click ‘control’.
Choose ‘if’ from control
55. Now click “math” and get a ‘<’ block.
56. Place the ‘<’ block into the ‘test’ of the if block.
57. We now need the expression if (asteroid.X < 10). Add these blocks to the if block:
58. We now want the expression:
asteroid1.X = Canvas1.width;
asteroid.Y = random(0, Canvas1.height);
This is similar to what we have in the btnStart.Clicked block. Add this expression to the inside of the if
statement.
Notice these are the
same expression: Choose
a new random spot for
asteroid1
59. Place the ‘if’ statement inside the timer.Timer block to have the asteroid1 move automatically.
60. We not want to keep track of the time that has passed. To do this we will create a variable called
‘elapsedTime’ Click on the screen and select “Define – Variable”
61. Name the variable ‘elapsedTime’ and set it equal to 0.
62. We are going to add to elapsedTime as the game runs. The expression will be:
elapsedTime = elapsedTime + 0.03;
To build this, first select a ‘set elapsedTime to’ block from ‘My Definitions’
63. Place an add block into the set elapsedTime block (From Math).
64. Place an elapsedTime block in the first space of the add block and a 0.03 in the second.
65. Place the set elapsedTime expression into the timer.Time block.
66. So pass the elapsedTime value to the screen so the user can see the time, place a set lblText.Text
block into the timer.Time block:
67. Now place an elapsedTime value block from ‘My Definitions’ into the lblTime.Text block.
68. To reset the time when the btnStart is clicked, add the following blocks to ‘when btnStart.Clicked’
69. For our last body of commands, we need to add an event to check to see if the rocket is touching
the asteroid1. The code in Processing would look like:
when (asteroid1.collidedWith(other)) {
if (asteroid1.collidedwith(rocket)) {
timer.Enabled = false; // timer stops
}
}
Here are the blocks for the above script. You can find the ‘if’ under control and the ‘false’ under logic.
The block ‘component rocket’ is under rocket.
70. To start the game again we need to re-enable the timer. Add these scripts to the when
btnStart.Clicked:
71. Done! (for one Asteroid). To finish the assignment you need to:
a. Modify the Code to make the 2nd Asteroid work.
b. Add an additional asteroid or other object for the rocket to avoid.
c. Make a sound play or change the screen when the rocket hits an asteroid.
(Hint – add a sound.play block to the code we did in step 69 . . .)
72. Make sure to upload image of programming blocks and App running in emulator to your Google Site
for full credit.