-
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產品
-
謝謝觀看
