繼昨天的事前規劃和舞台設定之後，今天要繼續來實作射飛鏢的小遊戲，而今天的目標是設置飛鏢物件，並且讓飛鏢可以和滑鼠互動，那我們就開始吧！

載入資源

由於我們還沒有飛鏢圖片的資源，所以先點擊專案右側的 資源管理，並點擊 加載資源。

跳出視窗後輸入資源的代理名稱 dart 並搜尋該名稱，就可以看到如上圖的圖片素材，勾選最左邊的 dart.png 並點擊 加載資源 即可。

另外還有標靶的部分，標靶的名字我是取成 target，既然已經看到了就順便加載，用同樣的方式命名、搜尋、加載資源。

上圖中中間的資源就是我兩年前製作射飛鏢的遊戲預覽圖，可以看到標靶有很多個，但我們這次的實作會相對簡單一點。

好了之後確定資源管理內的圖片區內，如上圖有剛剛加載的兩個圖片資源即可。

設置飛鏢物件

打開我們昨天設置的 建立圖層佈局，還記得這裡是我們的 gameRoot 嗎？代表遊戲物件的圖層，所以我們要將飛鏢新增在這個圖層。

首先我們並非是直接新增飛鏢的圖片到舞台中，因為除了飛鏢本體以外，我們還要飛鏢的影子，讓遊戲的物件更具有層次感，不過影子說穿了也是一張飛鏢圖片，但會經過調色處裡，由於這兩個物件的位置是互相連動的，所以我們需要將它們裝在一個容器之中。

因此先點擊資源中的 +顯示容器，並將容器的名字改成 dart，接著進入容器之中，再新增兩張飛鏢圖片，被疊在下方的用來當作影子，也就是右側排序在上的，所以將其名字改成 dart_shadow，另外一個則為 dart_clip。

接著來調整作為陰影的飛鏢參數，點擊 dart_shadow，將 位置 調成 (20,15) 其位置與本體偏離，然後將 著色處 改為 #000000（黑色），最後將 透明度 調為 0.4。

都調整好後的最終結果就是如上圖，怎麼樣，看起來是不是真的就像陰影一般呢？

陰影設置好後退出容器，並將容器的 y 座標改成 800，使其保持在舞台的下方，這裡就是我們用來發射飛鏢的位置。

完成後就可以儲存動作了。

飛鏢隨滑鼠轉動

為了讓飛鏢更具有動感，我們要來讓它會隨著滑鼠的移動而改變面向、位置。

讓我們來新增一個事件 移動飛鏢，並將 重複次數 改為 -1，首先先來處理飛鏢面向滑鼠的部分。

新增動作 更新顯示物件，這個動作可以讓我們隨時更新顯示物件的位置、角度、縮放等各種屬性，由於我們是要設定面向，也就是角度的部分，所以只要勾選 設定旋轉角度，並將 設定方式 設為 轉向鼠標 即可。

接下來就是關於 物件的ID 要選什麼了，是 dart 呢？還是 dart_clip？

還記得我之前說過關於容器的部分嗎？容器裡的所有顯示物件都會根據容器的屬性去做改變，如果直接改變容器的角度，就會造成本體和陰影的位置發生偏離，如上圖那樣，如此一來陰影就會顯得非常不自然，這可不是我們要的。

因此為了避免這個問題，我們應該要先單獨調整本體的角度，之後再讓陰影套用本體的角度，這樣就不會發生陰影位置偏離的問題了，所以我們先選擇 dart_clip。

之後再另外新增一個更新顯示物件，並選擇物件 ID dart_shadow，而這一次旋轉角度的設定方式就不是面向滑鼠了，而是要跟隨本體的角度，因此設定方式為預設的 設定旋轉角度，此時 旋轉角度 內預設的內容為 {this.rotationDeg}。

首先我們要知道事件表中，. 在 {} 裡面所包含的意思是什麼，其實我們之前也有用過，在 [Day 13] 為自己的遊戲添加排行榜吧！ 這篇，用到了 {me.id}，雖然有簡單介紹，但不是針對 .，因此我在這邊做個補充。

物件變數介紹

在 {} 中，. 的用途是為了讀取某個 物件 內的 屬性 而存在的，. 前面的變數代表的是一個物件的名稱，例如我們新增的飛鏢圖片就是其中一種，以我個人的理解，物件就是一個本身帶有許多屬性的變數型態，在事件表中這些屬性又被稱為 物件變數，例如飛鏢圖片包含的屬性就有 x、y、scale、alpha 等等非常大量的屬性，甚至 scale 也是一種物件，裡面又包含了 x、y 等，因此配合 . 的使用，就可以輸入像是 {dart.scale.x} 這樣，用來讀取 dart 裡面的 scale 裡面的 x 值。

回到上方，rotationDeg 就是 this 的屬性，裡面儲存的是顯示物件的角度，至於 this 是什麼呢？這大概是小哈為了模仿物件導向程式而設計的，但我們今天不是要討論程式，所以稍微簡單介紹其用途就好。

從提示可以知道，this 其實就是指我們在 物件的ID 中輸入的物件，這樣如果只是單純的想要根據當前物件的屬性去做改變的話，為了方便我們不用每次填寫欄位時都要重打 ID，所以多了一個 this 的功能讓我們使用，不過要注意的是，並不是所有的動作都有這個功能，只是更新顯示物件這個動作有而已。

接著讓我們回到原本的設定中，雖然介紹了 this 但我們今天還不會用到，因為我們要讓 dart_shadow 的角度，跟 dart_clip 的角度同步，所以我們要把 this 改成 dart_clip，變成 {dart_clip.rotationDeg}，代表 dart_clip 的角度的意思。

顯示物件的角度屬性有 rotation、rotationDeg 兩種，只是前者的單位是弧度，後者的單位是角度。

完成後讓我們來測試一次，可以看到如上圖那樣，是不是看起來就正常了許多呢？

CG 範例事件表

總結

今天的實作就到這裡了，載入了飛鏢、標靶的圖片資源，並且放置了飛鏢物件，且飛鏢還有陰影，之後的標靶也會實作陰影，到時候應該就簡單多了，最後還讓飛鏢會根據滑鼠的位置進行轉動，明天會繼續讓飛鏢與鼠標的互動性更高一點，讓其不要一直停在原處轉動而已，另外還會實作本次遊戲的重點項目，射飛鏢！