ACS-1805

Introduction to Programming
(with App Inventor)
Chapter 7

Ladybug Chase

10/4/2017 1
 What You Will Build
The Ladybug Chase app
In the app the user can:
Control a ladybug by tilting the device
View an energy-level bar on the screen
It decreases over time and leads to the ladybugs starvation
Make the ladybug chase and eat aphids to gain energy
and prevent starvation
Help the ladybug avoid a frog that wants to eat it

10/4/2017 2
 What You Will Learn
Review what we learned in MoleMash
New materials
Using multiple ImageSprite components and detecting
collisions between them
Detecting device tilts with an OrientationSensor component
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 ladybugs
energy level)
Creating and using procedures with parameters
Using the "and" logical block

10/4/2017 3
 Designing the Components
This application will have
a Canvas that provides a playing field for
the three ImageSprite components:
one for the ladybug
one for the aphid
one for the frog
It will also require a Sound component for its ribbit
An OrientationSensor will be used to measure the
devices tilt to move the ladybug
A Clock will be used to change the aphids direction
A second Canvas that displays the ladybugs energy
level
A Reset button will restart the game if the ladybug
starves or is eaten
10/4/2017 4
 Components

10/4/2017 5
 Getting Started
Prepare the prerequisites
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.png
http://appinventor.org/bookFiles/LadybugChase/frog.png
http://appinventor.org/bookFiles/LadybugChase/frog.wav
Upload them to your app in the Media section of the Designer
Connect to the App Inventor website and start a new
project
Name it Ladybug-Chase and also set the screens title to
Ladybug Chase
Connect to the device

10/4/2017 6
 Placing the Initial Components
Work on one part at a time
test it
then move on to the next part of the program

Now we concentrate on creating the ladybug and

controlling its movement
Create a Canvas
Name it FieldCanvas
Set its Width to Fill parent and its height to 300
Place an ImageSprite on the Canvas
Rename it "Ladybug"
Set its Picture property to the ladybug image

10/4/2017 7
 Placing the Initial Components
Other 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)

10/4/2017 8
 Placing the Initial Components
The Speed property
It specifies how many pixels the ImageSprite should move
whenever its Interval (10 milliseconds) passes

Add an OrientationSensor
Add a Clock
Set its TimerInterval to 10 milliseconds

10/4/2017 9
 Something For Testing on Phone

If you use a real mobile device (instead of an

emulator) for testing
Youll 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

10/4/2017 10
 Moving the Ladybug
Create Two procedures
UpdateLadybug
It uses of two of the OrientationSensors 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 ladybugs movement too sluggish, increase the
speed multiplier
If the ladybug seems too jerky, decrease it
Clock1.Timer
It calls UpdateLadybug
10/4/2017 11
 Moving the Ladybug

10/4/2017 12
 Displaying the Energy Level

Adding a canvas
Place it beneath FieldCanvas
Name it EnergyCanvas
Set its Width property to Fill parent
Set its Height to 3 pixel
Creating a variable: energy
Create a variable energy with an initial value
of 200
This variable is used to record the ladybugs energy
level

10/4/2017 13
 Displaying the Energy Level

Drawing the energy bar

We 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

10/4/2017 14
 Displaying the Energy Level

We 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

10/4/2017 15
 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

10/4/2017 16
 Displaying the Energy Level

Add comments

10/4/2017 17
 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

10/4/2017 18
 Starvation

Game over if
the ladybug fails to eat enough aphids
it is eaten by the frog
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

10/4/2017 19
 Update the Ladybugs Move

Procedure UpdateLadybug
It is called by Clock.Timer every 10 milliseconds
Perform following tasks
Decrement its energy level
Display the new level
End the game if energy is 0

10/4/2017 20
 Adding an Aphid

Adding an ImageSprite
Set its Picture property to the aphid image file
Set its Interval property to 10
Set its Speed to 2
so it doesnt move too fast for the ladybug to catch it

10/4/2017 21
 Adding an Aphid

Controlling the aphid

It 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

10/4/2017 22
 Adding an Aphid

Create the UpdateAphid procedure

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

10/4/2017 23
 Adding an Aphid

10/4/2017 24
 Programming the Ladybug to Eat the Aphid

Use blocks for detecting collisions between

ImageSprites
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
10/4/2017 25
 Programming the Ladybug to Eat the Aphid

10/4/2017 26
 Detecting a Ladybug-Aphid Collision

How it works
When Ladybug collides with another ImageSprite
If
That ImageSprite is aphid (defensive programming)
AND the aphid is alive
Then
Call EatAphid

10/4/2017 27
 The Return of the Aphid

Modify UpdateAphid
If the aphid is visible, changes its direction
If the aphid is not visible
There is a 1 in 20 (5%) chance that it will be re-
enabled
20*10miliseconds

10/4/2017 28
 Adding a Restart Button

After game over it needs a Restart Button

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

10/4/2017 29
 Adding the Frog

Getting the frog to chase the ladybug

Add a third ImageSpriteFrogto FieldCanvas
Set
its Picture property to the frog picture
its Interval to 10
its Speed to 1

10/4/2017 30
 Setting Up the Trog to Eat the Ladybug

If the ladybug and the frog collide

The variable energy goes down to 0
because the ladybug has lost its life
DisplayEnergy is called
to erase the previous energy line (and draw the new,
empty one)
The procedure GameOver is called
stop the ladybug from moving
change its picture to that of a dead ladybug

10/4/2017 31
 Setting Up the Frog to Eat the Ladybug

10/4/2017 32
 The Return of the Ladybug

Back to RestartButton.click
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

10/4/2017 33
 Adding Sound Effects

To make the game more lively

You may want to add some feedback when
something is being eaten
Implementation
In the Component Designer, add a Sound
component. Set its Source to the frog.wav
sound file you uploaded.

10/4/2017 34
 Adding Sound Effects

Go 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

10/4/2017 35
 The Complete Set of Blocks

10/4/2017 36
 The Complete Set of Blocks

10/4/2017 37