ActionScript 綜合應用 (二) ─打蟑螂遊戲

Presentation on theme: "ActionScript 綜合應用 (二) ─打蟑螂遊戲"— Presentation transcript:

1 ActionScript 綜合應用 (二) ─打蟑螂遊戲
第 24 章 ActionScript 綜合應用 (二) ─打蟑螂遊戲

2 本章提要 24-1 遊戲設計與流程分析 24-2 動畫元件與流程說明 24-3 設定蟑螂產生與移動的程式
24-4 判斷蟑螂被打中及蟑螂被打死而消失的程式 24-5 設定記分與判斷遊戲結束的程式 24-6 設定開始與結束場景中的程式

3 前言 現在請戴上耳機 (或打開喇叭), 雙按 24.swf 範例檔, 先來搶先試玩一下這個「打蟑螂遊戲」吧！

4 前言 在一段開場動畫後, 按下開始遊戲鈕, 就會進入遊戲畫面, 讓你拿起拖鞋打蟑螂 (打蟑螂時還會發出啪、啪的聲音), 當 100 隻蟑螂都爬過地板後, 遊戲就會結束, 隨即跳到結束畫面, 顯示打中幾隻蟑螂以及評語, 按下再玩一次鈕, 則可以重回開場動畫, 再玩一次遊戲！

5 24-1 遊戲設計與流程分析 在正式動手開始製作任何遊戲之前, 你都需要先想清楚這是一個怎樣的遊戲, 例如這遊戲是個什麼樣的故事？裡面有哪些角色？怎樣的背景？然後決定遊戲的整個流程要如何進行, 像是要不要有開場動畫？遊戲開始後要不要計時？是倒數計時還是一般計時？要用滑鼠還是鍵盤來控制？要有幾關？要怎麼記分 (怎樣才算得分)？最好繪製一個流程分析圖, 做為製作時的參考, 這樣真正進入實作階段時才會順利。

6 遊戲設計 遊戲設計的說明沒有規定的格式, 重點只是要把整個遊戲說明清楚, 以便製作。如果這個遊戲只有你一個人製作, 那麼遊戲設計可以寫得簡略一點, 要是這個遊戲是一組人馬在製作, 那麼遊戲設計的說明就必須夠清楚、夠完整, 讓每個參與的人都明白才行喔！ 以下就是本章範例「打蟑螂遊戲」的遊戲設計說明：

7 遊戲設計

8 遊戲設計 企劃大型的遊戲時, 甚至需要撰寫完整的劇本、角色分析, 這樣才能讓遊戲充滿趣味, 讓玩家愛不釋手。而本章的「打蟑螂遊戲」僅是簡易的小型遊戲, 所以遊戲設計也比較陽春。

9 遊戲流程分析

10 遊戲流程分析

11 24-2 動畫元件與流程說明 完成了遊戲設計與流程分析後, 我們就可以正式進入製作階段了。你可以開啟練習檔 24-learn.fla , 直接利用我們幫你準備好的場景和元件來練習。

12 元件介紹 本範例所使用元件如下：

13 元件介紹

14 元件介紹 在元件庫的聲音資料夾中還有啪啪、尖叫、蟑螂聲 3 個聲音元件, 分別用做揮拖鞋打蟑螂時的聲音、開場動畫的聲音、蟑螂出現時的聲音。另外還有 2 個元件, 因做法較複雜, 我們特別提出來說明。

15 「被打蟑螂」 影片片段元件 被打蟑螂影片片段元件, 是實際做為遊戲中逃竄的蟑螂之元件, 裡面包含蟑螂聲, 和蟑螂死掉的動畫, 你可以在元件庫中雙按被打蟑螂影片片段元件來看動畫的安排：

16 「被打蟑螂」 影片片段元件

17 「開場動畫」影片片段元件 開場動畫影片片段元件是一段有 55 格影格的簡單動畫：

18 設定文件屬性與場景、圖層 本範例之文件屬性均採預設, 即 550 px× 400 px, 背景色為白色, 12 fps 的播放速率。而場景則有 3 個, 依序命名為開始、遊戲、結束, 各場景的圖層分配如下：

19 設定文件屬性與場景、圖層

20 設定文件屬性與場景、圖層

21 遊戲製作流程

22 24-3 設定蟑螂產生與移動的程式 為了讓你能體會依所需功能不同而一層層加入 ActionScript 的過程, 我們的程式設定是依遊戲所需機制來一一加入的, 而不是依設置位置一次解說完畢, 請特別注意！ 首先從最重要的遊戲場景開始著手。我們要在此場景的 Actions 圖層的第1 格影格中設定蟑螂產生的 ActionScript, 以及在舞台中被打蟑螂元件之實體上設定蟑螂移動的程式。

