遊戲設計

Chapter 6

遊戲包含的元件

• 動畫元件(Canvas & Animation)
• 顯示、移動與消失
• 碰撞偵測
• 計時器 (Clock)
• 貼圖動畫
• 倒數計時
• 音效 (Sound)
• 文字標籤(Label)
• 計分、計時
• 按鈕
• 開始 & 重置

新增專案

1

2

3

4

加入畫布

1

拖曳

設定畫布寬高

加入球型精靈

拖曳

設定參數

重新命名

1

2

3

4

撰寫球移動程式

1

撰寫球移動程式

1

2

撰寫球移動程式

1

2

撰寫球移動程式

撰寫球移動程式

1

2

撰寫球移動程式

加入動畫圖片

Note：若出現錯誤訊息，請關閉 方塊編輯器

拖曳

動畫圖片特殊屬性

顯示圖片檔案

可否旋轉

圖片大小

變更顯示圖片

1

變更顯示圖片

2

3

變更顯示圖片

3

4

變更顯示圖片

5

變更座標位置

變更元件名稱為 “發射台”

1

2

3

4

建立拖曳方塊

1

2

3

拖曳方塊參數解說

起始拖曳座標

前一個暫停座標

目前座標

移動圖片

1

2

移動圖片

串接至這裡

移動圖片

1

2

移動圖片

串接至這裡

模擬執行

新增子彈(Ball)

1

2

拖曳

變更子彈大小

變更子彈顏色

1

2

變更子彈方向為 90

變更子彈移動時間間隔(速度)為 10

隱藏子彈

取消勾選

變更圖片精靈名稱為 “子彈”

1

2

3

折疊已編輯的程式

滑鼠移到空白處按右鍵

1

2

摺疊完成圖

發射子彈的問題

• 甚麼時候發射子彈
• 拖曳放開的時候
• 碰觸畫布(canvas)的時候

​

• 子彈數量
• 簡單化 – 同一時間只有1發

​

​

子彈位置

發射台

子彈

(發射台.X,發射台.Y)

發射台.寬度

子彈.半徑 * 2

(發射台.X+發射台.寬度/2-子彈. 半徑,

發射台.Y - 子彈.半徑 * 2)

發射子彈的程序

計算調整子彈座標

顯示子彈

設定子彈移動速度

觸發子彈 – 碰觸畫布時

1

2

計算子彈X座標

1

2

子彈.X = 發射台.X+發射台.寬度/2 - 子彈.半徑

計算子彈X座標

串接至這裡

子彈.X = 發射台.X+發射台.寬度/2 - 子彈.半徑

計算子彈X座標

1

2

子彈.X = 發射台.X+發射台.寬度/2 - 子彈.半徑

計算子彈X座標

串接至這裡

子彈.X = 發射台.X+發射台.寬度/2 - 子彈.半徑

計算子彈X座標

1

2

子彈.X = 發射台.X+發射台.寬度/2 - 子彈.半徑

計算子彈X座標

串接至這裡

子彈.X = 發射台.X+發射台.寬度/2 - 子彈.半徑

計算子彈X座標

1

2

子彈.X = 發射台.X+發射台.寬度/2 - 子彈.半徑

計算子彈X座標

串接至這裡

子彈.X = 發射台.X+發射台.寬度/2 - 子彈.半徑

計算子彈X座標

1

2

子彈.X = 發射台.X+發射台.寬度/2 - 子彈.半徑

計算子彈X座標

串接至這裡

子彈.X = 發射台.X+發射台.寬度/2 - 子彈.半徑

計算子彈X座標

1

2

子彈.X = 發射台.X+發射台.寬度/2 - 子彈.半徑

計算子彈X座標

串接至這裡

計算子彈X座標

1

2

子彈.X = 發射台.X+發射台.寬度/2 - 子彈.半徑

計算子彈X座標

串接至這裡

並改為2

子彈.X = 發射台.X+發射台.寬度/2 - 子彈.半徑

計算子彈X座標

1

2

子彈.X = 發射台.X+發射台.寬度/2 - 子彈.半徑

計算子彈X座標

串接至這裡

子彈.X = 發射台.X+發射台.寬度/2 - 子彈.半徑

