Topiary Tapper

Ethan Reed & Steven Aprill

Computer Science and Software Engineering

10/27/2015

Overview:
Steven Aprill and I (Ethan Reed) set out to create a simple app to encompass our
continuous understanding of low-level programming techniques in the most eye-pleasing
and interesting way possible. Topiary Tappers purpose is simple, tap the screen and the
tree grows. Complexity could have been added to the game given the proper amount of
time, however, this game was created in a sprint so time was sparse. Total elapsed time
spend researching, designing, and creating must have fallen around 5 hours. The design
process was fast and most of the time spent on this project was in the coding stage, never-

the-less, I planned out the entire app on paper; as shown below.

A little messy, I know.

Materials List:

Tech Lab Computers @ PHS

Computer @ Home
MIT App Inventor 2
Google Drive

Computer Science and Software Engineering Composition Notebook

Adobe Photoshop

Procedure:
First-things-first we needed to create the tree sprites. We finalized eight sprites for the
different levels of tree growth relative to the in-game level using Adobe Photoshop. At
the same time we also created a sprite to represent the ground the tree is growing on.

Secondly, the next thing to do was create the main chunk of code: the canvas. The canvas
on MIT App Inventor is a large box where artwork can be put in to interact with each
other in the form of sprites and seemed to be the easiest and most efficient method of
allowing the user to click almost the whole screen to increase the score. Inside the canvas
are Image Sprites. Image Sprites is what the canvas uses as its primary method of
interaction with the user, although, in this game, the canvas will not be used to its full
potential due to the games simplicity.

Thirdly,

it was

time to

get into

the grit

of the

game

and start

coding.

As the

picture

below

illustrates, we needed only two global variables for the level the player was on and the
counter for the number of times the user had tapped the screen. Next we see When
Canvas Tapped/Touched, this means that when the screen is tapped on the canvas the
following code will execute. Under this we see a set of two If/Then statements, in these
statements we have Get global Tapped = 0 and then Set global Level to 1, this means
that if the user has not tapped the screen yet the level will be set to 1. Next, the block
recognizes that the level is 1 and sets the sprite to the proper tree image. After that, in the

same If/Then, it will recognize that the user tapped and add 1 to the global variable that
tracks the number of taps. Clicks Until Next Level Display will tell you how many taps
total you have despite what the label suggests, it does not tell you how many taps you
need to level-up. Level Display will be set to the current level which was set at the
beginning of the block. After this block there are more of the same below it, specifically,
7 more identical blocks where the only difference is the level set lines.

The next obstacle was creating a way for rain to appear on screen when the user tapped
the canvas. What we did, as you can see in the picture above, the rain is made visible
when the users finger is on the screen. The rain spawns at a random position from 1 to
300 each time the user takes off his finger and places it back on the device. The rain then
Rotates or moves down until it hits the edge of the screen then the rain will become not
visible. If the user takes his finger off the screen before the rain reaches the edge of the
screen the rain will become not visible immediately and new rain will spawn.

Lastly, our reset button is very simple, when the reset button is clicked the global
variables are set to 0 and all of the sprites become not visible except the initial/level 1
tree sprite. The rain is also set to not visible just to be sure.

Concepts Covered:

Event handlers
o Every input has an output
Device Sensory Inputs
o Android devices have specific input methods such as the touch screen
Global Variables
o Variables used in multiple blocks of code
If/Then intricacy
o Nesting of If/Then statements to efficiently code our program

Summary:
Steven and I learned how to use the MIT App Inventor very well for only studying it for 5
hours, this was a sprint and sprint we did. Through the process of creating this program

we did not hit any serious roadblocks that hindered the progress of our app, anything that
we couldnt understand from the get-go we researched and eventually understood
quickly. That being said, given more time Im positive this app could look better, play
better, and be much more stable, however, this program was supposed to be simple and
quick and I think we accomplished just that. Our project did a very good job in
representing our knowledge in MIT App Inventor, although, MIT App Inventor is a
language with much more to offer than we used, and that has to be kept in mind.
Someone who created a FPS is going to use completely different design techniques
compared to someone who created a tip-calculator. I felt this assignment was a great way
to introduce us to more advanced programming syntax without being too overwhelming.