如果用以前版本的Unity做2D遊戲,雖然能做,但是要費很多周折.
比如你可以將一張紋理賦予一個”面片”網格,然後用指令碼控制它的動畫調整它的位移.如果你要使用物理引擎,那麼還要將這個Obeject處理3D的,所以你還要確保你的Object要有足夠的深度以確保他們在其它軸向上不起衝突.或者你選用一個第三方外掛,如2D Toolkit或者Orthello 2D Framework,他們有著強大的功能,但同樣需要你去做一些約束工作.
當上面這些你仍然可以選用上面這些方法的時候,Unity4.3增加了原生的2D開發環境,讓我們一探究竟吧.

這個教程將帶你探索Unity的2D工具,教程將引導你做一個主題為殭屍的iOS遊戲.教程重點在於一個新的資源型別-“Sprite”,你將學到所有關於Sprite知識,在後續的教程裡你將學會如何通過Unity的動畫系統控制動畫,以及用到Untiy的2D物理引擎的支援.

上面是個教程概述,下面讓我們一步一步來吧.

注:本教程假定你有一些Unity的使用經驗,知道一些基本知識,瞭解Unity的介面,遊戲物件和元件等操作,比如你知道”要新增一個”貓”到場景裡需要從Project拽到Hierarchy裡”.
如果你看不懂上面這個,那麼你需要一個教程入門再來看現在這個2D教程.

最後要注意,本教程是在OS X系統下操作的,然而如果你在Windows下也不用擔心,Unity在Windows上和OS X下大多數指令都是一樣的,會有一些小的差異(如使用Windows資源管理器取代Finder),或者乾脆直接用OS X 系統.

開始:

Unity在4.3中加入了原生的2D工具(專業版和免費版都帶),所以你要確保你安裝的最新版,可以從官網下載到.

注:你可以在其他遊戲裡使用或修改本教程裡提供的美術資源,音樂和音效,但是你必須在遊戲中包含一下資訊:”Artwork/sounds: from iOS Games by Tutorials book, available at http://www.raywenderlich.com”.

建立你的專案

開啟Unity並選擇”File\New Project…”建立一個新的專案,在”Create new Project”裡點選”Set…”標籤,給新專案命名為”ZombieConga”,選擇一個儲存的位置點”Save”.

然後在”Set up defaults for” 選擇”2D”,再點選”Create Project”:

上面這個對話方塊是Unity中遇到的第一個含有2D特性的設定.你可以隨時改變這個2D設定,如果你想更改這個設定,可以選擇”Edit\Project Settings\Editor”開啟編輯器設定,在”Default Behavior Mode”中改模式為2D,如下圖:

“Default Behavior Mode”(預設行為模式)定義你專案在匯入Assets時的預設匯入設定,當設定為3D模式時,Unity假設你將匯入的檔案建立為紋理型別(如:PNG檔案);當設定為2D時,Unity假定你想要的匯入的資源為Sprite型別,你將在教程裡學到關於Sprite資源匯入設定具體的解釋.

場景檢視的2D模式

下一個2D特徵就是在場景視圖裡有個控制二維切換的按鈕,點選2D按鈕可以啟用2D模式,像下面這樣:

這個按鈕會將場景相機在透視檢視和正交投影檢視之間進行切換.它們有什麼差別呢?當觀察透視檢視時,遠離相機的物體看起來更小,就像在現實世界中眼睛看物體一樣,然而當正交投影檢視的時候,物體的大小並不受與相機的距離影響.因此,在二維模式時,一個物件不管位置離相機遠近,只要尺寸不變,它看起來將沒有變化的.

下面的配圖可以清晰的看到2D和3D模式視窗的區別.

上一個圖片也能看到當2D模式啟用時,場景檢視的Gizmo控制也是隱藏的,你只能做檢視的平移操作,Y軸指向上,X軸指向右.

重要:這個設定是不會影響到遊戲播放時效果的,因為它只是幫助你組織場景裡的物件,甚至後期你會在建立2D遊戲的同時創造3D遊戲,你可能需要在這兩種模式間根據需要切換,本教程所有截圖都是在場景檢視的2D模式下.

