繼昨天我們已經為遊戲加上了音樂、音效，遊戲主要的部分已經完成了，今天要來實作的是遊戲的主畫面，並且在點擊畫面後才會開始遊戲。

設置主畫面

在事件 初始化 中，新增動作 建立圖層佈局，我們的主畫面也是用這個動作來製作的，首先第一件事情是在 圖層的ID 填入 uiRoot，記得我之前提過嗎？要將遊戲物件跟遊戲介面的圖層分開，所以之前才會有 gameRoot，這一次我們要製作的是屬於遊戲介面的部分，也就是 UI，所以將圖層命名為 uiRoot。

接著我們還可以將 UI 圖層分得更細，新增一個容器 menu，主畫面的意思，並進入容器當中，我們要來把主畫面上的顯示物件放到這裡面來。

接下來就是各位自己發揮創意的時候了，總之就是要新增兩個物件，第一個是 遊戲標題，第二個是點擊開始的 提示文字。

以上就是我製作的樣子，不管要新增多少物件都可以，只要全部都塞在 menu 裡面就好，例如我的標題其實是一個容器，裡面裝了飛鏢、標靶、文字框等，而提示文字就直接新增兩個文字框，其中一個作為陰影而已，當然有能力的話你也可以自己在繪圖軟體上面設計一個遊戲的 Logo，然後再把它上傳到 CG 上面，直接在這裡新增圖片，總之完成後就可以儲存動作了。

要注意的是，如果有新增飛鏢圖片的話，要確保它們的物件 ID 不是 dart 開頭，否則就會被事件 擊中標靶 裡的 For Each 給搜尋到，會被當作玩家投擲出的飛鏢，而若是有標靶也要注意名稱不為 target。

接下來還有一點，那就是既然有主畫面了，那之前的飛鏢、標靶就要在一開始的時候隱藏起來，因此讓我們打開 gameRoot 的建立圖層佈局，並且將這兩個物件的 顯示 給取消勾選，這樣它們一開始就會被隱藏起來了。

這時我們測試一下遊戲看看，就可以看到遊戲顯示了我們剛剛設置的主畫面，並且之前的飛鏢和標靶都被隱藏起來了，那我們接下來就要實作點擊開始遊戲的部分。

點擊開始遊戲

我們先在初始化的事件中新增一個 全域變數 game_state = 0，型別為 整數，這個變數要用來記錄我們當前的遊戲狀態，根據 0、1、2，分別為「主畫面」、「載入中」、「遊戲中」，因為我們某些事件需要根據當前的遊戲狀態來決定是否能夠執行。

接著來新增一個新事件 點擊開始遊戲，並新增觸發 滑鼠點擊，用來偵測滑鼠點擊左鍵（click）。

然後就是要檢查遊戲狀態了，只有當我們在主畫面的時候，點擊滑鼠左鍵才會觸發此事件，因此新增檢查 比較數字，檢查 {game_state} == 0，代表當前為主畫面的狀態。

接下來就是動作的部分了，當我們觸發開始遊戲後，第一步就是先改變遊戲的狀態，所以新增 儲存全域變數，讓 game_state = 1，也就是將當前遊戲狀態設為「載入中」。

另外我們還得讓主畫面的顯示物件消失，因此新增 更新顯示物件，選擇物件 ID 為 menu，為了讓主畫面慢慢的消失，我們將其 透明度 設為 0，並啟用 補間動畫，補間動畫為 Quadratic Out（二次方淡出），時間為 500 毫秒，完成後儲存動作，接著新增動作 等待 500 毫秒，用來等到主畫面消失為止。

接著由於我們一開始就把飛鏢和標靶隱藏起來了，但開始後必然要讓它們顯示出來，因此新增兩個 更新顯示物件，分別讓 dart、target 的顯示狀態變回顯示，只是要注意的是這裡需要我們自行輸入布林值型態的值 true。

我在 [Day 09] 變數的型別與作用範圍 時有提過，對於事件表來說布林值除了 true/false 以外，用 1/0 表示也是可以的，所以這裡也可以寫成 1 就好。

如此一來，點擊開始遊戲的部分其實就差不多了，這時候測試遊戲，並點擊一下畫面，就可以進入遊戲了。

雖然已經可以遊玩了，但不要忘記了我們現在的遊戲狀態還在「載入中」，因為在正式開始之前，我們還有一件事情要做。

遊戲開始倒數動畫

