App Inventor 2, 2nd Edition

Chapter 17. Creating Animated Apps

Figure 17-0.

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 such as 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. It’s the concept behind how animated films are made!

With App Inventor, you’ll program animation by placing Ball and ImageSprite components within a Canvas component and then moving and transforming those objects every successive fraction of a second. In this chapter, you’ll learn how the Canvas coordinate system works, how you can use the Clock.Timer event to trigger movement, how to control the speed of objects, and how to respond to events such as two objects crashing into each other.

Adding a Canvas Component to Your App

From the Drawing and Animation palette, drag a Canvas component into your app. After you place it, specify its 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 ...