ACS-1805 Introduction to Programming Chapter 05: Ladybug Chase 2019-01-29 1
What You Will Build The Ladybug Chase app In the app the user can: o Control a ladybug by tilting the device o View an energy-level bar on the screen It decreases over time and leads to the ladybug s starvation o Make the ladybug chase and eat aphids to gain energy and prevent starvation o Help the ladybug avoid a frog that wants to eat it 2019-01-29 2
What You ll Learn Using multiple ImageSprite components and detecting collisions between them. Detecting device tilts with an OrientationSensor component and use it to control an ImageSprite Changing the picture displayed for an ImageSprite Drawing lines on a Canvas component Controlling multiple events with a Clock component Using variables to keep track of numbers (the ladybug s energy level) Creating and using procedures with parameters Using the "and" logical block 2019-01-29 3
MoleMash 2019-01-29 4
Ladybug Chase 2019-01-29 5
Designing the Components This application will have o a Canvas that provides a playing field for the three ImageSprite components: one for the ladybug one for the aphid one for the frog o It will also require a Sound component for its ribbit o An OrientationSensor will be used to measure the device s tilt to move the ladybug o A Clock will be used to change the aphid s direction o A second Canvas that displays the ladybug s energy level o A Reset button will restart the game if the ladybug starves or is eaten 2019-01-29 6
Components Component Type Palette group What you will name it Purpose Canvas Drawing and Animation FieldCanvas Playing field. ImageSprite Drawing and Animation LadyBug User-controlled player. OrientationSensor Sensors OrientationSensor1 Detect the phone s tilt to control the ladybug. Clock User Interface Clock1 Determines when to change the Image Sprites headings. ImageSprite Drawing and Animation Aphid The ladybug s prey. ImageSprite Drawing and Animation Frog The ladybug s predator. Canvas Drawing and Animation EnergyCavas Display the ladybug s energy level. Button User Interface RestartButton Restart the game. Sound Media Sound1 Ribbit when the frog eats the ladybug. 2019-01-29 7
Ladybug Analysis and Design 2019-01-29 8
Getting Started Prepare the prerequisites o Download the following files: http://appinventor.org/bookfiles/ladybugchase/ladybug.png http://appinventor.org/bookfiles/ladybugchase/aphid.png http://appinventor.org/bookfiles/ladybugchase/dead_ladybug.pn g http://appinventor.org/bookfiles/ladybugchase/frog.png http://appinventor.org/bookfiles/ladybugchase/frog.wav o Upload them to your app in the Media section of the Designer Connect to the App Inventor website and start a new project o Name it Ladybug-Chase and also set the screen s title to Ladybug Chase o Connect to the device 2019-01-29 9
Placing the Initial Components Work on one part at a time o test it then move on to the next part of the program Now we concentrate on creating the ladybug and controlling its movement o Create a Canvas Name it FieldCanvas Set its Width to Fill parent and its height to 300 o Place an ImageSprite on the Canvas Rename it "Ladybug" Set its Picture property to the ladybug image 2019-01-29 10
Placing the Initial Components oother properties of an ImageSprite that are new to us The Interval property It specifies how often the ImageSprite should move itself Set it to 10 (milliseconds) The Heading property It indicates the direction in which the ImageSprite should move in degrees 0 means due right 90 means straight up 180 means due left 270 means straight down 2019-01-29 11
Placing the Initial Components The Speed property It specifies how many pixels the ImageSprite should move whenever its Interval (10 milliseconds) passes oadd an OrientationSensor oadd a Clock Set its TimerInterval to 10 milliseconds 2019-01-29 12
Something For Testing on Phone If you use a real mobile device (instead of an emulator) for testing o You ll need to disable autorotation for the screen That changes the display direction when you turn the device Select Screen1 and set its ScreenOrientation property to Portrait 2019-01-29 13
Moving the Ladybug Create Two procedures o UpdateLadybug It uses of two of the OrientationSensor s most useful properties: Angle - It indicates the direction in which the device is tilted (in degrees). Magnitude - It indicates the amount of tilt, ranging from 0 (no tilt) to 1 (maximum tilt). Multiplying the Magnitude by 100 This tells the ladybug that it should move between 0 and 100 pixels in the specified Heading (direction) whenever its TimerInterval (10 miliseconds) passes If you find the ladybug s movement too sluggish, increase the speed multiplier If the ladybug seems too jerky, decrease it o Clock1.Timer It calls UpdateLadybug 2019-01-29 14
Moving the Ladybug 2019-01-29 15
Displaying the Energy Level Adding a canvas o Place it beneath FieldCanvas o Name it EnergyCanvas o Set its Width property to Fill parent o Set its Height to 3 pixel Creating a variable: energy o Create a variable energy with an initial value of 200 This variable is used to record the ladybug s energy level 2019-01-29 16
Displaying the Energy Level Drawing the energy bar owe want to show the energy level with a red bar It has a length in pixels equal to the energy value Draw a red line from (0, 1) to (energy, 1) in EnergyCanvas to show the current energy level Draw a white line from (0, 1) to (EnergyCanvas.Width, 1) in FieldCanvas to erase the current energy level before drawing the new level 2019-01-29 17
Displaying the Energy Level owe use a better alternative to handle these two drawings Create a procedure that can draw a line of any length and of any color in EnergyCanvas To do this, we must specify two parameters when our procedure is called length color 2019-01-29 18
Displaying the Energy Level Creating the DrawEnergyLine procedure Click the little blue square at the upper left of the new procedure This opens a new window From the left side of this window, drag an input to the right side Change its name from x to length This indicates that the procedure will have a parameter named length Repeat for a second parameter named color 2019-01-29 19
Displaying the Energy Level Add comments 2019-01-29 20
Displaying the Energy Level Creating the DisplayEnergy procedure It calls DrawEnergyLine twice Once to erase the old line (by drawing a white line all the way across the canvas) Once to display the new red line 2019-01-29 21
Starvation Game over if o the ladybug fails to eat enough aphids o it is eaten by the frog o In GameOver procedure We want the ladybug to stop moving Set Ladybug.Enabled to false Change the picture from a live ladybug to a dead one 2019-01-29 22
Update the Ladybug s Move Procedure UpdateLadybug o It is called by Clock.Timer every 10 milliseconds o Perform following tasks Decrement its energy level Display the new level End the game if energy is 0 2019-01-29 23
Adding an Aphid Adding an ImageSprite o Set its Picture property to the aphid image file o Set its Interval property to 10 o Set its Speed to 2 so it doesn t move too fast for the ladybug to catch it 2019-01-29 24
Adding an Aphid Controlling the aphid oit worked best for the aphid to change directions approximately once every 50 milliseconds One approach to enabling this behavior would be to create a second clock with a TimerInterval of 50 milliseconds Try a different technique Using the random fraction block It returns a random number greater than or equal to 0 and less than 1 each time it is called 2019-01-29 25
Adding an Aphid Create the UpdateAphid procedure o Whenever the timer goes off A random fraction between 0 and 1 is generated If this number is less than 0.20 (which will happen 20% of the time) The aphid will change its direction to a random number of degrees between 0 and 360 If the number is not less than 0.20 (which will be the case the remaining 80% of the time) The aphid will stay the course 2019-01-29 26
Adding an Aphid 2019-01-29 27
Programming the Ladybug to Eat the Aphid Use blocks for detecting collisions between ImageSprites o What should happen when the ladybug and the aphid collide Increases the energy level by 50 to simulate eating the tasty treat Causes the aphid to disappear (by setting its Visible property to false) Causes the aphid to stop moving (by setting its Enabled property to false) Causes the aphid to move to a random location on the screen Just like what we did in MoleMash 2019-01-29 28
Programming the Ladybug to Eat the Aphid 2019-01-29 29
Detecting a Ladybug-Aphid Collision How it works o When Ladybug collides with another ImageSprite If That ImageSprite is aphid (defensive programming) AND the aphid is alive Then Call EatAphid 2019-01-29 30
The Return of the Aphid Modify UpdateAphid o If the aphid is visible, changes its direction o If the aphid is not visible There is a 1 in 20 (5%) chance that it will be re-enabled 20*10miliseconds 2019-01-29 31
Adding a Restart Button After game over it needs a Restart Button o What it will do Set the energy level back to 200 Re-enable the aphid and make it visible Re-enable the ladybug and change its picture back to the live ladybug 2019-01-29 32
Adding the Frog Getting the frog to chase the ladybug o Add a third ImageSprite Frog to FieldCanvas o Set its Picture property to the frog picture its Interval to 10 its Speed to 1 2019-01-29 33
Setting Up the Frog to Eat the Ladybug If the ladybug and the frog collide o The variable energy goes down to 0 because the ladybug has lost its life o DisplayEnergy is called to erase the previous energy line (and draw the new, empty one) o The procedure GameOver is called stop the ladybug from moving change its picture to that of a dead ladybug 2019-01-29 34
Setting Up the Frog to Eat the Ladybug 2019-01-29 35
The Return of the Ladybug Back to RestartButton.click o Move the live ladybug to a random location The built-in function random integer is called twice once to generate a legal x coordinate once to generate a legal y coordinate 2019-01-29 36
Adding Sound Effects To make the game more lively o You may want to add some feedback when something is being eaten Implementation o In the Component Designer, add a Sound component. Set its Source to the frog.wav sound file you uploaded. 2019-01-29 37
Adding Sound Effects ogo to the Blocks Editor Make the device vibrate when an aphid is eaten by adding a Sound1.Vibrate block with an argument of 100 (milliseconds) in EatAphid Make the frog ribbit when it eats the ladybug by adding a call to Sound1.Play in Ladybug.CollidedWith just before the call to GameOver 2019-01-29 38
The Complete Set of Blocks 2019-01-29 39
The Complete Set of Blocks 2019-01-29 40