App Inventor

Chapter 17. Creating Animated Apps

This chapter discusses methods for creating apps with simple animations—objects that move. You’ll learn the basics of creating two-dimensional games with App Inventor and become comfortable with image sprites and handling events like two objects colliding.

When you see an object moving smoothly along the computer screen, what you’re really seeing is a quick succession of images with the object in a slightly different place each time. It’s an illusion not much different from “flipbooks,” in which you see a moving picture by flipping quickly through the pages (and it’s also how far more sophisticated animated films are made!).

With App Inventor, you’ll define animation by placing objects within a Canvas component and moving those objects around the Canvas over time. In this chapter, you’ll learn how the Canvas coordinate system works, how the Clock.Timer event can be used to trigger movement, how to control the speed of objects, and how to respond to events such as two objects colliding.

Adding a Canvas Component to Your App

You can drag a Canvas component into your app from the Basic palette. After dragging it out, specify the Canvas’s Width and Height. Often, you’ll want the Canvas to span the width of the device screen. To do this, choose “Fill parent” when specifying the Width, as shown in Figure 17-1.

Figure 17-1. Setting the Canvas’s Width to span ...