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

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.

The Canvas coordinate system

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

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.

介面設計

介面內容 元件 屬性 屬性值 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

初始設定

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.

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

2.2 拖曳RocketSprite，讓其水平移動