23 設定蟑螂產生的程式 請點選遊戲場景 Actions 圖層影格 1 後開啟動作面板, 我們要使用 function 指令 (在類型類別下) 加入一個自訂函數, 這個函數等於是一個「蟑螂產生器」, 每執行一次就會產生 1 隻蟑螂；另外再配合使用 setInterval 指令 (全域函數 / 其他各種函數類別下) , 讓「蟑螂產生器」自動在每 0.5 秒就執行一次。以下是此階段所要設置的所有程式碼：

24 設定蟑螂產生的程式

25 設定蟑螂產生的程式

26 設定蟑螂產生的程式 首先我們要宣告一個變數, 代表蟑螂的數量。請雙按陳述式/變數類別下的var, 然後在變數欄中輸入變數名稱及初始值："amount=0"。

27 設定蟑螂產生的程式

28 設定蟑螂產生的程式 接著再次雙按陳述式/變數類別下的var, 在變數欄中輸入 roachShow, 用來儲存定時執行的 setRoach( ) 函數 (待會兒會定義)。

29 設定蟑螂產生的程式

30 設定蟑螂產生的程式 自訂一個函數用來產生蟑螂。請雙按陳述式/使用者定義的函數類別下的function, 然後在名稱欄中輸入 setRoach。

31 設定蟑螂產生的程式

32 設定蟑螂產生的程式 在 setRoach 函數中加入一行程式碼, 讓 amount 變數在每執行過一次 setRoach 後就加上 1。請雙按運算子/指定類別下的 =, 然後在運算式欄位中輸入 amount=amount+1。

33 設定蟑螂產生的程式

34 設定蟑螂產生的程式 接著要在 setRoach 函數中加入一個 if 判斷式, 判斷當 amount 的數量大於 100 時, 要執行的工作。請雙按陳述式/判斷條件/迴圈類別下的 if, 在判斷條件欄中輸入 amount>100。

35 設定蟑螂產生的程式

36 設定蟑螂產生的程式 繼續加入全域函數/其他各種函數類別下的 clearInterval 動作, 然後在間隔 ID 欄中輸入：roachShow, 表示若 amount 變數大於 100 (表示蟑螂產生 100 隻以上), 就清除 roachShow 變數中的 setInterval 動作 (稍後會加入此動作), 也就是不再產生蟑螂。

37 設定蟑螂產生的程式

38 設定蟑螂產生的程式 接著請雙按陳述式/判斷條件/迴圈類別下的 else, 設定 amount 沒有大於100 時要執行的動作。請雙按全域函數/ 影片片段控制類別下的 duplicateMovieClip, 複製 roach 的影片片段實體。

39 設定蟑螂產生的程式

40 設定蟑螂產生的程式 決定複製出來的蟑螂要出現在何處 (設定 x 與 y 軸的座標)。請雙按全域函數/影片片段控制類別下的 setProperty 指令：

41 設定蟑螂產生的程式

42 設定蟑螂產生的程式

43 random( ) 函數 random( ) 函數可以隨機方式取出一整數值, 例如寫成「random(10);」, 就表示從 0〜10 中隨機取一整數。雖然 Flash 不建議使用此指令, 不過由於不影響執行結果, 而且比標準的 Math.random( ) 簡單好用, 所以我們還是採用此指令。

44 設定蟑螂產生的程式 加入 function 動作只是自訂函數, 不代表這個函數會被執行。所以接下來我們要加入 setInterval 動作, 規定要每隔多久 (以千分之一秒為單位) 執行一次函數。進一步把這個 setInterval 動作存到前面宣告的 roachShow 變數中, 這樣之前的 clearInterval 動作才有作用, 請在 function 函數外加入這行程式碼：

45 設定蟑螂產生的程式

46 設定蟑螂產生的程式 由於此遊戲前後都有場景, 所以我們要下一個 stop 指令, 讓動畫暫時停在第 1 格影格。請在程式碼的最後雙按全域函數/時間軸控制項類別下的 stop。

47 設定蟑螂產生的程式

48 設定蟑螂移動與離開畫面就消失的程式 接下來這一階段的程式要設在舞台中的蟑螂 (被打蟑螂元件之實體, 已命名為 roach) 上, 這是因為所有的蟑螂都是複製自此蟑螂, 所以若將程式設在此蟑螂上, 則所有複製出來的蟑螂都會擁有同樣的程式, 也能自動依程式內容動作喔！以下是此階段需要設置的所有程式碼：