為了更好的跟著教程學習,你可以調整Unity的佈局和教程截圖的的介面佈局一致,教程裡Unity是用”Dark”面板運行於OS X系統下,Dark面板只在Unity Pro版本才能啟用.我建立了8個開啟的tab,調整他們如下面的樣子,

如圖你可以看到,左上角由Scene,Console和Animator檢視組成,而Game,Project和Animation檢視在左下角組合為一個選項卡,右邊兩列是Hierarchy和Inspector檢視.
當然有時候我也會改變這種設定,檢視的佈局沒有一個固定的要求,可以由自己心情隨意安排自己的工作佈局.

輕鬆製造精靈(Sprites)

用Unity新功能來建立一個精靈有多容易?試試下面的方法.
第一步:拽從Finder視窗拽cat.png檔案到Scene檢視,如下圖:

第二步:空閒時寫給Unity的開發者寫封感謝信,哈哈.

如果沒有建立成功精靈,從第一步開始重試一次.

注:想知道為什麼上面動畫有兩個貓的圖片?別擔心,我後面會告訴你.

如此簡化的匯入依靠Unity預設匯入設定,雖然這常常不是最終需要的正確效果,但足以說明Unity的新功能將使2D遊戲開發異常簡單!本教程後面涵蓋了所有你使用Unity 2D開發遊戲需要了解的知識.

Sprite 資源

在Hierarchy視圖裡選擇cat,然後看Inspector.你的Inspector檢視位置可能和下圖不太一樣,但不必擔心這不重要,這裡要注意的是為了讓cat在場景中顯示,Unity附加了一個Sprite Renderer元件到GameObject.

Unity會為這個物體建立網格,Unity會基於影象的非透明部分建立網格,下圖裡的殭屍的藍色網格就是:

通過這樣建立的紋理網格,可以有助於Unity提高場景執行時的fill rate,也使得建立多邊形碰撞盒更容易,教程後面將介紹如何建立使用碰撞盒.

注意:別讓殭屍突然出現驚嚇到你,我只是覺得它比可愛的小貓更有趣.

在本節教程中你將瞭解Sprite的渲染器元件屬性,可以看到Sprite的名稱.下圖裡你可以看到”cat”物件在精靈渲染器裡被分配的名字是”cat”.

確保Project檢視是可見的,在Inspector視圖裡惦記Sprite編輯框能看到Sprite資源將在Project視圖裡呈現高亮狀態,如下圖:

Project檢視中cat精靈高亮

注:高亮邊框會在幾秒後消失,所以如果你不小心錯過它,可以再次點選一次Sprite編輯框.當然現在專案裡只有一個資源,你不可能錯過它.:]

正如上一個截圖你所看到的,Unity會在Project視圖裡高亮顯示cat項,還有另外一個也叫cat的子項.兩隻貓都在Project視圖裡,很容易混淆啊,這是怎麼回事呢:

父級的cat是紋理資源.它將關聯到你匯入的原始美術資原始檔cat.png,以及控制著如何從這個紋理資源建立Sprites,你可以看到它有個檔案內容的縮圖.

子集的cat是Unity匯入cat.png時建立的Sprite資源.現在只有一個子項,因為Unity只從檔案裡建立了一個Sprite,教程後面將教你建立”slicing sprite”,即從一個圖片創建出多個Sprites.

注:Unity渲染Sprite物件實際上是由一個Texture2D生成的,影象資訊實際是儲存於圖片檔案中,你也可以動態的建立自己需要的Texture2D物件來執行時生成Sprite,這個進階的知識本教程就先不講了.

比如cat.png,你可以從Finder中拽一個圖片到Scene檢視(或者Hierarchy檢視,隨你自己)中建立Sprites.但是更常見的是先新增資源到Project裡在新增它到場景中.

