Well, its not much of a game! To keep the programming simple, all this does is enable a ball to bounce around on the screen, to change its heading or trajectory, and to make it travel faster or slower. When the ball hits the edge of the screen, it rebounds in an appropriate direction. Here’s the user interface as seen on the smart phone:<\/p>\n
Press the Start<\/em> button to make the ball start\u00a0moving; press Stop<\/em> to end the movement.<\/p>\n To change the speed of movement press the Faster<\/em> or Slower<\/em> buttons. Pretty easy?<\/p>\n To change the trajectory, you may enter a heading\u00a0value in degrees, in the field next to the Set heading<\/em> button, and then press the Set heading<\/em> button.<\/p>\n <\/p>\n Coordinate System<\/strong><\/p>\n As soon we\u00a0start talking about graphics, we need to think about our coordinate system – what does a heading<\/em><\/strong> mean, for example?<\/p>\n In App Inventor, the heading values are\u00a0specified by entering a value from 0 to 359. If we enter a value greater than 359, App Inventor converts the value to a modulus 360 value. Is modulus<\/em> a new word for you? Modulus (sometimes called the modulo function in programming) is a math function best explained by example – its the remainder part left over after a division.<\/p>\n For example, if we enter 400 degrees, this will be converted to 40 degrees – that is, 400 minus 360.<\/p>\n The modulus or modulo function is the left over part of dividing the heading (in this case 400) by 360, leaving us with a remainder of 40. Okay, you have probably learned more about modulus than you cared to know. But this is how arbitrarily large values are converted back into the range 0 to 359.<\/p>\n But which way is zero degrees and which way is +90 degrees?<\/p>\n In App Inventor, 0 degrees is directly to the right, +90 degrees is directly upwards, +180 degrees is directly to the left, +270 degrees is directly downwards and 360 degrees takes us back to directly to the right:<\/p>\n A heading of zero means our ball will move directly to the right; a heading of 45 degrees means our ball will move in the direction upwards to the right (Between the 0 and 90 degree marks). Thus, a heading refers to the direction of travel for our ball.<\/p>\n When we draw objects on the screen, each object has a position specified as an (X,Y) pair. Think\u00a0back to your high school algebra and drawing graphs: our drawing area has an X and a Y axis. In high school algebra, we generally put the (X,Y) coordinates of (0,0) right in the middle of the chart, with +X values to the right of zero and -X values to the left. Similarly +Y values are above the middle point and -Y values are below.<\/p>\n But that is not how App Inventor works!<\/em><\/p>\n Instead of a “chart” we are drawing on a “canvas”. And the canvas describes the (X,Y<\/em>) point (0,0) as the upper left corner of the drawing surface. Increasing values of X<\/em> refer to a point across to the right on the canvas; increasing values of Y<\/em> refer to a point going downwards from the top of the canvas. Here is a picture to illustrate sample (X,Y<\/em>) coordinate pairs:<\/p>\n To summarize – the heading value of zero is horizontally to the right and +90 is straight over head. If you remember that you can figure out the other heading directions.<\/p>\n The (0,0) point of the drawing canvas is at the upper left. We will not be referencing the (X,Y) values in our little app. However, you can initialize the ball to a specific (X,Y) position on the Canvas, if you wish, by setting the Properties for the Ball.<\/p>\n Building the User Interface<\/strong><\/p>\n I created a simple user interface in the Designer, using a horizontal layout to arrange the first four buttons as shown below. The main item that is new, of course, is the Canvas<\/em>. Find the Canvas<\/em> component in the Drawing and Animation<\/em> section of the Palette. Click and drag to the Viewer<\/em> and drop on your app. Also click and drag a Ball<\/em> component on to the Canvas<\/em> area. If you want, you can adjust the properties of the Canvas<\/em> and Ball<\/em> to change their color, as I did with the background of the Canvas<\/em> area (this might be pink but I live in the U.S. Pacific Northwest where we prefer to call this “salmon”).<\/p>\n Here is a list of all the components I added, and the names I gave to the various controls.<\/p>\n I mentioned that the properties for the Ball<\/em> object may be changed:<\/p>\n The default<\/em> value for the heading is 0. (“Default” in computer programming, means the assumed value if we do not specify something different. In banking, “default” is what happens when you do not make the payments on your loan – and that is completely different than what we mean here. Really.)<\/p>\n The Blocks Program<\/strong><\/p>\n Amazingly, we need add very little code to make our ball jump around the screen. In the Screen’s<\/em> Initialize event handler, we set the initial heading (direction) for the ball to 210 degrees (you can choose a different value if you wish) and we display the current heading on the screen:<\/p>\n When the app starts running, the speed of movement is set to zero, and hence, the ball is not yet moving. Pressing the Start<\/em> button sets an initial speed of 10 while pressing the Stop<\/em> button sets the speed to zero.<\/p>\n Pressing the Faster<\/em> or Slower<\/em> buttons just changes the speed in increments of 10. Note that for the Slower<\/em> option, we choose to prevent the use of negative speeds (speed less than zero) by using an if then<\/em> block to only set the speed to positive values.<\/p>\n Changing the heading is simple – we set the Ball’s<\/em> property Heading<\/em> to the value we have entered. We do a little “user input error checking” to ensure that the user has entered an actual number:<\/p>\n And finally, the big moment – now that our ball is moving, how do we handle a collision with the edge of the box on the screen? Would you believe it is this easy?<\/p>\n That is pretty easy!<\/p>\n There is much more that can be done with the Ball<\/em> component. For example, we can add some code so that we can touch the ball with our finger and “fling” the ball in a new direction. When this is done, an event is generated that our program can process.<\/p>\n What if you wanted to bounce something other than a plain ball around on the screen? Check out ImageSprite<\/em> in the Drawing and Animation palette. It works the same as Ball<\/em> except that you can set a picture<\/em> for the object that moves around. Hmmmm … I’d better write up a tutorial on using pictures soon!<\/em><\/p>\n But the goal of\u00a0this tutorial is just to get you started! Have fun!<\/p>\n","protected":false},"excerpt":{"rendered":" App Inventor 2 provides easy to use features for creating games. These features have proven popular for introducing programming concepts to students in K-12, especially at the elementary and middle school level. While our focus is oriented towards practical\u00a0applications rather than games, we can have a little fun too! The purpose of the\u00a0sample app in … Continue reading How to create a bouncing ball animation in App Inventor 2<\/span> ![\"Screenshot_2014-10-13-11-40-46\"](\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/10\/Screenshot_2014-10-13-11-40-46.png\")
<\/a><\/p>\n<\/a>The heading below the mid point of the circle can also be referenced using negative values, as shown. A value of -30 degrees is downwards to the right and a value of -150 would be downwards and to the left.<\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a>We write an event handler for EdgeReached<\/em> – this event is triggered when the ball collides with an edge. We could write some code of our own to adjust the heading of the ball upon encountering the edge – but we do not have to because this function is built in to App Inventor! Use the “call Ball1.Bounce<\/em>” procedure to automatically bounce the ball off the wall it hit – the local variable “edge<\/em>” holds a number that corresponds to the top, left, right, bottom and so on, and the Bounce<\/em> procedure uses this to determine which way to bounce the ball. You can find the “get edge” block by clicking on the “edge” value in the surrounding event handler.<\/p>\n