勇闖鵲橋I：動畫遊戲 靜宜大學資管系 楊子青

Presentation on theme: "勇闖鵲橋I：動畫遊戲 靜宜大學資管系 楊子青"— Presentation transcript:

1 勇闖鵲橋I：動畫遊戲 靜宜大學資管系 楊子青

2 Step 1 使用者介面設計

3 建立專案：FlappyBird 上傳圖片資源檔

4 Screen1相關屬性設定 BackgroundImage： pu.jpg Title：飛鳥勇闖靜宜鵲橋(作者：靜宜資管楊子青)
ShowStatusBar： 取消勾選 AppName：勇闖鵲橋 Icon： Bird.png

5 水平對齊，裡面放置四個元件 Width: 分別為30, 10, 30, 30 percent 填入文字，並自選顏色
Height: 15 percent Width: fill parent AlignVertical: Center Width: 分別為30, 10, 30, 30 percent 填入文字，並自選顏色 TextAlignment: Center BackgroundColor: None (沒有背景顏色)

6 加入動畫區(Canvas)及圖形動畫(ImageSprite)
設定Picture屬性 (選擇對應的圖檔) Canvas1 Height及Width: fill parent BackgroundColor: None Bird Height及Width: 40 pixels Pillar1及Pillar2 Height: 120 pixels; Width: 72 pixels

7 Step 2 遊戲開始：初始設定動畫位置

8 Canvas座標

9 將飛鳥移到(0,0)的位置

10 將兩根石柱移到螢幕最右邊

11 動態決定兩根石柱的高度及位置 區 域 變 數 寫 法

12 由於遊戲開始、石柱到最左邊都要重新設定石柱的位置，改用副程式

13 程式收納及展開(按滑鼠右鍵)

14 Step 3 讓飛鳥下墜、拍打螢幕上升、 並可拖曳

15 ImageSprite的Heading與Speed屬性
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.

16 不同方向對應之Heading角度值 45 90 135 180 225 270 315

17 讓飛鳥往右下方下墜 補充：如果將飛鳥的z屬性，設得 比石柱大，例如改為2，當兩物件 相遇，可以疊在在石柱的上層

18 觸控Canvas，讓飛鳥上升

19 拖曳飛鳥，往左邊水平移動

20 Step 4 運用時鐘，讓兩根石柱右移

21 加入時鐘元件，設定觸發時間 先不計時 0.1秒

22 時間到時，讓石柱往右平移

23 Step 5 石柱若到達左邊，重新從右邊出現，分數加1

24 偵測是否遇到邊界 使用EdgeReached(number edge)事件
Event handler called when the sprite reaches an edge of the screen. The edge argument tells which edge (or corner) was reached, encoded as follows: north = 1 northeast = 2 east = 3 southeast = 4 south = -1 southwest = -2 west = -3 northwest = -4

25 石柱到達左邊，重新從右邊出現 (分數+1)

26 Step 6 當飛鳥碰撞石柱或右邊界，則遊戲結束，決定是否上傳成績

27 加入通知元件及偵測是否發生碰撞 提供 取消 按鈕

28 飛鳥碰撞或碰觸邊界，則遊戲結束 讓飛鳥不再移動，也不能拖曳 計時停止，石柱不再移動

29 讓副程式傳遞參數，根據結束原因 跳出訊息視窗

30 如果選擇「上傳成績」之判斷