49 設定蟑螂移動與離開畫面就消失的程式

50 設定蟑螂移動與離開畫面就消失的程式 請開啟練習檔 24-learnl.fla, 點選舞台中的蟑螂 (roach 實體), 開啟動作面板如下操作：

51 設定蟑螂移動與離開畫面就消失的程式

52 設定蟑螂移動與離開畫面就消失的程式

53 24-4 判斷蟑螂被打中及蟑螂被打死而消失的程式
前面我們設定過一個判斷式, 讓蟑螂在跑出畫面後 (也就是當其 Y 軸位置小於或等於 –24 時) 就自動刪除自己。這是蟑螂消失的其一狀況, 另一個狀況是蟑螂被打中後, 不僅要播放出被打到的死狀 (在被打蟑螂元件中 killed 影格標籤處可以看到), 還要移除該蟑螂才行。

54 判斷蟑螂被打中及蟑螂被打死而消失的程式 因此本節要做的, 就是撰寫「判斷蟑螂有沒有被打中」 , 以及「被打中後, 播放出死狀後消失」的程式。

55 判斷蟑螂被打中的程式 關於 hitTest 指令 撰寫判斷蟑螂被打中與否的程式

56 關於 hitTest 指令 「判斷蟑螂是否被打中」 的程式需要應用到一個重要的指令－hitTest。這個指令在製作 Flash 遊戲時經常使用, 它有兩種寫法, 一種可以判斷兩個實體有沒有重疊；另一種比較精確, 可以判斷一個實體與一個座標點是否有重疊, 而且可選用兩種精確度不同的判定方式。若有重疊就會傳回布林值 true , 若否則傳回 false, 因此許多常見的遊戲如打地鼠、射擊遊戲都可以利用 hitTest。

57 關於 hitTest 指令

58 關於 hitTest 指令

59 關於 hitTest 指令

60 撰寫判斷蟑螂被打中與否的程式 被打中與否的 ActionScript 也要設在舞台中的蟑螂－roach 實體上, 這樣每隻複製出來的蟑螂就都能自行判斷自己是不是被打中了。以下就是此階段需要設置的所有程式碼：

61 撰寫判斷蟑螂被打中與否的程式

62 撰寫判斷蟑螂被打中與否的程式 點選舞台中的 roach 實體, 然後開啟動作面板。首先要宣告一個變數來記錄 hitTest 指令傳回來的布林值, 再用 hitTest 指令判斷自己本身是否被滑鼠指標的座標點給按到了：

63 撰寫判斷蟑螂被打中與否的程式

64 撰寫判斷蟑螂被打中與否的程式 由於蟑螂被打中與否的布林值已經存入 hitRoach 變數中, 所以接下來我們只需使用 if 判斷式來判斷 hitRoach 的值, 然後決定如何動作即可：

65 撰寫判斷蟑螂被打中與否的程式

66 蟑螂被打死而消失的程式 到此為止, 蟑螂已經能判別自己是否被打中, 而且在打中後能主動播放出死狀了。不過顯示出死狀還不夠, 它得在死後消失掉才行, 因此我們要到被打蟑螂元件中, 加入 ActionScript 來讓蟑螂死後自動消失。以下是此階段所要加入的程式：

67 蟑螂被打死而消失的程式 請進入被打蟑螂元件的編輯狀態中, 我們來加入本階段的 ActionScript：

68 蟑螂被打死而消失的程式

69 蟑螂被打死而消失的程式

70 蟑螂被打死而消失的程式 現在遊戲的基本機制都完成了, 你可以回到遊戲場景, 執行『控制/測試場景』命令試試看, 已經可以用拖鞋開始海扁蟑螂, 而蟑螂被打中後也會死掉並消失囉！

71 24-5 設定記分與判斷遊戲結束的程式 既然是遊戲, 就得記分, 也得有個結束, 不然打蟑螂打得滿頭大汗卻不知道成績如何, 或是蟑螂跑得沒完沒了, 可是會讓玩家失去耐性的！本節要加入的就是記分的程式, 以及判斷遊戲結束的程式。

72 設定記分的程式 記分的程式很簡單, 我們只要在遊戲一開始時多宣告一個用來儲存分數的變數, 然後在每隻蟑螂被打死時都讓它的值加 1, 就可以知道玩家打死多少隻蟑螂了！ 由於這個階段的程式很簡單, 以下我們就不將程式碼列出, 直接說明加入的步驟。