我想要讓遊戲在開始時，會有一個 3、2、1、GO!! 的倒數動畫，理想狀態是會有一個很大的文字慢慢的淡入到畫面中央，並且漸漸的縮小，然後重複四次顯示不同的文字，其他流程都一模一樣，這時就可以利用到我在 [Day 17] 參考事件的實際應用－函數事件 介紹到的技巧了！

首先我們來新增一個事件 顯示倒數文字，並將其設定為 參考事件，我們要在這個事件實作一次上述的文字動畫。

因此第一步就是先 建立圖層佈局，父節點 設為 uiRoot，接著新增 文字框，先將 錨點 設為 (0.5,0.5)，這可以讓圖案的中心點設為正中間。

接著各位可以自行測試 樣式 怎麼設定會比較好，例如我就是簡單的將 字體大小 設為 120，字邊粗細 為 6，並設為 粗體。

繼續往下，由於我們要讓文字由大變小，且能夠有淡入效果，因此要把 縮放 設大一點，我設定成 (3,3)，以及 透明度 要設定為 0，稍後才能讓其淡入，都設定好後記得取個名字，例如我取成了 countdown_text。

有了文字框之後，第二步是要改變文字框內的文字，作為參考事件，我們會將要顯示的文字利用變數傳進來，之後在這裡將變數的內容套用到文字框身上，因此新增動作 更新文字，物件選擇剛剛新增的 countdown_text，文字 填入 {content}，content 就是我們待會用來傳入字串的變數名稱。

第三步要來處理文字動畫的部分，新增動作 更新顯示物件，縮放 設定為 (0,0)，透明度 設為 1，補間動畫 使用 Cubic In（三次方淡入），時間 為 500 毫秒，這樣子就可以讓剛剛的文字框慢慢的淡入到遊戲中了。

第四步就是 等待 1000 毫秒後，利用 移除物件 將 countdown_text 給移除掉，動畫時間是 0.5 秒，因此文字淡入後會在畫面中停留 0.5 秒才被移除。

如此一來，這個參考事件就完成了，所以接下來就是讓我們使用它的時候，回到事件 點擊開始遊戲，新增動作 觸發事件，對象為 顯示倒數文字，並新增一個型別為 字串 的區域變數 content = 3，最下方一定要是 等待事件完成所有動作，這樣系統就會將 content 傳入 顯示倒數文字 去觸發，並等待 1000 毫秒以後才繼續執行下一個動作。

因此接下來就是將該動作再複製三個出來，分別將裡面的 content 各自改成 2、1、GO!! 就完成了。

接著倒數完以後，記得我們還要使用 儲存全域變數，將遊戲狀態設為遊戲中 game_state = 2，因為接下來我們將要發揮它的第二個用途。

在這之前先測試一下遊戲，可以看到在開始遊戲後出現了超酷的倒數動畫，但是有個小問題，那就是在倒數期間我們竟然可以投擲飛鏢，這怎麼可以，所以我們要來解決這個部分。

理論上只有遊戲中才可以投擲飛鏢，這就是 game_state 的第二個用途，找到 按住飛鏢 和 放開飛鏢 這兩個事件，分別新增檢查 比較數字，檢查 {game_state} == 2，並將它們拉到檢查的第一個位置，這樣當遊戲狀態不是遊戲中的時候，自然就不會繼續往下檢查而觸發動作了。

另外 移動飛鏢 事件其實也是一樣，當 {game_state} == 0，也就是畫面在主畫面時，飛鏢是被隱藏的，所以這個事件也不需要觸發，所以我們也可以在這裡新增一個 比較數字 來檢查這個部分。

到此為止，我們今天的所有任務就結束了，最後測試一次遊戲，一開始是遊戲主畫面，點擊後會開始遊戲，開始前會先進行倒數，且無法投擲飛鏢，倒數完後可以正常投擲，完美！

CG 範例事件表

總結

今天我們將遊戲加入了主畫面，以及開始前的倒數動畫，但我覺得其中最值得注意的其實是遊戲狀態的部分，許多遊戲都有提供遊戲暫停的功能，但那可不是你說暫停所有物件就自己停住了，今天的方法是在每個事件作用之前都檢查一次遊戲狀態，因為我們的遊戲規模比較小，所以這樣做就可以了，但如果遊戲規模很大的時候可能就不是這樣做了，雖然我也沒有試過，只是心中有個想法而已，不過這次應該沒機會跟各位分享了。

明天我們要接續的完成遊戲中的計分、計時系統，以及結束後回到主畫面，能夠重新遊玩的機制。