主題
達人專欄
達人專欄
前言
終於要開始建造我們飛船（Scene）了。
在 EP 1 的時候提到，Scene 是由 Node 組成。
以最近的例子來說，像是《薩爾達傳說：王國之淚》。
左納烏裝置都有各自的功能，最後組合出你想要的裝置，像是交通工具等等。
所以我們先來預告這艘飛船會用到的 Node 有以下這些。
- Area2D（偵測攻擊）
- Sprite（飛船圖片顯示）
- AnimatedSprite2D（引擎火焰圖片動畫）
- CollisionShape2D（控制 Area2D 的形狀）
- Timer（武器冷卻時間 計時器）
第一步要來決定這個 Scene 的 骨架（Root Node），
也就是我們第一個要新增的 Node。
要怎麼選擇呢？
我自己簡單的理解是，實現需要的功能外——
完成 Scene 的過程中不會增加自己不必要的麻煩。
那飛船需要的功能有什麼？
它需要 顯示飛船的圖片 讓我們知道在操控什麼東西。
它需要可以 移動 來閃避攻擊。
它需要在被攻擊時 知道自己被攻擊。
這裡選擇 Area2D 作為 Root Node，
因為它裡面的參數有 Position（位置座標）可以做到讓飛船 移動，
本身的功能可以做到 偵測攻擊 的功能。
小補充
這裡可能有人會問怎麼不選 Sprite2D 或是 CharacterBody2D？
這次因爲飛船本身沒有很複雜，我覺得也可以選 Sprite2D 當 Root Node。
但是未來 Scene 越來越複雜的時候，選適合的 Node 就蠻重要了。
像是我們在解數學問題時，選了錯誤的方向解半天，感覺還越解越複雜。
選了對的方向，一切水到渠成。
順帶一提另一個選擇 CharacterBody2D 為什麼不適合。
因為這次我們的飛船不需要實體，只要知道有東西進入他的圓飛船範圍就好。
對我們沒什麼幫助，還是需要在底下加 Area2D。
如果找不到，可以在上面的搜尋框輸入關鍵字，馬上就能找到想要的 Node。
新增 Area2D 後，可以右鍵選擇 Rename（重新命名）。
把它重新命名為 Player，方便我們辨識。
命名這件事很重要，包括之後開始用 GDScript 寫程式也是。
創一個資料夾 ＋Create New -> Folder，把它命名為 Scenes，
然後在裡面建立一個 Player 資料夾。
按 Crtl + S 儲存，存在剛剛創好的 Player 資料夾。
現在進度：
- Area2D（New！）
Sprite2D 可以顯示我們飛船的圖片。
跟新增 Area2D 一樣，新增 Sprite2D 在 Area2D 底下。
我們打開先前下載的素材，把 Player_ship (16 x 16) 拖進 Player 資料夾。
或是可以右鍵選擇 Open in File Manager，直接打開資料夾放進去。
我自己會再把它重新命名為 ship_sprite。
有了飛船的圖片，接著準備把它放入 Sprite2D。
選擇 Sprite2D，在 Inspector 會出現 Sprite2D 的相關設定。
把剛剛放進去的 ship_sprite 拖到 Texture 旁邊的 Empty。
或是點擊 Empty 選擇 Quick Load 搜尋。
放進去後主畫面就會顯示飛船了。
顯示三個飛船，往左、往右、往正前方的飛船。
這裡我們不需要自己拿修圖軟體分成三個再放進來，
使用 Godot 內建的功能就能簡單地分開。
一樣是要在 Sprite2D 裡面設定。
在 Inspector 的 Animations 設定 Hframes ＝ 3。
簡單來說是告訴 Godot 這個圖片是水平方向分成三幀的動畫。
設定完後可以調看看底下的 Frame，像是翻頁動畫的感覺。
設 Frame = 1，讓飛船初始狀態是正前方飛的樣子。
現在進度：
- Area2D
- Sprite（New！）
再來為了讓飛船表現的效果更好，
要幫他的屁股加上噴射引擎的火焰。
我們一樣先從素材裡面把三張 Boosters 都放進來。
然後在 Sprite2D 底下新增 AnimatedSprite2D，重新命名為 Boosters。
點擊 Empty 選擇 NewSpriteFrames 後，打開 SpriteFrames。
default 重新命名為 forward。
點擊中間那個紅框裡像棋盤的按鈕，
會跳出選擇的介面，選擇我們剛剛放進來的 Boosters 圖片。
接著跟剛剛飛船三個分成一個的方法有點像。
左上角可以放大縮小圖片。
火焰只要分成兩格，所以可以設定成：
Horizontal（水平）＝ 2, Vertical（垂直）＝ 1
切好之後可以點擊圖片選擇你要的格子。
這裡我們當然是兩格都要，才有辦法動起來。
選好之後，回頭看看主畫面。
飛船火焰的位置不太對呢。
那我們可以稍微調整火焰的位置。
有兩個方法，從 Offset 或是從 Transform 的 Position 設定。
兩者有一點差別，不過在這邊影響不大。
因為飛船是 16 x 16，所以這裡讓火焰 向下 15 px。
Offset y = 15 px
剛好可以貼在飛船的屁股。
小補充
| 座標軸 | 正向（＋） | 負向（－） |
| X 軸 | ?? 往右 | ?? 往左 |
| Y 軸 | ?? 往下 | ?? 往上 |
X 軸「 向右 ??：正向( + )／向左 ??：負向( - ) 」
Y 軸「 向上 ??：負向( - )／向下 ??：正向( + ) 」
可以注意到 Y 軸 是跟我們平常習慣是相反的。
回頭繼續設定 SpriteFrames，預設的 5 FPS，改為 10 FPS。
可以按右邊的播放鍵比較看看差別。
同樣的步驟新增往左往右移動時的火焰。
最後記得點擊在 forward 上面的 Autoplay on Load。
這可以在遊戲讀取飛船後，自動播放火焰的動畫。
完成後的飛船會是這樣子，是不是更有感覺了。
現在進度：
- Area2D
- Sprite
- AnimatedSprite2D（New！）
剩下兩個比較簡單的一起講，CollisionShape2D 和 Timer 。
Area2D 它的功能是偵測進入範圍的東西，
這範圍是方是圓是大是小的控制就是 CollisionShape2D 來設定的。
建立方式跟前面的差不多，
點擊 Empty 後，選擇 New RectangleShape2D。
直接拖曳橘點可以調整大小。
小技巧
按住 Alt（Mac 的話是 option）再拖曳，可以同時拉兩邊的橘點。
最後一個是 Timer，簡單來說就是計時器。
新增後重新命名為 GunCooldownTimer。
在這邊的功用是當 飛船武器冷卻時間 的 Timer（計時器）。
然後要把它的 One Shot（一次性）設定打開，計時一次後停止。
我們的設計是要等開槍才會再開始下一次計時，不需要它自動下次的計時。
接著下一章我們要開始建構它的 控制系統（GDScript）了。