73 設定記分的程式 請回到遊戲場景, 點選 Actions 圖層的第 1 格影格後開啟動作面板。我們先前在此加入很多 ActionScript 了, 現在要再補充一些, 首先宣告 3 個變數：

74 設定記分的程式

75 設定記分的程式 接著要在 roach 實體 (即舞台中的蟑螂) 上設定加分的程式。因為判斷蟑螂被打中與否的程式在此, 因此只要在蟑螂被打中時替玩家加分即可。請點選 roach 實體後開啟動作面板：

76 設定記分的程式

77 設定判斷遊戲結束的程式 我們剛剛已經多宣告了 1 個 finish 變數, 所以接下來就可以利用這個變數來計算蟑螂消失的數量, 一旦蟑螂消失的數量達到 100 隻, 遊戲就可以結束了(因為我們一開始就限制產生的蟑螂只會有 100 隻)。當然, 必須把「因被打中而消失」和「因跑離畫面而消失」的蟑螂都算進去。為了達到這個目的, 利用取消載入這個影片片段事件是最合適不過的了。

78 設定判斷遊戲結束的程式 因為不論此蟑螂是被打中而移除, 還是跑出畫面而移除, 都屬於取消載入的事件, 這個事件會在指定的影片片段實體被移除後產生。也就是說, 假設一影片片段實體在影格 1 被移除, 則在播放到影格 2 時, 就會啟動取消載入事件。 同樣地, 由於這個階段的程式很簡單, 故我們就直接說明加入的步驟。

79 設定判斷遊戲結束的程式 由於要利用蟑螂被取消載入的事件, 所以 ActionScript 要設在 roach 實體上, 故請點選 roach 實體後開啟動作面板 ,我們先設定計算蟑螂消失數量的程式：

80 設定判斷遊戲結束的程式

81 設定判斷遊戲結束的程式 接著重新點選遊戲場景中 Actions 圖層第 1 格影格, 這裡需要再加入判斷 finish (亦即蟑螂消失數量) 是否達到 100, 以決定遊戲是否結束的程式：

82 設定判斷遊戲結束的程式

83 設定判斷遊戲結束的程式 遊戲場景的設定到此完成, 遊戲基本上已經可以玩了, 你可以在遊戲場景執行『控制/測試場景』命令, 搶先試玩看看！

84 24-6 設定開始與結束場景中的 程式 最後我們要替這個遊戲收個尾, 幫它把開始的等待畫面跟結束畫面處理一下。

85 設定開始場景 請切換到開始場景, 我們一開始就計畫要在此場景先播放一段開場動畫後, 等待玩家按鈕, 等玩家按下開始遊戲鈕後才進入遊戲場景, 而開場動畫元件之實體我們已經在練習檔中放置好了：

86 設定開始場景

87 設定開始場景 請雙按開場動畫元件 (就是舞台中的蟑螂實體) 進入編輯狀態, 為開始遊戲鈕加上 ActionScript：

88 設定開始場景

89 設定開始場景 須注意的是此處我們是在元件實體中設置 ActionScript 來控制上一層的時間軸主動畫, 所以必須使用 ActionScript 2.0 類別/影片/MovieClip/方法類別下的 gotoAndStop 語法。

90 設定結束場景 接下來是整個遊戲製作的最後階段－設定結束場景。在結束場景中必須顯示分數、評語和再玩一次鈕, 所以我們必須分別在結束場景中 Actions 圖層之第 1 格影格裡, 和再玩一次鈕上分別設置 ActionScript。其中又以前者的程式較複雜, 以下是該影格完整的 ActionScript：

91 設定結束場景

92 設定結束場景 以下我們就開始一步步完成結束場景中的程式設定。
首先要在結束場景中讓滑鼠指標重新顯現, 並移除小拖鞋自製滑鼠指標。請點選結束場景中 Actions 圖層之第 1 格影格, 然後開啟動作面板：

93 設定結束場景

94 設定結束場景 接著在同樣的位置繼續加入 ActionScript, 這次要加入依分數多寡來顯示不同評語的程式：

95 設定結束場景

96 設定結束場景 剩下最後一個程式設定, 就是在結束場景中, 再玩一次鈕圖層中點選再玩一次按鈕元件之實體, 然後設定如下 ActionScript , 讓玩家按下此鈕後可以跳到開始場景即可。

97 設定結束場景

98 設定結束場景 打蟑螂遊戲就這樣完成了！你可以匯出 Flash 影片檔, 享受完整的遊戲囉！