將下載到的檔案新增到專案裡:background.png, enemy.png, 和 zombie.png.Unity提供了五種方法讓你將資源匯入專案中:
從Finder視窗拖拽檔案到Project檢視.
到”Assets\Import New Asset…”選單,選擇檔案並點選Import.
在Project檢視中右鍵選擇”Assets\Import New Asset…”選單,選擇檔案並點選Import.
在你的系統中直接新增檔案或者建立子目錄到專案的Assets目錄,Unity會自動重新整理顯示最新的資源內容.不過要注意,一定不要直接從檔案系統裡刪除不用的資源,要總是從Unity編輯器內部刪除資源,因為Unity會儲存有關專案的資源metadate,直接從檔案系統修改刪除可能損壞專案結構.

當然你也可以直接將檔案Hierarchy或者Scene檢視,不過這樣做是直接在當前場景中建立一個GameObject.

從Project視圖裡拖拽enemy到Hierachy檢視.和cat一樣,同樣會有兩個名字為enemy項出現在Project檢視中,當現在這樣只有一個子精靈的時候,你選擇拖拽哪個enemy到Hierarchy檢視都是一樣的.
在Hierarchy視圖裡選擇enemy,設定Transform元件的位置為(2,0,0),如下圖:

enemy的初始位置.

現在場景視圖裡顯得有點亂,在Hierachy視圖裡選擇cat並設定它的位置為(0,2,0),如下圖:

你的場景現在會像下圖這樣:

cat和enemy在Scene檢視

最後,從Project檢視拖拽background到Hierachy視圖裡,並設定位置為(0,0,0),如下圖:

