ACS-1805

Introduction to Programming(with App Inventor)

Chapter 7

Ladybug Chase

10/4/2018 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 screenIt decreases over time and leads to the ladybug’s 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/2018 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 ladybug’s energy level)

Creating and using procedures with parameters

Using the "and" logical block

10/4/2018 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 device’s tilt to move the ladybug

A Clock will be used to change the aphid’s direction

A second Canvas that displays the ladybug’s energy level

A Reset button will restart the game if the ladybug starves or is eaten

10/4/2018 4

Components

10/4/2018 5

Getting Started

Prepare the prerequisites Download the following files:

http://www.appinventor.org/apps2/LadybugChase/Media/ladybug.png

http://www.appinventor.org/apps2/LadybugChase/Media/aphid.png

http://www.appinventor.org/apps2/LadybugChase/Media/deadladybug.png

http://www.appinventor.org/apps2/LadybugChase/Media/frog.png

http://www.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 screen’s title to

“Ladybug Chase”

Connect to the device

10/4/2018 6

Placing the Initial Components

Work on one part at a time

test itthen move on to the next part of the program

Now we concentrate on creating the ladybug and controlling its movement

Create a CanvasName it FieldCanvas

Set its Width to “Fill parent” and its height to 300

Place an ImageSprite on the CanvasRename it "Ladybug"

Set its Picture property to the ladybug image

10/4/2018 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/2018 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/2018 9

Something For Testing on Phone

If you use a real mobile device (instead of an emulator) for testing

You’ll need to disable autorotation for the screenThat changes the display direction when you turn the device

Select Screen1 and set its ScreenOrientation property to Portrait

10/4/2018 10

Moving the Ladybug

Create Two procedures

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

Clock1.TimerIt calls UpdateLadybug

10/4/2018 11

Moving the Ladybug

10/4/2018 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 ladybug’s energy level

10/4/2018 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/2018 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/2018 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/2018 16

Displaying the Energy Level

Add comments

10/4/2018 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/2018 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/2018 19

Update the Ladybug’s Move

Procedure UpdateLadybug

It is called by Clock.Timer every 10 milliseconds

Perform following tasksDecrement its energy level

Display the new level

End the game if energy is 0

10/4/2018 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 2so it doesn’t move too fast for the ladybug to catch it

10/4/2018 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/2018 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/2018 23

Adding an Aphid

10/4/2018 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 MoleMash10/4/2018 25

Programming the Ladybug to Eat the Aphid

10/4/2018 26

Detecting a Ladybug-Aphid Collision

10/4/2018 27

How it works

When Ladybug collides with another ImageSprite

If

That ImageSprite is aphid (defensive programming)

AND the aphid is alive

Then

Call EatAphid

The Return of the Aphid

10/4/2018 28

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

Adding a Restart Button

10/4/2018 29

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

Adding the Frog

10/4/2018 30

Getting the frog to chase the ladybug Add a third ImageSprite—Frog—to FieldCanvas

Set

its Picture property to the frog picture

its Interval to 10

its Speed to 1

Setting Up the Frog to Eat the Ladybug

10/4/2018 31

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

Setting Up the Frog to Eat the Ladybug

10/4/2018 32

The Return of the Ladybug

10/4/2018 33

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

Adding Sound Effects

10/4/2018 34

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.

Adding Sound Effects

10/4/2018 35

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

The Complete Set of Blocks

10/4/2018 36

The Complete Set of Blocks

10/4/2018 37