1. Creating Animated Apps： Canvas與ImageSprite 靜宜大學資管系 楊子青

2. 1. Canvas Component
A two-dimensional touch-sensitive rectangular panel on which drawing can be done and sprites can be moved.
Any location on the Canvas can be specified as a pair of (X, Y) values, where
X is the number of pixels away from the left edge of the Canvas
Y is the number of pixels away from the top edge of the Canvas
There are events to tell when and where a Canvas has been touched or a Sprite has been dragged.

3. The Canvas coordinate system

4. Adding a Canvas Component to App
You can drag a Canvas component into your app from the Basic palette.
specify the Canvas’s Width and Height.
Often span the width of the device screen: “Fill parent”
Height: 300

5. 2. ImageSprite component
is an animated object that is contained by a canvas
can react to touches and drags,
interact with other sprites (image sprites and other balls) and the edge of the canvas,
and move according to its properties.

6. 介面設計

7. 介面內容 元件 屬性 屬性值 Screen1 Title Space Invaders Canvas1 Width Fill parent
Height
300 pixels
RocketSprite
Picture
rocket.png Y
230
Bullet (屬於Ball)
PaitColor
Green
Radius 8
SaucerSprite
saucer.png
HorizontalArrangement1
AlignHorizontal
Center
Label1
Text
Score:
ScoreLabel
ResetButton
Reset
Clock1
TimerInterval
3000

8. 初始設定

9. 2.1 Timer event
One way to specify animation in App Inventor is to change an object in response to a timer event.
Most commonly, you’ll move sprites to different locations on the canvas at set time intervals.

10. 時間到，隨機移動SaucerSprite的X軸

11. 2.2 拖曳RocketSprite，讓其水平移動