你可以稍晚些調整背景影象的質量,所以現在不用擔心它現在不正確的樣子.(提示:Unity預設設定在匯入background.png時是不正確的(,Scene檢視現在會是這樣子:

只顯示背景的場景檢視

現在看不到cat和歐巴桑沒關係,它們只是被背景暫時擋住了.可以很容易的調整出來,在調整他們層次之前,我們需要切一具屍體,嘿嘿,一具corpse Sprites,像這樣:

切片精靈表(Slicing Sprite Sheets)

已經匯入zombie.png到專案了,你會發現這個檔案和其它檔案不同,它包含了好多個影象,如下圖:

這種檔案通常被稱為精靈表(sprite sheet),我們將為表裡的每個影象建立單獨的Sprite.在Project視圖裡展開zombie,能看到像下面截圖這樣,Unity建立了一個包含所有影象的Sprite.這不是我們想要的.

Unity提供了一個非常簡單的解決方案,可以來處理這個需求,在Porject檢視選擇zombie的頂層級後會看到Inspector中顯示了它的Import Settings,設定Sprite模式到Multiple並點選Apply:

選擇這個選項後在Sprite編輯器中會出現一個新的按鈕,並且還移除了Pivot屬性,因為每個Sprite都將定義自己的軸點.

不知道什麼是曲軸點(Pivot points)?Sprite Pivot定義了精靈在區域性座標系中的原點,例如,Sprite的樞軸點在精靈的中心或者左上方,縮放它或者旋轉它時,精靈將圍繞這個原點進行變換.

你可以通過Pivot組合框來指定精靈的樞軸點,我們來看自定義樞軸編輯器(Custom pivot editor).

軸的X和Y的值是0~1,所以0.5的時候是中央,但是你可以用小於0的值或大於1的值來設定樞軸在精靈範圍外.

在Project檢視(如下圖)裡,zombie紋理資源圖示右側沒有小箭頭,也就是說它不包含任何子物體.

在這種狀態下zombie紋理是不可用的,如果你嘗試將它拖到Hierarchy的時候,Unity會提示它不包含精靈.這是因為我們還需要告訴Unity怎麼切分使用這個精靈表.在Project檢視中選擇zombie,並在Inspector中點選精靈編輯器(Sprite Editor)開啟如下視窗:

精靈編輯器允許定義包含的影象怎麼樣來做為一個精靈.單擊視窗左上方來開始定義精靈,如下圖:

精靈編輯器的slice按鈕

Unity能根據圖片自動找到精靈,同樣你也可以調整它自動處理的結果.這裡我們用它預設設定,點選Slice按鈕.

預設切片選項

Unity是基於貼圖的透明度來確定精靈切分範圍的.你可以看到它找到的精靈都會有一個線框表示.現在,我們看到Unity找到了4個精靈:

常規來講當圖片佈置的很好(帶有明確的空白分割空間)時Unity的自動切割效果是最好的,像下圖Unity只找到了笑臉精靈,其他精靈它並沒有自動識別出來:

錯過的精靈

因為兩個Box重疊相交所以Unity不能找到所有精靈.

Unity能找到三個精靈,因為每個精靈都有明顯的邊界間隙.

所以我們要細緻的安排精靈表中的影象.在編輯器中點選Unity自動識別的任意一個精靈都將顯示精靈詳情視窗,包含其名稱,位置,邊界和中心點,如下圖:

我們可以改變這裡的值,也可以直接在影象中調整範圍和中心點位置.
通常,做了更改後,要點選應用(Appley)或者還原(Revert)按鈕來儲存或者放棄做的修改.

仔細觀察你會發現,zombie.png的圖片是安排在四個同樣大小的舉行中,針對於這種精靈表Unity有個單獨的選項來處理它.
在Sprite Editor的左上角單擊Slice再次開啟切片設定視窗,這次選擇型別為Grid,切片設定將如下圖:

Pixel size欄位允許指定網格單元格的大小.X定義每個單元格的寬度,Y為高度.Unity會用這些值從影象的左上角來等分影象.

我們將X設定為157,Y設定為102,如下圖:

切片網格大小設定.

點選Slice按鈕,Unity會找到下面四個精靈:

在切片網格中的zombie精靈.

這時你仍然可以單獨選擇網格中的精靈來微調單個精靈的設定,不過一般情況下是沒必要的.

在精靈編輯器左上角點選應用(Apply)提交更改.Unity會更新專案資源,你可以在Project視圖裡看到zombie會包含子精靈,名字分別是zombie_0, zombie_1等等,如下圖:

現在你掌握了兩種設定精靈的方式,這兩種方式要活學活用,同樣可以用於背景的製作.

通過選擇”GameObject\CreateEmpty”選單我們來建立一個空GameObject,命名為zombie並設定位置為(-2,0,0)如下圖:

空zombie GameObject

在Hierarchy檢視中選擇zombie並用”Add Component”新增一個Sprite Renderer元件.如下圖:

點選精靈渲染器元件右邊的小圓圈開啟精靈渲染器的精靈選項卡,如下圖:

在出現的對話方塊中包含兩個標籤,Assets及Scene.這裡將顯示你專案所有精靈資源和場景中的精靈資源.

選擇Assets選項卡並選擇zombie_0到精靈渲染器,如下圖:

在場景檢視中你能看到海灘上有個悠閒的殭屍,還有一個老婦人和貓在它下方,美極了.

現在所有必要的精靈都在場景裡了,我們來配置遊戲檢視.

配置遊戲檢視

Zombie Conga這個遊戲是為iPhone建立的,所以我們要將遊戲檢視尺寸設定為1136 x 640大小.

用Game檢視左上角的下拉選單來改變縱橫比或固定解析度,如下圖:

依據編輯器目前Playersetting的不同設定,這個下拉選單也將有不同的選項,如果裡面有1136 x 640這個解析度項,直接選擇它就可以了.如果沒有,我們可以單擊下面的加號按鈕,如圖:

遊戲檢視尺寸選項

建立一個新的固定解析度尺寸設定寬高為1136 和 640,如下圖:

新遊戲檢視尺寸

點選確定,然後同樣在下拉選單中選擇你設定的新解析度.

注:你的檢視可能和截圖不太一樣,因為Unity會根據螢幕空間來依照所選縱橫比來調整遊戲檢視的大小.不管它多大的視窗,你都應該在視圖裡看到和截圖一樣的場景影象.

顯然,現在這個樣子是錯誤的,現在這裡有三個不同的問題,我們需要依次糾正它們:
場景檢視的Camera設定不正確,背景不能完全填充到檢視中.
場景中游戲物件的渲染順序不正確,所以cat和enemy都埋在了沙土裡.
影象效果不太好,這個基於現在的相機設定你有可能還看不出來,但是相信我說的,質量不好就是不好,對不對?