計算子彈Y座標

1

2

子彈.Y =發射台.Y - 子彈.半徑 * 2

計算子彈Y座標

串接至這裡

子彈.Y =發射台.Y - 子彈.半徑 * 2

計算子彈Y座標

1

2

子彈.X = 發射台.X+發射台.寬度/2 - 子彈.半徑

計算子彈Y座標

串接至這裡

子彈.Y =發射台.Y - 子彈.半徑 * 2

計算子彈Y座標

1

2

子彈.X = 發射台.X+發射台.寬度/2 - 子彈.半徑

計算子彈Y座標

串接至這裡

子彈.Y =發射台.Y - 子彈.半徑 * 2

計算子彈Y座標

1

2

子彈.X = 發射台.X+發射台.寬度/2 - 子彈.半徑

計算子彈Y座標

串接至這裡

子彈.Y =發射台.Y - 子彈.半徑 * 2

計算子彈Y座標

1

2

子彈.X = 發射台.X+發射台.寬度/2 - 子彈.半徑

串接至這裡

計算子彈Y座標

1

2

子彈.X = 發射台.X+發射台.寬度/2 - 子彈.半徑

計算子彈Y座標

串接至這裡

並改為2.5

子彈.Y =發射台.Y - 子彈.半徑 * 2

顯示子彈

1

2

顯示子彈

串接至這裡

顯示子彈

1

2

顯示子彈

串接至這裡

設定子彈移動速度

1

2

設定子彈移動速度

串接至這裡

設定子彈移動速度

1

2

設定子彈移動速度

串接至這裡

並改為2

模擬執行

碰觸畫布可以發射子彈

但子彈停留在最上面

可以拖曳移動發射台

子彈的消失

• 當子彈移到邊界時應消失
• 邊界偵測
• 設定 Visible屬性為 False
• 設定移動速度為0

子彈的消失

1

2

子彈的消失

1

2

子彈的消失

串接至這裡

子彈的消失

1

2

子彈的消失

串接至這裡

子彈的消失

1

2

子彈的消失

串接至這裡

子彈的消失

1

2

子彈的消失

串接至這裡

修訂子彈的發射

• 當子彈(發射)進行中，應禁止再發射
• 發射子彈前應檢查子彈的Visible屬性

修訂子彈的發射

拖曳

修訂子彈的發射

1

2

修訂子彈的發射

串接至這裡

修訂子彈的發射

1

2

修訂子彈的發射

串接至這裡

修訂子彈的發射

1

2

修訂子彈的發射

串接至這裡

修訂子彈的發射

1

2

修訂子彈的發射

串接至這裡

修訂子彈的發射

拖曳

修訂子彈的發射

串接至這裡

1

2

3

拖曳

上傳音效

1

2

3

4

上傳音效

5

6

上傳音效

7

8

播放音效

1

2

播放音效

串接至這裡

模擬執行

擊中目標

• 碰撞偵測
• 爆炸畫面
• 貼圖動畫 – 需要 計時器(Clock) 及 爆炸圖片
• 爆炸音效 – 需要 聲音(Sound) 及 爆炸音效檔

​

e1

e2

e3

e4

e5

e6

上傳 爆炸相關檔案

1

2

上傳 爆炸相關檔案

3

4

上傳 爆炸相關檔案

5

上傳 爆炸相關檔案

• 重複步驟 ~ 上傳下列檔案

1

5

上傳 完成圖

加入 計時器(Clock)

1

2

拖曳

1

修改計時間隔 並停止計時

1

2

加入聲音元件

1

2

拖曳

設定爆炸音效檔

1

2

3

加入 動畫圖片

1

2

拖曳

更改 爆炸圖片名稱為 Exp

1

2

3

定義 貼圖動畫圖片編號

1

2

定義 貼圖動畫圖片編號

將名稱改為id

設定 貼圖動畫圖片編號為1

1

2

設定 貼圖動畫圖片編號為1

串接至這裡

並改為1

碰撞偵測

1

2

設定爆炸圖片座標

1

2

設定爆炸圖片座標

串接至這裡

設定爆炸圖片座標

1

2

設定爆炸圖片座標

串接至這裡

