1. 前言
上節課我們重點說了遊戲開發和其他開發崗位的區別，以及如何高效地學習遊戲開發。今天這節課，我們就正式開始運用上節課中提到的HOPL（hands-on project learning）學習大法開始第一個案例 — 《Flappy Bird》。同學們，千萬不要擔心自己有沒有基礎，哪怕你一點基礎都沒有，通過這個案例，你會發現遊戲開發並沒有想象中那麼難，人人都可以學！
好了，廢話不多說，我們直接上硬菜！本節課我們會完成《Flappy Bird》的場景動畫以及角色動畫製作，全程不需要一行程式碼，妥妥的！ （獲取本教程視訊教程、美術資源以及本教程答疑請加U3D遊戲開發入門到精通QQ群：730399676，或點選連結：c7.gg/cccgC 即可加入，申請進群備註掘金）
2. 開始前的準備
2.1 U3D最新版本下載
本案例使用的是最新版本的Unity，當然你用其他版本也是可以的，沒有特殊的要求。不過作為技術人，我們應該走在時尚的最前沿~技術的更新迭代很快，Unity出版本的速度也絕對是槓槓的。新的版本都會有新的功能特性更新，用最新版有助於我們在技術上不掉隊，有百利而無一害^ ^
下面是Unity最新版本的下載地址： store.unity.com/cn/download…
2.2 美術資源準備
我建了個名叫 “U3D遊戲開發入門到精通” 的QQ群（群號：730399676），或點選連結：c7.gg/cccgC 即可加入。
案例的美術資源可以到群內的共享資料夾進行下載。案例所有的美術資源都是用鉛筆繪畫製作，有繪畫天賦的朋友也可以自己畫，畢竟隨便塗個鴉誰還不會呢？對吧！
下圖就是美術資源展示：
3. 建立Flappy Bird新專案並匯入美術資源
3.1 建立Flappy Bird新專案
下載完畢Unity最新版本後，雙擊開啟並註冊一個帳號即可使用，大家可以使用personal版本，這個版本不需要付費，學習使用完全足夠。 如下圖，
- 點選New來建立一個空的新專案
- Project name：給新專案起個名字（名字隨便起，自己喜歡就行），這裡我命名為FlappyBird
- Template（模板）：選擇2D，即啟用2D遊戲製作模式，因為我們的遊戲是2D的，所以選擇2D就可以了
- Location（專案儲存本地地址）：將專案儲存在我的電腦的某個地址，建議不要放在C盤內（C盤是系統盤，C盤如果記憶體不足，電腦會很卡），可以放在D盤（隨你喜歡）
- 其他不用設定，並點選 “Create project” 建立專案
3.2 將場景檢視和遊戲檢視改成手機螢幕尺寸
3.2.1 切換到iOS平臺開發模式
大家都知道，Flappy Bird是款手遊，所以我們需要把我們的場景檢視（新手可以理解為創作遊戲的區域）和遊戲檢視（新手可以理解為預覽遊戲效果的區域）的尺寸改成手機螢幕尺寸，具體操作如下：
- 點選上方工具欄最左邊的File，並在下拉選單中選擇 Build Settings
- 在彈出的Build Settings的視窗中的Platform的列表裡選中iOS平臺
- 點選視窗右下角的“Switch Platform”按鈕，從而切換到iOS平臺
- 如果當時安裝U3D的時候沒有選擇安裝iOS平臺的擴充套件包，則“Switch Platform”的按鈕是灰色的，不能點。在這種狀態下要先點選“Open Download Page”按鈕來下載iOS平臺的擴充套件包並安裝成功然後再做上述第3步操作。
成功設定後會呈現下圖的狀態，原來的“Switch Platform”的按鈕會變成“Build”按鈕。這表示已經成功切換到iOS平臺模式，我們就可以把這個Build Settings的彈出視窗關閉了。
3.2.2 設定場景及遊戲檢視的尺寸
接下來，我們還需要設定場景（Scene）和遊戲（Game）檢視的尺寸。在U3D中，只要我們設定好遊戲檢視的尺寸，場景檢視的尺寸會自動匹配。所以我們這需要做的操作如下：
- 選中並點選Game檢視區域的“Free Aspect”下拉選單
- 在出現的下拉選單中點選16 : 9 Portrait（9：16）
具體如下圖所示：
4. 匯入美術資源
下面，我們就需要把我們前面準備好的美術資源匯入到我們的Unity遊戲引擎中了。Unity中匯入美術資源是很方便的，我們可以通過拖拽的方式直接將美術資源匯入到U3D中。 具體操作如下圖：
5. 場景動畫製作
5.1 場景搭建
美術資源匯入後，我們第一步要做的是在我們的Scene（場景）檢視中搭建我們的場景。《Flappy Bird》這個遊戲的場景是由一個地面和一個由房屋樹木組成的背景圖組成的。U3D中將美術資源新增到Scene檢視中是非常簡單方便的，依然用簡單的滑鼠拖拽即可完成。 具體操作步驟如下：
- 將背景圖以及地面拖進U3D視窗左側的Hierarchy中
- 在Scene檢視中調節地面與背景圖的大小並擺放好適當的位置
- 選中地面，在U3D視窗右側的Inspector工具欄中找到Order in Layer（按順序排列圖層），並將對應的值改成0，從而確保地面的圖片覆蓋在背景圖上
具體操作示意圖如下：
5.2 場景動畫製作
場景搭建好以後，我們就開始場景的動畫製作啦~《Flappy Bird》的場景動畫相當簡單，為了達到玩家感覺小鳥是在向前飛翔的目的，我們只需要讓地面，也就是我們的ground圖片在不斷向左移動就行。 具體操作步驟如下：
- 選中ground圖片，並在U3D視窗頂層工具欄中選中window選單欄。選擇選單欄中的Animation（動畫），並在Animation子選單欄中選擇Animation，U3D中會彈出ground的Animation創作視窗
- 在ground animation視窗點選Create按鈕建立ground的動畫檔案，並儲存命名為ground_ani
- 點選Add Property按鈕，在出現的選單欄中點選transform（移動），並在transform的下拉選單欄中點選position（位置）旁邊的 “+” （新增）按鈕
- 展開groud：Position下拉框，並上方紅色錄製按鈕，開啟錄製模式。然後將右邊時間軸的白線拖動到當前最後一幀，並在Scene檢視中選中ground，按下鍵盤快捷鍵W進入移動模式，將ground在紅軸（X軸）方向向左移動一定距離
6. 角色“小鳥”動畫製作
6.1 角色“小鳥”製作
- 建立名為player的GameObject：在Hierarchy裡點選滑鼠右鍵，在出現的選單欄中點選“create empty”來建立一個GameObject（遊戲物件）並將它的名稱修改為player（你也可以起其他名字，隨你喜歡），並在player對應Inspector介面裡的transform裡的position的x,y,z三個座標都改為0
- 匯入小鳥身體美術素材：將前面Assets中匯入的小鳥身體的美術素材（檔名為bird）拖到player下面，並在bird對應的Inspector介面裡的Order in Layer的數值設定為“1”。Order in Layer這個數值表示圖層的順序，數字越大則在圖層的更上面
- 匯入小鳥翅膀美術素材：將前面Assets中匯入的兩個翅膀的美術素材（檔名為wing_f 和 wing_n）拖到bird下面，並將wing_f 的Order in Layer的數值設定為“2”，wing_n的Order in Layer的數值設定為“0”
- 調整翅膀位置：調整兩個翅膀的X軸向位置，是小鳥整體看起來是一隻品相不錯的小鳥，具體操作為：選中要調整的翅膀，並且按W鍵切換到移動狀態（出現座標系），然後滑鼠左鍵按住紅軸（X軸）向左拖動一定距離
- 調整player整體位置：通過調整player的X軸向位置，讓小鳥在整個場景的偏左側，否則到時候水管從場景右側出現，玩家反應不過來。具體操作為：選中player，並且按W鍵切換到移動狀態（出現座標系），然後滑鼠左鍵按住紅軸（X軸）向左拖動一定距離
（獲取本教程視訊教程、美術資源以及本教程答疑請加U3D遊戲開發入門到精通QQ群：730399676，或點選連結：c7.gg/cccgC 即可加入，申請進群備註掘金）
6.2 “小鳥”的動畫製作
-
建立小鳥的動畫檔案：在Hierarchy中選中player，並在軟體視窗上方工具欄中選擇window->Animation->Animation。在出現的Animation視窗中點選“Create”按鈕建立player的動畫並命名為player_ani.
-
讓小鳥整體上下浮動：通過順序點選Add Property -> bird -> Transform 出現以下畫面，然後點選position右方的“+”號新增小鳥的動畫。
-
新增小鳥向上關鍵幀： 將時間線（白色那根線）拖到整個0:15處，並點選新增關鍵幀，並將該關鍵幀的Y軸方向座標改為0.2，具體如下圖
-
新增小鳥向下關鍵幀： 將時間線（白色那根線）拖到整個0:45處，並點選新增關鍵幀，並將該關鍵幀的Y軸方向座標改為-0.2，具體如下圖
-
調節關鍵幀，使移動更順滑：選中任意一個關鍵幀，並滑鼠右鍵點選。在出現的選單欄中按照 Broken -> Both Tangents -> Linear設定。給四個關鍵幀都設定成這樣。
-
新增兩個翅膀： 新增兩個翅膀：按順序點選Add Property -> bird -> wing_f ，然後點選“Is Active”旁的“+”號。另一個翅膀也一樣操作，按順序點選Add Property -> bird -> wing_n ，然後點選“Is Active”旁的“+”號。然後我們要把藏在身體下面的那個翅膀隱藏掉，方法是，在第一幀和最後幀把wing_n : Game Object.Is Acitve的打鉤給去掉，具體如下：
6.3 “小鳥翅膀”的動畫製作
- 建立翅膀的動畫檔案：在已經開啟的Animation視窗，選擇player_ani出現下拉框，點選“Create New Clip”，並把新的動畫命名為player_fly_ani，具體如下
- 新增兩個翅膀：按順序點選Add Property -> bird -> wing_f ，然後點選“Is Active”旁的“+”號。另一個翅膀也一樣操作，按順序點選Add Property -> bird -> wing_n ，然後點選“Is Active”旁的“+”號。
- 新增 “wing_f” 翅膀旋轉動畫：按順序點選Add Property -> bird -> wing_f -> Transform，然後點選Rotation旁的“+”號。
- 讓 “wing_f” 翅膀揮動起來：如小鳥上下動畫製作那樣，在0:15和0:45處插入兩個關鍵幀，並把0:15處的Z軸座標值改成30, 0:45處的Z軸座標值改成-30。然後我們把後面四個關鍵幀的位置往前挪動下，讓翅膀揮動的快一點，挪動的方式就是滑鼠左鍵按住關鍵幀然後拖到自己想要的位置，具體如下圖
- 讓 “wing_f” 翅膀按右側點揮動：做到這裡，我們播放下會到小鳥的翅膀揮動的很奇怪，因為翅膀的旋轉中心在翅膀中央，而我們想要的是在翅膀的右側端點旋轉，所以我們要調整下旋轉基點。我們在軟體視窗Assets那個區域找到 “wing_f” 翅膀，然後在右側Inspector區域找到Pivot那個屬性的下拉選單，然後選擇下拉選單的Right，然後點選下方的Apply。我們會發現，小鳥的翅膀在畫面上往左移動了，那我們就要調回原來的位置。移動物體的方式前面有講過，我們在Hierarchy中選中wing_f，然後按w鍵進入移動模式，然後按住紅色軸向右拖動到自己覺得合適的位置即可。具體如下：
7 動畫狀態機制作
我們做的小鳥的上下的動畫其實遊戲開始前小鳥翅膀不動只上下運動的待機動畫，而遊戲開始後小鳥就要開始揮動翅膀了。所以，遊戲的角色實際上是有很多種狀態的，不同的狀態要播放的動畫是不同的。這裡就以《Flappy Bird》遊戲舉例，遊戲狀態和動畫之間存在的關係如下：
- 遊戲開始前，小鳥要播放待機動畫（Idle）
- 遊戲開始後，小鳥要播放飛翔動畫（Fly）
- 遊戲結束時候，小鳥要播放死亡動畫（Death）
- 玩家選擇重新玩遊戲時，小鳥又播放待機動畫
那怎麼樣才能做到在不同狀態下播放不動的動畫呢，這裡我們就要用到動畫狀態機。指令碼程式就是通過控制動畫狀態機中的引數去實現在不同的狀態下播放不同的動畫的。這裡我們就來做本案例的動畫狀態機吧！
7.1 建立動畫狀態機
我們在Hierarchy中選中player，然後在軟體視窗的上方工具欄中按順序點選Window -> Animation -> Animator，這樣就可以建立出我們player的動畫狀態機了。建立出來後，我們調整下各工作視窗檢視的大小，這樣看起來更舒服。調整的方式就是滑鼠左鍵按住某工作視窗的邊界，然後直接拖動就行。比如：Hierarchy視窗，我們滑鼠左鍵按出視窗右邊框，然後往左拖到不能拖為止，這樣這個視窗就能佔比較小的為止，使得其他視窗占的面積更大。具體如下：
7.2 動畫狀態機制作
- 新增動畫引數：點選Animator皮膚上的Parameters（引數）切換到Parameters皮膚，然後點選皮膚上的“+”號出現選單欄，這裡我們選擇“trigger（觸發模式）”，然後將建立出的新引數命名為Idle。同樣的，我們再建立個trigger型別的引數，命名為Fly，具體如下
- 將引數與動畫繫結：滑鼠左鍵點選Base Layer這個視窗上的Any State長方塊，然後點選滑鼠右鍵並點選出現的“Make Transition”按鈕，出現連線，將連線拖到player_ani（代表小鳥上下的動畫）這個長方塊上。這樣表示，可以從任何狀態播放小鳥上下的動畫。點選白色的連線，在右邊Inspector皮膚上找到Conditions（條件）屬性，點選下方“+”號，然後在出現的下拉選單中選擇“Idle”這個引數。點選白色的連線，在右邊Inspector皮膚上找到Conditions（條件）屬性，點選下方“+”號，然後在出現的下拉選單中選擇“Idle”這個引數。這樣就將Idle這個引數代表了player_ani這個動畫（小鳥上下動畫），後面程式只要通過控制Idle這個引數就可以播放player_ani這個動畫了。同理，從Any State上再建立一條連線到player_fly_ani上，並把兩者之間的連線的Conditions設定成“Fly”。具體如下
到這裡，我們已經制作完成了場景和角色動畫，並製作了動畫狀態機。我們用Idle引數代表player_ani，用Fly引數代表player_fly_ani。後面我們只有通過C#指令碼去控制這兩個引數，讓他們在不同的狀態下播放不同的動畫。我們來看下最終的效果：
下節課，我們講《Flappy Bird》UI與互動及動態關卡技術，不見不散~
（獲取本教程視訊教程、美術資源以及本教程答疑請加U3D遊戲開發入門到精通QQ群：730399676，或點選連結：c7.gg/cccgC 即可加入，申請進群備註掘金）
我們的本教程的大綱如下（已出課時，已增加跳轉超連結）：
- U3D遊戲開發從入門到彎道超車：序章
- 《Flappy Bird》場景動畫及角色動畫製作
- 《Flappy Bird》UI與互動及動態關卡技術
- 《Flappy Bird》剛體與碰撞器、碰撞與檢測
- 《Flappy Bird》角色狀態控制與遊戲計分實現
- 《Flappy Bird》開發流程圖繪製與知識點思維導圖總結
- 《Flappy Bird》中所用知識點學習
- 《Flappy Bird》獨立完成指導與難點總結
- 《Crazy Bird》角色自由飛翔與子彈發射
- 《Crazy Bird》怪物自動生成
- 《Crazy Bird》戰鬥主邏輯實現
- 《Crazy Bird》不同怪物製作及戰鬥難度升級
- 《Crazy Bird》BOSS製作及導彈自動跟蹤效果實現
- 《Crazy Bird》BOSS戰鬥實現
- 《Crazy Bird》關卡管理與遊戲優化 — BOSS、AI與關卡
- 《Crazy Bird》關卡管理與遊戲優化 — 關卡管理
- 《Crazy Bird》關卡管理與遊戲優化 — 遊戲優化（1）
- 《Crazy Bird》關卡管理與遊戲優化 — 遊戲優化（2）
- 《Crazy Bird》開發流程圖繪製與知識點思維導圖總結
- 《Crazy Bird》中所用知識點學習
- 《Crazy Bird》獨立完成指導與難點總結
- U3D遊戲開發從入門到彎道超車：總結