星际大战-静宜大学资讯学院.PPTVIP

星際大戰：畫布(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. 介面設計 介面內容 初始設定 時間到，隨機移動SaucerSprite的X軸 2.2 拖曳RocketSprite，讓其水平移動 不同方向對應之Heading角度值 火箭發射子彈，子彈往上跑 子彈沒打到，到達邊界則消失 子彈打到(碰撞)，分數加1 練習 * 靜宜大學資管系 楊子青 * 0 Y rocket.png Picture RocketSprite 230 Y saucer.png Picture SaucerSprite Green PaitColor Bullet (屬於Ball) Center AlignHorizontal HorizontalArrangement1 8 Radius 0 Text ScoreLabel Score: Text Label1 3000 TimerInterval Clock1 Reset Text ResetButton 300 pixels Height Fill parent Width Canvas1 Space Invaders Title Screen1 屬性值 屬性 元件 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. 2.3 ImageSprite的Heading與Speed屬性 Heading indicates the direction in which the ImageSprite should move, in degrees. For example, 0 means due right, 90 means straight up, 180 means due left, and so on. Speed specifies how many pixels the ImageSprite should move whenever its Interval passes. 0 45 90 135 180 225 270 315 2.4 偵測是否遇到邊界