設定爆炸圖片座標

1

2

設定爆炸圖片座標

串接至這裡

顯示第1張爆炸圖片

1

2

顯示第1張爆炸圖片

串接至這裡

顯示第1張爆炸圖片

1

2

顯示第1張爆炸圖片

串接至這裡

並改為 e1.png

顯示第1張爆炸圖片

1

2

顯示第1張爆炸圖片

串接至這裡

顯示第1張爆炸圖片

1

2

啟動爆炸動畫貼圖計時器

串接至這裡

啟動爆炸動畫貼圖計時器

2

1

啟動爆炸動畫貼圖計時器

串接至這裡

啟動爆炸動畫貼圖計時器

點選後按Ctrl C複製

再按Ctrl V貼上

啟動爆炸動畫貼圖計時器

串接至這裡

播放爆炸音效

1

2

播放爆炸音效

串接至這裡

貼圖動畫 – 使用計時器

1

2

貼圖動畫 – 遞增圖片編號

1

2

貼圖動畫 – 遞增圖片編號

串接至這裡

貼圖動畫 – 遞增圖片編號

1

2

貼圖動畫 – 遞增圖片編號

串接至這裡

貼圖動畫 – 遞增圖片編號

1

2

貼圖動畫 – 遞增圖片編號

串接至這裡

並改為1

貼圖動畫 – 遞增圖片編號

1

2

貼圖動畫 – 遞增圖片編號

串接至這裡

貼圖動畫 – 設定顯示圖片檔名

1

2

貼圖動畫 –設定顯示圖片檔名

串接至這裡

貼圖動畫 –設定顯示圖片檔名

1

2

貼圖動畫 –設定顯示圖片檔名

串接至這裡

貼圖動畫 –設定顯示圖片檔名

1

2

拖曳

貼圖動畫 –設定顯示圖片檔名

1

2

貼圖動畫 –設定顯示圖片檔名

串接至這裡

並改為e

貼圖動畫 –設定顯示圖片檔名

1

2

貼圖動畫 –設定顯示圖片檔名

串接至這裡

貼圖動畫 –設定顯示圖片檔名

點選後按Ctrl C複製

再按Ctrl V貼上

貼圖動畫 –設定顯示圖片檔名

串接至這裡並改為 .png

貼圖動畫 – 判斷結束否

1

2

貼圖動畫 –判斷結束否

串接至這裡

貼圖動畫 –判斷結束否

1

2

貼圖動畫 –判斷結束否

串接至這裡

貼圖動畫 –判斷結束否

1

2

貼圖動畫 –判斷結束否

串接至這裡

並改為6

貼圖動畫 –判斷結束否

1

2

貼圖動畫 –判斷結束否

串接至這裡

結束貼圖動畫 – 取消計時器

1

2

結束貼圖動畫 – 取消計時器

串接至這裡

結束貼圖動畫 – 取消計時器

1

2

結束貼圖動畫 – 取消計時器

串接至這裡

結束貼圖動畫 – 初始化圖片編號為1

1

2

結束貼圖動畫 – 初始化圖片編號為1

串接至這裡

結束貼圖動畫 – 初始化圖片編號為1

點選後按Ctrl C複製

再按Ctrl V貼上

結束貼圖動畫 – 初始化圖片編號為1

串接至這裡

結束貼圖動畫 – 隱藏爆炸圖片

1

2

結束貼圖動畫 – 隱藏爆炸圖片

串接至這裡

結束貼圖動畫 – 隱藏爆炸圖片

點選後按Ctrl C複製

再按Ctrl V貼上

結束貼圖動畫 – 隱藏爆炸圖片

串接至這裡

模擬執行

計分

• 使用元件

​

加入 水平排列元件

1

2

拖曳

加入文字標籤

1

2

拖曳

更改文字標籤的文字

加入分數文字標籤

拖曳

更改文字標籤的名稱為score

1

2

3

更改分數文字標籤初值為0

1

增加 得分

1

2

增加 得分

串接至這裡

增加 得分

1

2

增加 得分

串接至這裡

增加 得分

1

2

增加 得分

串接至這裡

並改為10

增加 得分

1

2

增加 得分

串接至這裡

模擬執行