Sprites

Sprites

Sprites and Animation make the second part of the module for Lesson 2.1

There are two different kinds of sprites: the Ball component and the image sprite. Both are found in the Designer under "Animation". Ball and Image sprites are essentially the same. The only difference is that a ball sprite looks like a colored dot (you pick the color and size) while an image sprite will look like whatever image is uploaded into its properties.These are the only App Inventor components that have the ability to move around on a canvas. In the previous section we explored the canvas coordinate system. Continue to the next section to find out how to make sprites move within this coordinate system.

Animation

Animation means the transformation of an object over time. Moving, rotating, and changing color are all animations. There are many ways to make sprites move, but here we discuss the ways that are most applicable to game development.

Heading, Speed, and Interval

Every Canvas component has four edges and App Inventor assigns numeric values to the edges of a canvas as follows:

top = 1, right = 3, bottom = -1, left = -3
App Inventor also assigns values to directions. You can also think about these values as a compass with the top of the phone representing North: North = 1, NorthEast = 2, East = 3, SouthEast = 4, South = -1, SouthWest = -2, West = -3, and NorthWest = -4.
All sprite objects have a Heading attribute. Heading values for animated objects go in a full circle like a compass, with values between 0 and 360 degrees.

Heading is measured from the positive x-axis being 0. So an object moving toward the top of the screen is said to have a heading of 90 degrees.

Speed is a property of a Sprite. You can set it in the Designer in the Sprite's Properties, and you can change it during "runtime" while your app is running. You program this behavior with the set Sprite.Speed block.

Note that Sprites have their own internal Interval setting. This allows them to move to "the beat of their own drummer" so to speak, regardless of whether the app also has a standalone Clock component ticking away at the same time.

App-ly this knowledge: Build the Bouncing Ball App
Animate a ball sprite with a label that displays its heading

>> Go to the next section for this module

<< Return to the main page for Lesson 2.1