Unity 4.3 我們發佈了第一階段的2D工具 為此,我們用這個工具做了一個2D範例 這個2D範例叫做"鐵橋塔防" 描述倫敦鐵橋被外星人入侵的故事 範例完全用2D圖片和物理來呈現 讓你了解這些元素如何在Unity裡組合 影片會說明範例裡的背景、前景、角色、特效 鏡頭追跡、動作和腳本程式是如何製作的 開始之前,先來聊聊基本的Unity 2D工作 首先,當要製作2D專案,你應該先設定工作環境為2D 可以在建立新專案時在下拉選單設定 或是在開發中到Edit - Project Settings - Editor調整 這代表預設情況下，輸入的材質會 被視為2D圖片，場景視圖也會預設為2D 這個新的2D模式會採用完全的 正視圖視角來呈現你的2D遊戲 同時也會把右上角的3D小圖示都隱藏 讓工作空間更大 除此之外，Unity 2D的工作流程 是和現有的3D流程整合在一起的 如果你已經會操作原本的Unity 那Unity 2D會很好上手 值得一提的是，你也可以混搭2D和3D共用 所以如果你想要有3D元素在你的2D遊戲裡 或2D元素在3D遊戲裡都沒有問題 現在來看看範例如何建立一個關卡 我們一開始勾勒關卡設計雛形 然後到Photoshop裡面去把每個圖層做出來 然後輸出這些圖層 成為新的Sprite類型導入Unity 為了呈現出背景的視差，我們做了一些 背景元素在Sorting Layer裡 這是一個2D工具的新功能 當所有背景指定到這一層後 我們可以在圖片著色器的圖層排序它們 調好位置之後也可以把圖層鎖定不能編輯 這樣的話我們編輯前景元素的時候 就不用擔心會不小心動到背景元素 可以從介面右上方的圖層選單來設定 由於背景只是裝飾用的，所以 並不需要在圖片上放任何元件 將它們放到一個空的物件裡 並放入一個叫做叫做 BackgroundParallax的腳本來處裡視差 更多的細節可以詳查這個已經註解的腳本 接下來製作角色活動的前景空間 我們設計了倫敦鐵橋和降落在中間的飛碟 主角處於一個敵人從天而降並到處亂竄的環境 因此，每一個前景元素都需要 碰撞體(Collider)來讓主角在上面行走 大多數環境用方體碰撞就可以 除了外型比較複雜的飛碟 Unity提供多邊形碰撞體(Polygon Collider) 可以根據圖片外型自動產生多邊形碰撞體 甚至可以調整碰撞體的外型 你可以新增、移動或刪除節點 調整到更適合行走的外型 為了排序前景元素我們建立了前景層 設定顯示在背景之前 接下來看看主角 我們的主角也是在Photoshop裡面設計的 一個四肢獨立類似卡通主角雷曼的角色 另外一個2D工具的新功能 是一個以圖表化的動畫工具 可以在Photoshop裡繪製每一節點的圖 後面我們會介紹如何用這方法 製造我們的天鵝 因為身體部位分開比較好控制動畫 因此我們希望獨立每個身體部位 所以我們將身體部位獨立切開 好讓Unity在輸入時容易拆離它們 這代表我們可以為圖片單獨製作動作 把這些部位放入建好的角色層 然後改變Z軸深度來改變前後順序 把這些圖片都放入一個有控制腳本 碰撞體、物理設定等等的物件 一旦做到這裡，就可以到動畫視窗給予圖片動作 建立待機、跑、跳、射擊和死亡的動畫 使用動畫視窗裡新的分鏡表功能 就可以簡單製作動作 我們在父物件建立一個動畫元件 然後針對每一個子物件建立影格 移動指標到想要的影格後調整角色部位 就會自動把變量錄到影格上 可隨時切換分鏡表和動畫曲線 使得它更容易調整設計 這些動作建立好之後我們可以 幫我們的角色設計控制狀態 讓我們用程式呼叫角色執行各種動作 因為不是驅動3D骨架，所以取消打勾Root Motion 也可以打勾Animate Physics如果 動畫要和物理行為相互作用 為了在場景走動，主角腳上有圓形碰撞體 和一個包覆整個身體的方形碰撞體 這樣他可以平順地行走和跳下場景 跳起來的時候頭部也可以判定撞到 為了控制角色動作，我們寫了 一個腳本透過2D物理引擎來移動 這代表在遊戲裡面可以指定主角和敵人 讓遊戲動態更豐富的物理行為 我們用PlayerControl腳本來判斷角色的輸入 我們在此指定物理移動速度 同時也把輸入的值送到動畫控制器 判定播放哪些動畫以及 順暢的播放分鏡表上圖片的轉變 使用動畫控制建立圖片動態最大的好處是 可以調整動畫速度用來搭配物理速度 不需要額外再作任何判定 FixedUpdate函式會檢查每一步物理運算 在這裡我們第一件要做的事情是 把輸入的水平值傳給動畫的速度參數 在我們的狀態設定裡 待機狀態到跑動需要速度參數大於0.1 當值成立時，動畫就會從待機切到跑步 要讓角色移動，讓它有Rigidbody2D元件 就可以為它加力道移動 同時我們也根據輸入的水平值是 大於0或小於0來處理角色面朝的方向 這是因為在Unity裡，按住左鍵會傳回-1 而按住右鍵會傳回+1 根據輸入值呼叫一個簡單的翻轉函數 來翻轉角色的X軸縮放，讓角色面向反方向 為了判定角色是否著地 我們新增了一個Ground圖層 並指定給全部可行走的前景物件 然後使用2D裡面的Linecast函數 檢查Ground圖層是否和角色的腳接觸 為了讓製作更容易，我們建立了 一個空白的物件當作檢查地面的標準點 在該物件上增加一個小圖示 我們就可以控制角色到地面的距離 就遊戲角度來看 角色在地面時只能做跳的動作 更多關於角色控制的資訊 可以查看範例腳本裡面的說明 影片稍後也會討論角色的武器 接下來看看相機如何追蹤角色 跟3D遊戲一樣，在2D遊戲裡 鏡頭運鏡也左右著遊戲體驗 要呈現經典的2D遊戲運鏡 我們參考了2D遊戲經典大作 任天堂或超任的超級瑪莉歐的鏡頭運作 在超級瑪莉歐世界裡鏡頭會水平移動 除了封閉的空間或關卡邊緣 在這兩類區域裡角色小幅移動 鏡頭不會追蹤 一旦角色移出區域 鏡頭又會開始追蹤角色 超級瑪莉歐的相機 用特定高度來進行垂直判定 但我們的遊戲沒有往上的長度 比較像動作平台，所以不需要這類設定 因此我們的相機在垂直判定 採用了和水平一樣的方法 請看看主相機裡的CameraFollow腳本 了解鏡頭追蹤更完整的寫法和註解 遊戲中有許多特效 但最重要的是主角殺死外星人的能力 主角會發射一個具有 反作用力動畫的火箭筒 這個動畫由幾個部分組成 首先檢查輸入，當按下Fire鍵時 產生一個火箭，播放音效並觸發火箭動畫播放 讓我們進一步分解這些步驟 為了可以播放其他動畫(跑步)時同時播放火箭發射 我們在動畫控制器建立了Shooting的動畫層 將Weight屬性設為1，可以 完全覆蓋基本層(Base Layer)所有的動作 我們可以從任何狀態中用程式 觸發Shoot參數發射動畫 來看看負責這工作的Gun腳本 你可以看到我們寫了驅動事件 觸發Shoot為True 觸發後會打開，在下一格重置為關 就可以重複使用，對於射擊動作最好用 除了設定動畫，我們也從腳本中發射火箭 播放音效後根據角色的方向 產生火箭並給它一個X軸的正或負速度 這個Gun腳本被放在主角身上的空物件 像這樣將腳本放到一個空物件上 可以輕易的定位火箭發射位置 我們將物件放到火箭筒發射口 然後以他自己的座標當作發射點 火箭本身有2D剛體 我們給它一個速度讓它移動 它也有火焰噴射動畫和粒子系統做的煙霧 粒子系統也接受新的Sprite圖片 所以可以將煙霧的圖片切好後加到材質 並指定到粒子系統的Texture Sheet Animation 就有煙霧特效讓粒子系統發射 當火箭命中敵人或環境時 火箭本身會引起爆炸並被摧毀 爆炸是我們製作的爆炸動畫物件 排序位置在前景的最後面 要建立這類動畫，可以從專案點選圖片 然後在屬性Sprite Mode選擇Multiple 這功能允許我們編輯圖片 手動或是自動裁切圖片大小 一旦完成裁切後 只需要點擊Apply Unity會自動產生圖片並作為子物件 這就是火箭製作過程 稍後我們將在影片中討論 殺死敵人的動畫技法 現在先讓我們回到主角 看看如何處理血條補血和扣血 血條被定義為一個浮點數(Float) 每次碰到敵人就會呼叫TakeDamage函式 為了避免觸發太快造成死亡 我們用repeatDamagePeriod來間隔觸發時間 為了讓角色顯示受傷 並容易從敵人手中逃脫 我們建立了受傷的動作 並在物理上彈飛主角 要做到這點，TakeDamage函式 會阻止角色跳躍 並從主角與敵人之間找到一個向量位置 指定一個物理力量往指定方向擊退 hurtForce是一個全域變數，可以隨時從介面調整 而不用從腳本裡調整 除了擊退主角之外，我們同時 也扣掉角色的血量並更新血條 為了呈現扣血，我們把血條的寬度縮減 用一個公式計算讓綠色轉變到紅色 透過當下的血量和總量算出一個百分比 血條是由兩個圖片組成 一個顯示血量，另一個顯示外框 這也是在Photoshop裡做的 然後輸出兩個單獨的圖片 導入圖形的時候，設定圖形軸心在左邊 所以當它按比例減少時，就會往左縮 這兩個圖片放在一個空物件底下 給予一個簡單腳本，讓它顯示在角色頭上 將血條位置設定與角色相同 並加上偏移用的全域變數 好在檢視介面進行調整 當主角血量為0時，設定碰撞體的isTrigger = true 主角就會往下跌到水上 同時將主角排序推到UI層上 主角會移到畫面最上層 UI層是我們製作的層 是用來表示像UI的前面的物件 當腳色死亡時，我們有兩個動畫 一個叫Death，會失去帽子和槍 另外一個叫Falling 用Exit Time當作動畫的切換條件 一旦Death播完就會切到Falling動畫 最後，在播放死亡動畫時 為了阻止玩家移動角色或射擊 我們會禁用PlayerControl和Gun腳本 由於Die函式是全域可以從任何地方呼叫 例如玩家掉入水中 要在主角接觸水面時重置遊戲，我們 用一個由觸發器和腳本組成的KillTrigger物件 在大多的情況下 Remover腳本移除掉入河中的敵人 並播放一個水花動畫和音效 但如果是主角被觸發器偵測到時 就會呼叫PlayerHealth腳本裡的Die函式 並禁用CameraTracking同時將角色移出螢幕 並呼叫co-routiene函數(停止2秒) 然後重生在出生點 接下來焦點轉移到角色生存 來看看它是如何生存 和我們給予它甚麼生存工具 遊戲中有兩種幫助玩家的補給箱 一種箱子是炸彈，另一種可以補血 補給箱由箱子和降落傘兩個部分組成 這兩個元素放入一個空白物件 我們就可以一起觸發動畫 我們定位這兩個圖片 降落傘的軸心位於父物件的中心 這樣動畫可以左右搖擺 讓降落傘是浮在空中的感覺 然後增加一個剛體讓它有重力往下掉 箱子增加碰撞體用來探測它的著陸時機 和玩家撿起的時機 著陸之後 播放第二段動畫讓降落傘消失 跟遊戲其他地方一樣 動畫器控制物件的狀態 我們可以看到預設的情況下 它會播放FloatDown動畫 然後當Land = True時會切換到著陸狀態 在腳本裡，我們使用onTriggerEnter函數 透過標記來檢測是否碰到地面 我們也將補給箱從父物件中分離 並給它一個剛體 它就可以和環境互動 比如降落在一個斜坡上就會斜停在坡上 接下來看看炸彈 撿起炸彈箱的動作是箱子上的 BombPickup腳本處理的 透過角色身上的LayBombs腳本 增減主角擁有的炸彈數量 LayBombs腳本負責檢查是否攜帶著炸彈 並負責產生並放置炸彈 炸彈設有定時裝置，在爆炸之前 透過BombDetonation裡的yield倒數計時 爆炸函式執行幾個動作 它會重置bombLaid參數 允許產生另外一個炸彈箱 它會通知產生器補充新的炸彈箱 並炸死範圍內的敵人 來看看最後一部分怎麼運作的 因為炸彈對敵人來說是致命的 不管他們的生命值剩下多少 我們用Physics.OverlapCircleAll方法收集 在爆炸範圍內所有標記為敵人的對象 然後為每一個敵人執行迴圈 設定他們的血量為0 從爆炸地點到敵人算出一個向量並施加外力 一旦迴圈跑完，就可以播放視覺效果 播放一段音效同時摧毀炸彈 爆炸視覺效果有兩部分 主要部份是一個簡單的圓形 短暫的出現後摧毀 第二部分是星星狀的粒子系統 重複用相同圖片呈現火箭爆炸 效率上我們保持粒子系統持續在場景中 需要時我們用程式移動到指定位置播放 這樣可以讓粒子系統存在記憶體裡 使遊戲比較有效率 這麼做主要是因為這個範例 同時只會有一個爆炸在場景中 因為玩家只能一次丟一個炸彈 這就是為什麼將粒子系統保持在場景中 並重複播放的原因，比起建立後移除有效率 但如果是火箭爆炸，因為可以重複發射 因此需要建立後移除 讓我們看看主角殺死敵人 怎麼計算分數 這分為兩個部分，動畫顯示獲得100分 以及增加UI的分數計算 分數動畫由1和0兩個數字組成 將它們放到場景中的空白物件 給予一個簡單的得分動畫 並用程式讓它們在動畫完成後消失 我們放置摧毀腳本在動畫事件尾端 ScoreUI單純是個GUI文字元件 帶有管理玩家分數的腳本 Score是全域變數，代表隨時可以 檢查當敵人被殺死時增加100分 說到敵人，讓我們仔細看看他們 在我們的遊戲裡，有兩種類型外星敵人 一種是綠皮膚的鼻涕蟲 另一種是會搭著飛船保護自己 的智慧型外星怪物 這些角色會共用一種腳本 因為他們行為相似 我們可以檢視它們的全域變數 並設定不同的移動速度和生命 每個敵人都有自己的移動動畫 鼻涕蟲有一個可以活動的尾巴 飛船內的敵人會前後搖擺移動 對鼻涕蟲來說，我們匯入圖形 並把尾巴切為獨立圖形 這樣我們就可以單獨縮放它 不會影響到整個圖片 軸心設定到右邊 我們可以漂亮的伸展收縮尾巴 上下移動眼瞼 然後使用Z軸來排序 眼睛就會在眼瞼底下了 就可以製作眨眼動畫 第二個外星人的動畫要簡單的多 我們只需要前後轉動它 關於這些敵人的移動技術 我們透過改變剛體的速率來移動它們 當它們遇到一個牆壁這樣的障礙物時 會呼叫Physics.OverlapPoint函式來檢測 檢查是否有重疊到像是 牆壁和兩邊的塔被標記的障礙物 當函式偵測到時，就會呼叫Flip函式 函式會翻轉敵人的X軸縮放 讓它轉到不同方向 要殺死敵人，當敵人和火箭相撞時 在撞擊時會呼叫Hurt函式 這個函式我們從敵人身上扣1點血 並持續呼叫函式保持敵人持續扣血 如果血條降到0，就會呼叫死亡函式 當他們死後，就會執行一些函式 會先停用所有的圖形渲染 因為2D角色大多都有動畫 這是為了把動畫物件換成單張死亡圖片 我們在圖形渲染器將圖片改為deadEnemy 然後我們幫Score全域變數增加100 然後增加扭轉讓他們死亡時扭曲 因此我們要讓這些敵人死後 掉入環境的河中 我們找到物件上所有碰撞體 並設定IsTrigger = True 這樣他們就會穿過所有環境往下掉 然後播放死亡音效之後展示一個分數動畫 要將已死亡的敵人從場景中移除 我們使用killTregger物件 和前面所說的一樣 當任何角色接觸它時 將會引起一個水花動畫，並移除該物件 它們撞擊水面並播放 一段附在水花動畫的音效 所以當我們產生水花動畫時 同時也聽到音效 要完成遊戲關卡 我們也用一些移動背景來裝飾 為了讓遊戲環境更顯動態 我們添加了一些飛翔的天鵝 以及沿著河岸開的公車和計程車 首先是天鵝，它是在Photoshop裡面畫好後 用Multiple Sprite導入圖片 Unity會自動裁切天鵝的每個圖片 分為不同的圖導入 並把原圖當作父物件放在底下 因為這是個動畫組合，可以將所有的圖片 一起拖到場景中，讓Unity幫我們生成動畫 瞧，天鵝的動畫已經準備好了 然後給天鵝一個剛體 讓我們可以控制速度飛過螢幕 和公車和計程車一樣，天鵝已被存為預製物件 公車和計程車作法只需要 在匯入圖形時分開車身和車輪 並製作一個簡單的擺動動畫 相同指定2D剛體到車子上 就能夠驅動他們在螢幕上跑 公車、計程車和天鵝這三個物件 我們用一個重複執行的腳本來製造它們 BackgroundPropsSpawner腳本 同時也處理出生位置，出生頻率並給予速度 代表我們可以用這個腳本應用在三種對象 預設出生點和屬性 要了解更多的細節，可以查看腳本中的說明 最後，要了解更多的背景動態 我們使用了移動的雲朵、流動的河水和煙霧 我們在空白物件下放兩個背景圖片 並使這些圖片緩慢飛過螢幕 因為這是個無限循環 所以動畫永遠不會停 這就是我們遊戲的製作過程 我們希望這個教學讓你 對如何用Unity開發2D遊戲有一定了解 未來我們也會製作更簡單的教學 也期待你們對於Unity4.3的反應 迫不及待想看看你們的2D產品 謝謝觀看