目 錄

1. 開始:
2. 創(chuàng)建你的項目
3. 場景視圖的2D模式
4. 輕松制造精靈(Sprites)
5. Sprite 資源
6. 切片精靈表(Slicing Sprite Sheets)
7. 配置游戲視圖
8. 精靈動畫(Animating Sprites)
9. 精靈封裝(Sprite Packing)-僅針對專業(yè)人員.
10. Sprite Packer的選項和問題

原文:http://www./61532/unity-2d-tutorial-getting-started,
作者:Christopher LaPollo,
由Xiaoke翻譯,
轉(zhuǎn)載請注明來自http://www.

如果用以前版本的Unity做2D游戲，雖然能做，但是要費很多周折。

比如你可以將一張紋理賦予一個”面片”網(wǎng)格,然后用腳本控制它的動畫調(diào)整它的位移.如果你要使用物理引擎,那么還要將這個Obeject處理3D的,所以你還要確保你的Object要有足夠的深度以確保他們在其它軸向上不起沖突.或者你選用一個第三方插件,如2D Toolkit或者Orthello 2D Framework,他們有著強大的功能,但同樣需要你去做一些約束工作。

當上面這些你仍然可以選用上面這些方法的時候,Unity4.3增加了原生的2D開發(fā)環(huán)境,讓我們一探究竟吧。

這個教程將帶你探索Unity的2D工具,教程將引導(dǎo)你做一個主題為僵尸的iOS游戲。教程重點在于一個新的資源類型-”Sprite”,你將學(xué)到所有關(guān)于Sprite知識,在后續(xù)的教程里你將學(xué)會如何通過Unity的動畫系統(tǒng)控制動畫,以及用到Untiy的2D物理引擎的支持。

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

注:本教程假定你有一些Unity的使用經(jīng)驗,知道一些基本知識,了解Unity的界面,游戲?qū)ο蠛徒M件等操作,比如你知道”要添加一個”貓”到場景里需要從Project拽到Hierarchy里”。

如果你看不懂上面這個,那么你需要一個教程入門再來看現(xiàn)在這個2D教程。

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

開始:

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

你還需要一些美術(shù)資源為這個2D游戲,幸運的是Mike Berg(http:///)已經(jīng)做了一些很酷的圖片資源,可以從這里下載解壓使用:http://cdn4./wp-content/uploads/2013/12/ZombieConga-Part1-Resources.zip

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

創(chuàng)建你的項目

打開Unity并選擇”File\New Project…”創(chuàng)建一個新的項目,在”Create new Project”里點擊”Set…”標簽,給新項目命名為”ZombieConga”,選擇一個存儲的位置點”Save”。

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

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

“Default Behavior Mode”(默認行為模式)定義你項目在導(dǎo)入Assets時的默認導(dǎo)入設(shè)置,當設(shè)置為3D模式時,Unity假設(shè)你將導(dǎo)入的文件創(chuàng)建為紋理類型(如:PNG文件);當設(shè)置為2D時,Unity假定你想要的導(dǎo)入的資源為Sprite類型,你將在教程里學(xué)到關(guān)于Sprite資源導(dǎo)入設(shè)置具體的解釋.

場景視圖的2D模式

下一個2D特征就是在場景視圖里有個控制二維切換的按鈕,點擊2D按鈕可以激活2D模式,像下面這樣:

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

下面的配圖可以清晰的看到2D和3D模式視窗的區(qū)別。

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

重要:這個設(shè)置是不會影響到游戲播放時效果的,因為它只是幫助你組織場景里的對象,甚至后期你會在創(chuàng)建2D游戲的同時創(chuàng)造3D游戲,你可能需要在這兩種模式間根據(jù)需要切換,本教程所有截圖都是在場景視圖的2D模式下。

為了更好的跟著教程學(xué)習(xí),你可以調(diào)整Unity的布局和教程截圖的的界面布局一致,教程里Unity是用”Dark”皮膚運行于OS X系統(tǒng)下,Dark皮膚只在Unity Pro版本才能啟用.我創(chuàng)建了8個打開的tab,調(diào)整他們?nèi)缦旅娴臉幼?

如圖你可以看到,左上角由Scene,Console和Animator視圖組成,而Game,Project和Animation視圖在左下角組合為一個選項卡,右邊兩列是Hierarchy和Inspector視圖。

當然有時候我也會改變這種設(shè)置,視圖的布局沒有一個固定的要求,可以由自己心情隨意安排自己的工作布局。

輕松制造精靈(Sprites)

用Unity新功能來創(chuàng)建一個精靈有多容易?試試下面的方法。

第一步:拽從Finder窗口拽cat.png文件到Scene視圖,如下圖:

第二步:空閑時寫給Unity的開發(fā)者寫封感謝信,哈哈.

如果沒有創(chuàng)建成功精靈,從第一步開始重試一次。

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

如此簡化的導(dǎo)入依靠Unity默認導(dǎo)入設(shè)置,雖然這常常不是最終需要的正確效果,但足以說明Unity的新功能將使2D游戲開發(fā)異常簡單!本教程后面涵蓋了所有你使用Unity 2D開發(fā)游戲需要了解的知識.

Sprite 資源

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

Unity會為這個物體創(chuàng)建網(wǎng)格,Unity會基于圖像的非透明部分創(chuàng)建網(wǎng)格,下圖里的僵尸的藍色網(wǎng)格就是:

通過這樣創(chuàng)建的紋理網(wǎng)格,可以有助于Unity提高場景運行時的fill rate,也使得創(chuàng)建多邊形碰撞盒更容易,教程后面將介紹如何創(chuàng)建使用碰撞盒.

注意:別讓僵尸突然出現(xiàn)驚嚇到你,我只是覺得它比可愛的小貓更有趣.

在本節(jié)教程中你將了解Sprite的渲染器組件屬性,可以看到Sprite的名稱.下圖里你可以看到”cat”對象在精靈渲染器里被分配的名字是”cat”.

確保Project視圖是可見的,在Inspector視圖里惦記Sprite編輯框能看到Sprite資源將在Project視圖里呈現(xiàn)高亮狀態(tài),如下圖:

Project視圖中cat精靈高亮

注:高亮邊框會在幾秒后消失,所以如果你不小心錯過它,可以再次點擊一次Sprite編輯框.當然現(xiàn)在項目里只有一個資源,你不可能錯過它.:]

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

父級的cat是紋理資源.它將關(guān)聯(lián)到你導(dǎo)入的原始美術(shù)資源文件cat.png,以及控制著如何從這個紋理資源創(chuàng)建Sprites,你可以看到它有個文件內(nèi)容的縮略圖.

子集的cat是Unity導(dǎo)入cat.png時創(chuàng)建的Sprite資源.現(xiàn)在只有一個子項,因為Unity只從文件里創(chuàng)建了一個Sprite,教程后面將教你創(chuàng)建”slicing sprite”,即從一個圖片創(chuàng)建出多個Sprites.

注:Unity渲染Sprite對象實際上是由一個Texture2D生成的,圖像信息實際是存儲于圖片文件中,你也可以動態(tài)的創(chuàng)建自己需要的Texture2D對象來運行時生成Sprite,這個進階的知識本教程就先不講了.

比如cat.png,你可以從Finder中拽一個圖片到Scene視圖(或者Hierarchy視圖,隨你自己)中創(chuàng)建Sprites.但是更常見的是先添加資源到Project里在添加它到場景中.

將下載到的文件添加到項目里:background.png, enemy.png, 和 zombie.png.Unity提供了五種方法讓你將資源導(dǎo)入項目中:
從Finder窗口拖拽文件到Project視圖.
到”Assets\Import New Asset…”菜單,選擇文件并點擊Import.
在Project視圖中右鍵選擇”Assets\Import New Asset…”菜單,選擇文件并點擊Import.
在你的系統(tǒng)中直接添加文件或者創(chuàng)建子目錄到項目的Assets目錄,Unity會自動刷新顯示最新的資源內(nèi)容.不過要注意,一定不要直接從文件系統(tǒng)里刪除不用的資源,要總是從Unity編輯器內(nèi)部刪除資源,因為Unity會存儲有關(guān)項目的資源metadate,直接從文件系統(tǒng)修改刪除可能損壞項目結(jié)構(gòu).

當然你也可以直接將文件Hierarchy或者Scene視圖,不過這樣做是直接在當前場景中創(chuàng)建一個GameObject.

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

enemy的初始位置.

現(xiàn)在場景視圖里顯得有點亂,在Hierachy視圖里選擇cat并設(shè)置它的位置為(0,2,0),如下圖:

你的場景現(xiàn)在會像下圖這樣:

cat和enemy在Scene視圖

最后,從Project視圖拖拽background到Hierachy視圖里,并設(shè)置位置為(0,0,0),如下圖:

你可以稍晚些調(diào)整背景圖像的質(zhì)量,所以現(xiàn)在不用擔心它現(xiàn)在不正確的樣子.(提示:Unity默認設(shè)置在導(dǎo)入background.png時是不正確的(,Scene視圖現(xiàn)在會是這樣子:

只顯示背景的場景視圖

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

切片精靈表(Slicing Sprite Sheets)

已經(jīng)導(dǎo)入zombie.png到項目了,你會發(fā)現(xiàn)這個文件和其它文件不同,它包含了好多個圖像,如下圖:

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

Unity提供了一個非常簡單的解決方案,可以來處理這個需求,在Porject視圖選擇zombie的頂層級后會看到Inspector中顯示了它的Import Settings,設(shè)置Sprite模式到Multiple并點擊Apply:

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

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

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

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

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

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

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

精靈編輯器的slice按鈕

Unity能根據(jù)圖片自動找到精靈,同樣你也可以調(diào)整它自動處理的結(jié)果.這里我們用它默認設(shè)置,點擊Slice按鈕.

默認切片選項

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

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

錯過的精靈

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

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

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

我們可以改變這里的值,也可以直接在圖像中調(diào)整范圍和中心點位置.
通常,做了更改后,要點擊應(yīng)用(Appley)或者還原(Revert)按鈕來保存或者放棄做的修改.

仔細觀察你會發(fā)現(xiàn),zombie.png的圖片是安排在四個同樣大小的舉行中,針對于這種精靈表Unity有個單獨的選項來處理它.
在Sprite Editor的左上角單擊Slice再次打開切片設(shè)置窗口,這次選擇類型為Grid,切片設(shè)置將如下圖:

Pixel size字段允許指定網(wǎng)格單元格的大小.X定義每個單元格的寬度,Y為高度.Unity會用這些值從圖像的左上角來等分圖像.

我們將X設(shè)定為157,Y設(shè)定為102,如下圖:

切片網(wǎng)格大小設(shè)置.

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

在切片網(wǎng)格中的zombie精靈.

這時你仍然可以單獨選擇網(wǎng)格中的精靈來微調(diào)單個精靈的設(shè)置,不過一般情況下是沒必要的.

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

現(xiàn)在你掌握了兩種設(shè)置精靈的方式,這兩種方式要活學(xué)活用,同樣可以用于背景的制作.

通過選擇”GameObject\CreateEmpty”菜單我們來創(chuàng)建一個空GameObject,命名為zombie并設(shè)置位置為(-2,0,0)如下圖:

空zombie GameObject

在Hierarchy視圖中選擇zombie并用”Add Component”添加一個Sprite Renderer組件.如下圖:

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

在出現(xiàn)的對話框中包含兩個標簽,Assets及Scene.這里將顯示你項目所有精靈資源和場景中的精靈資源.

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

在場景視圖中你能看到海灘上有個悠閑的僵尸,還有一個老婦人和貓在它下方,美極了.

現(xiàn)在所有必要的精靈都在場景里了,我們來配置游戲視圖.

配置游戲視圖

Zombie Conga這個游戲是為iPhone創(chuàng)建的,所以我們要將游戲視圖尺寸設(shè)定為1136 x 640大小.

用Game視圖左上角的下拉菜單來改變縱橫比或固定分辨率,如下圖:

依據(jù)編輯器目前Playersetting的不同設(shè)置,這個下拉菜單也將有不同的選項,如果里面有1136 x 640這個分辨率項,直接選擇它就可以了.如果沒有,我們可以單擊下面的加號按鈕,如圖:

游戲視圖尺寸選項

創(chuàng)建一個新的固定分辨率尺寸設(shè)定寬高為1136 和 640,如下圖:

新游戲視圖尺寸

點擊確定,然后同樣在下拉菜單中選擇你設(shè)定的新分辨率.

注:你的視圖可能和截圖不太一樣,因為Unity會根據(jù)屏幕空間來依照所選縱橫比來調(diào)整游戲視圖的大小.不管它多大的窗口,你都應(yīng)該在視圖里看到和截圖一樣的場景圖像.

顯然,現(xiàn)在這個樣子是錯誤的,現(xiàn)在這里有三個不同的問題,我們需要依次糾正它們:
場景視圖的Camera設(shè)置不正確,背景不能完全填充到視圖中.
場景中游戲?qū)ο蟮匿秩卷樞虿徽_,所以cat和enemy都埋在了沙土里.
圖像效果不太好,這個基于現(xiàn)在的相機設(shè)置你有可能還看不出來,但是相信我說的,質(zhì)量不好就是不好,對不對? :)

首先我們來修正Camera.

修正相機Projection

在2D游戲中,通常希望相機使用正交視圖而不是透視圖.本教程的前面我們已經(jīng)提到Unity默認是使用透視視圖的相機.我們在Hierarchy視圖中選擇”Main Camera”,在相機組件中,將投影設(shè)置為正交投影.并調(diào)整調(diào)整它Transform組件里的Position為(0,0,-10).如下圖:

你的Game視圖現(xiàn)在像下圖:

現(xiàn)在效果看上去與透視投影沒什么區(qū)別,精靈不受距離相機的遠近影響,那怎么放大背景使其充滿屏幕呢?我們推薦改變Camera的Size屬性.

Camera的Size定義了視圖的尺寸.它的值是從視圖中心到視圖頂部的距離.換句話說這個值等于視圖一半高度.視圖的寬度基于視圖的長寬比計算,如下圖:

在本例中,我們需要將背景圖片從上到下完全占滿整個屏幕,并允許其水平滾動.背景圖像的高度是640px,我們?nèi)∫话?即320px.不過這并不是完全正確的.
在Project視圖里選擇background的父級查看Import Settings.
在精靈渲染器(Sprite Renderer)的”像素到單位(Pixels to Units)”默認值是100,如下圖:

在Unity中,”單位(Units)”并不一定對應(yīng)到屏幕上的像素.通常物體的大小都是相對于彼此的,可以假設(shè)單位為任何計量單位,如1 unit=1米.對于精靈,Unity以像素為單位來確定大小.

例如,準備將一個500px寬度的圖像導(dǎo)成精靈.下表顯示了將它用不同的”Pixels to Units”時所呈現(xiàn)出的精靈在X軸向上的差別.

不同”像素到單位(Pixels to Units)”的對比圖.

background.png為640高,background精靈的”像素到單位(Pixels to Units)”比例為100,所以在Hierarchy視圖中它將呈現(xiàn)為6.4個units高.正交相機的Size屬性值是屏幕高度的一半,所以我們要設(shè)置相機尺寸(Size)為3.2個單位,如下圖:

現(xiàn)在背景已經(jīng)正確的充滿了Game視圖中,如下圖:

正確的相機設(shè)置下的Game視圖

現(xiàn)在背景圖像顯示正常了,你就可以看到圖像質(zhì)量的問題了.下面兩張圖片是圖片對比:

當前設(shè)置的海灘

改變紋理設(shè)置后的海灘

上面這個問題是由于背景紋理在導(dǎo)入時壓縮導(dǎo)致.我們可以通過改變導(dǎo)入設(shè)置修正它.

糾正導(dǎo)入設(shè)置

在Project視圖選擇background的父級再次顯示導(dǎo)入設(shè)置(Import Settings),這次我們看底部的預(yù)覽圖.
這個預(yù)覽窗口將顯示紋理的尺寸,顏色信息和內(nèi)存使用情況.正如下面截圖中所看到的當前紋理大小為1024×320像素,但background.png實際為2048×640像素,這就意味著Unity縮小了50%以適應(yīng)1024×1024紋理尺寸.

背景紋理默認設(shè)置預(yù)覽

為了解決這個質(zhì)量問題,在導(dǎo)入設(shè)置的底部選擇如圖所示的最大尺寸和格式設(shè)置:

導(dǎo)入設(shè)置默認選項卡

最大尺寸(Max Size)定義生成紋理所允許的最大尺寸,它是一個正方形,默認為1024px.同時圖像深度默認為壓縮的(Compressed).

我們可以為不同目標平臺設(shè)置不同的值(例如iOS,網(wǎng)上及Android上),但本例中我們只處理默認(Default)選項卡.

在默認(Default)選項卡中,改最大尺寸(Max Size)到2040和點擊應(yīng)用(Apply)按鈕.導(dǎo)入設(shè)置現(xiàn)在應(yīng)該是這樣的:

馬上你就會看到無論是場景視圖還是游戲視圖,畫質(zhì)都很好.這是因為背景圖像用了較少的壓縮.下圖顯示了Game視圖:

用了正確設(shè)置的游戲視圖

在Inspector預(yù)覽圖中我們能看到背景紋理現(xiàn)在占用0.6MB內(nèi)存,遠高于之前的160KB:

增大紋理尺寸導(dǎo)致紋理內(nèi)存占用增加了4倍(預(yù)覽圖的數(shù)字是四舍五入的).
對于一些紋理,我們可能需要單獨調(diào)整Format值以提高需要的色彩質(zhì)量,但是這會進一步增大內(nèi)存占用.例如,如果你嘗試改背景格式為16bits,你將看到紋理內(nèi)存占用增長到2.5MB,改成真色彩(Truecolor)將會占用3.8MB.
但是,你看下面這兩個不同版本的背景效果,會發(fā)現(xiàn)用Compressed(壓縮)設(shè)置和Truecolor(真彩色)比起來差不多:

壓縮紋理(Compressed)的背景

真彩色(Truecolor)的背景

由于壓縮后的背景看起來很不錯,同時節(jié)省很多內(nèi)存占用,那么我們就選擇壓縮格式.現(xiàn)在背景和相機設(shè)置看起來都沒問題了,我們需要找到 old lady和cat.

控制繪圖順序(Controlling Draw Order)

因為cat和enemy被繪制在了背景后面,所以我們看不到它們.可以調(diào)整游戲?qū)ο骦軸的位置,使對象靠近相機,我覺得這是一個非常好的方式,然而Unity現(xiàn)在支持圖層排序(Sorting Layers),更適合處理這個問題.

在Hierarchy視圖選擇cat,把精靈渲染器的層排序(Sorting Layer)設(shè)置為Default,如下圖:

點擊Sorting Layer下拉框,你項目所有層都將呈現(xiàn)在這里,現(xiàn)在只有默認定義的Default層.

可以看到有”Add Sorting Layer…. “選項,點擊+號,我們創(chuàng)建一個新的排序圖層,命名為cat,同樣的再創(chuàng)建兩個層,分別是Enemies和Zombie.現(xiàn)在看起來如下圖:

這些層將定義繪制順序,Layer 0,名字是Default,是在最遠最后面的,Layer 1,名字是Cats,在它的前面.
現(xiàn)在,已經(jīng)添加的每個游戲物體都是被設(shè)定為Default層.背景圖像在這層是沒問題的,因為它在最后面,所以我們要更改其它精靈的層.
在Hierarchy視圖選擇cat的Sorting Layer為Cats.你會在場景視圖和游戲視圖里立刻看到cat出現(xiàn)了.

在新圖層的cat

場景中能看見cat了

在Hierarchy視圖中選擇enemy的Sorting Layer到Enemies層.這樣以來,你會看到老太太(old lady)顯現(xiàn)在貓的前面,貓會不會絆倒歐巴桑?管它呢…

最后,將zombie的層設(shè)定為Zombie,確保所有精靈都在背景之上渲染,現(xiàn)在視圖看起來像這樣:

正確繪制順序的游戲視圖

注:精靈渲染器同樣有個名為Order的屬性,使用它可以調(diào)整相同排序?qū)又芯`間順序.

在本例中我們不需要調(diào)整Order屬性,因為我們沒有在同一個層里放不同的精靈.從我的測試結(jié)果來看,Unity在添加添加一個精靈到一個層的時候,將總會把最新的精靈畫在層內(nèi)舊精靈的前面.

給精靈編程

現(xiàn)在沙灘上散落著一些精靈,它們沒有任何動作.教程這部分我們將完成它們的控制,我們會編寫兩段腳本,一個是僵尸的動畫,另外一個是允許玩家控制僵尸的移動,其余的等你學(xué)會了自己寫吧…

注:我們用C#(發(fā)音為”see-sharp”)寫腳本,它很容易,如果你喜歡,也可以用JavaScript來寫.

精靈動畫(Animating Sprites)

首先我們添加一個腳本來制作僵尸的動畫.在Hierarchy視圖選擇zombie并給它新建個腳本,命名為”ZombieAnimator”.下面動畫演示了具體步驟:

在MonoDevelop中打開ZombieAnimator.cs,一般情況下在Unity雙擊ZombieAnimator文件就可以打開了.如下圖:

Inspector視圖中的SpriteAnimator腳本

Project視圖中的SpriteAnimator

我們要讓僵尸進行簡單的行走動畫,需要精靈動作表和一個循環(huán)速度.我們定義兩個公共變量到腳本中:

public Sprite[] sprites;
public float framesPerSecond;

注:在C#中變量定義在所有大括號之外,標志著它是定義在類之內(nèi),所有函數(shù)之外.這不用特別理解明白,通常將它放在類的頂部,即任何函數(shù)定義之前.

公共變量將在Unity的編輯器中暴露出來,所以你可以直接修改它們的值而不用改變代碼,哪怕是運行的時候!這個特性在實際使用中異常方便.

通過分配不同的精靈給SpriteRenderer組件來渲染動畫.而不是在Update中調(diào)用動畫,我們要在腳本開始運行時給它緩存?zhèn)€實例變量.

我們添加一個私有變量到ZombieAnimator:

private SpriteRenderer spriteRenderer;

私有變量是不會暴露在Unity編輯器中的,我們在Start中初始這個變量:

spriteRenderer = renderer as SpriteRenderer;

腳本子類MonoBehaviour可以獲得變量同名的渲染器.對于顯示精靈的游戲?qū)ο?渲染器將是SpriteRenderer.

注:可以在腳本里直接引用常見的對象,比較常見的如游戲?qū)ο蟮腡ransform,場景的main Camera.

我們添加如下代碼在Update中:

int index = (int)(Time.timeSinceLevelLoad * framesPerSecond);
index = index % sprites.Length;
spriteRenderer.sprite = sprites[ index ];

關(guān)卡載入到當前的時間秒數(shù) (更多信息請查閱文檔的Time類)和每秒渲染的幀數(shù)相乘.如果動畫幀是存儲在一個無限長的數(shù)組里,得出的數(shù)就是數(shù)組中成員的索引數(shù).

但是你知道數(shù)組成員不會是無限數(shù)量的,當動畫幀數(shù)組播放一遍后你需要循環(huán)回到開始,通過執(zhí)行模數(shù)(%)操作,即做兩個數(shù)字之間的整除取余.換句話說你將得到0~數(shù)組總成員數(shù)之間的索引來控制動畫幀的播放.寫完上面腳本后保存,然后切換回Unity.在Hierarchy視圖選擇zombie會看到Zombie Animator腳本組件將顯示剛才寫的兩個公共變量.

精靈數(shù)組字段里面沒有內(nèi)容,我們需要按照如下順序添加精靈庫到數(shù)組里:zombie_0, zombie_1, zombie_2, zombie_3, zombie_2, zombie_1,我最喜歡的做法是在Hierarchy視圖里選擇zombie,在Inspector視圖右上角點擊鎖頭圖標,這樣zombie的Inspector面板將會一直保持顯示狀態(tài),即使你選擇其它對象,它依舊會顯示.

在Project視圖中展開zombie紋理,單擊zombie_0以選中它,然后按住shift鍵再點擊zombie_3來選擇4個僵尸精靈.

拖拽鼠標,可以看到一個綠色的加號的光標,拽到精靈數(shù)組那里,這時可以看到所選項都加到了精靈數(shù)組里.現(xiàn)在Zombie Animator腳本組件看起來應(yīng)該是這樣的:

然后只選擇zombie_2以同樣的方式追加到數(shù)組里,再追加個zombie_1,這時精靈數(shù)組將包含正確順序的六個元素,就像這樣:

精靈數(shù)組與六個元素

再次點擊鎖按鈕解鎖,如圖:

Inspector視圖解鎖

最后,設(shè)置Frames Per Second到10,像下面這樣:

運行一下游戲,你會看到可怕的僵尸…

注:你可以在運行時根據(jù)自己心情調(diào)整 Frames Per Second來找到一個合適的速度,但Unity停止播放后會重置這個調(diào)整的值,因此你要停下時一定要記錄一下這個值在賦到 Frames Per Second上.

現(xiàn)在僵尸已經(jīng)復(fù)活了,下一節(jié)我們要創(chuàng)建一個簡單的控制器腳本讓它行走起來.

控制精靈運動

在Hierarchy視圖中選擇zombie并添加一個新C#腳本,命名為”ZombieController”,你可能要一個年老的邁著沉重步伐的僵尸,也或者要一個比較年輕有活力的僵尸,可以通過移動速度來調(diào)整它們的姿態(tài),便于我們微調(diào),我們將它寫為公共變量.

打開ZombieController.cs腳本并添加如下代碼:

public float moveSpeed;

moveSpeed將存儲一個units數(shù),這個單位不是像素,而是僵尸每秒移動的速度.因為現(xiàn)在精靈是一個單位為100個像素,所以這個值可能需要相當小.

正如下面的動畫,要做當用戶點擊鼠標后,僵尸沿著直線走到鼠標的那個點(或這用戶是按住鼠標同時拖拽鼠標來改變僵尸新的位置).

平時很可能不會在每一幀都得到輸入事件,所以當僵尸目的方向改變時我們需要存儲僵尸的目的地方向.要做到這一點,我們要計算出指向僵尸行走方向的normalized向量(長度為1的向量).

添加如下變量到ZombieController中:

private Vector3 moveDirection;

雖然我們現(xiàn)在在做一個2D游戲,但是Unity仍舊使用的是3D坐標系,因此要改變對象位置的Vector3.雖然這里僵尸不會改變z軸的位置,我們可以用Vector2類型,但是我避免后面要在Vector2和Vector3兩種類型轉(zhuǎn)換的麻煩,我還是用Vector3了.

添加以下代碼以便有輸入時間時更新moveDirection:

// 1
Vector3 currentPosition = transform.position;
// 2
if( Input.GetButton("Fire1") ) {
// 3
Vector3 moveToward = Camera.main.ScreenToWorldPoint( Input.mousePosition );
// 4
moveDirection = moveToward - currentPosition;
moveDirection.z = 0;
moveDirection.Normalize();
}

下面說明一下剛才這段代碼的用途:
我們要獲得僵尸當前位置,所以將位置付給局部變量,然后判斷鼠標左鍵(Fire1)是否被按下,用場景的main Camera,轉(zhuǎn)換鼠標目前位置為世界坐標系,因為ScreenToWorldPoint不會影響到Z軸的值,所以這里我們直接用鼠標的位置來取得moveToward,計算移動的方向是用目標位置減去僵尸目前的位置,,因為你不想改變僵尸Z軸的位置,所以我們設(shè)置moveDirection的z值為0,并用Normalize將moveDirection變?yōu)殚L度為1的”單位長度(unit length)”.Unit length的向量用起來是很方便的,可以通過一個標量值,如moveSpeed乘以這個向量來讓向量指向一個方向,而保持長度.后面會用到這個.

注:用Input來訪問輸入數(shù)據(jù)是比較通用的方法,一個項目默認定義了各種輸入名稱,比如Horizontal, Vertical, 和 Jump, Horizontal是檢測操縱桿x軸的位置以及鍵盤左右箭頭按鈕狀態(tài).如果你需要獲得水平方向的輸入數(shù)據(jù),可以直接用Horizontal來獲取,而不用關(guān)心具體是怎么獲取來的.

Fire1默認定義的是虛擬鍵之一,它注冊的是一個操縱桿或鼠標的按鈕0,而左control鍵是用Input.GetButton返回的布爾值獲得的.代碼將在鼠標按下的每一幀時更新moveDirection(不只是當初按下的那一陣).沒錯,這也意味著你可以通過鍵盤的左CTRL鍵來控制僵尸方向,只是還要用鼠標來掌舵.
在Edit\Project Settings\Input能看到關(guān)于InputManager設(shè)置.

下面我們添加下面的代碼來做僵尸跟隨鼠標走路的效果:

Vector3 target = moveDirection * moveSpeed + currentPosition;
transform.position = Vector3.Lerp( currentPosition, target, Time.deltaTime );

第一行是用來計算以moveSpeed速度單位讓僵尸從當前位置移動到目標位置,也就是僵尸將按照當前位置朝向鼠標目標位置方向移動過去.
第二行使用Vector3.Lerp來計算當前位置與目標位置之前路徑上僵尸的新位置,線性插值(Lerp)是為取兩個值之間內(nèi)插值的最便利方法.Lerp第三個參數(shù)取值范圍是0~1,這意味著0時將返回你現(xiàn)在的位置點,值為1時將返回目標點,0.5時將返回它們的中點.我們這里用Time.deltaTime來作為第三個參數(shù)值,因為它是一秒鐘的一小部分,很可能會小于1,會讓你得到沿著起點到終點路徑上的一些點,正因為Time.deltaTime任何時候都將接近于1,因此你可以得到一個不錯的平滑運動.

保存這個腳本并切換回Unity.

運行游戲,點擊某個地方讓僵尸走過去,因為沒有設(shè)定ZombieController的moveSpeed,所以它還不會走動,不用停止游戲,我們在Inspector面板中選擇zombie找到Zombie Controller腳本組件改變移動速度為2,再次在沙灘上點擊鼠標,你會看到僵尸走過去了.

在Inspector更改移動速度知道你覺得滿意.根據(jù)你調(diào)整的移動速度,你可能還需要調(diào)整Zombie Animator腳本中的Frames Per Second來讓僵尸動畫與行走速度相匹配.
當你覺得滿意的時候你記住現(xiàn)在設(shè)定的數(shù)值,然后停止游戲的運行,重新設(shè)定這些值好讓下次運行時移動速度和動畫是正確的.

這個時候,你有可能發(fā)現(xiàn)下面這些問題:
1.當游戲開始運行時,你會發(fā)現(xiàn)僵尸的腿在動,可它確實靜止在那里的.
2.僵尸愉快的向右走出了屏幕.
3.他走路的時候并不看路.

在看完這個教程時你會解決它跑出屏幕的問題,所以現(xiàn)在暫時忽略這個問題.此外,如果它跑到了屏幕外面,只需再次點擊沙灘,他有可能就會回來的.

再次回到MonoDevelop打開ZombieController.cs.
這個腳本用moveDirection來移動僵尸,但是只有當有輸入事件的時候它才開始移動,為了讓場景開始的時候它就前進,我們需要初始moveDirection指向它的右方.
在Start中添加下面這行:

moveDirection = Vector3.right;

這個點是在x軸的正方向上,換句話說它指向朝右的方向.

保存ZombieController.cs并回到Unity中再次播放游戲.
現(xiàn)在僵尸自己就跑了,接下來我們要讓他看路走.
回到ZombieController.cs,添加一個公共變量在ZombieController中做為僵尸的扭率:

public float turnSpeed;

我們將用turnSpeed來控制僵尸定位自己方向的響應(yīng)速度.
Unity內(nèi)部是使用四元數(shù)表示旋轉(zhuǎn).如果你想了解四元數(shù),可以看此鏈接:http://en./wiki/Quaternion,不過也許你看了后會覺得頭腦發(fā)昏,但值得寬慰的是在Unity做2D游戲不用完全了解四元數(shù)是什么.
因為用 Quaternion.Euler 方法可以從一個歐拉角獲得四元數(shù).大多數(shù)人都習(xí)慣歐拉角,它包含單獨的x,y,z的旋轉(zhuǎn)角度.雖然它們因為如萬向軸死鎖(gimbal lock)等問題在3D創(chuàng)作中使用不太理想,但對于2D游戲來說,歐拉角是蠻好用的,我們可能只需要繞z軸旋轉(zhuǎn).

注:欲了解更多關(guān)于四元數(shù),可以看我們這個教程OpenGL ES Transformations with Gestures(http://www./50398/opengl-es-transformations-gestures)”.

最后我們在Update腳本里添加下面的代碼:

float targetAngle = Mathf.Atan2(moveDirection.y, moveDirection.x) * Mathf.Rad2Deg;
transform.rotation =
Quaternion.Slerp( transform.rotation,
Quaternion.Euler( 0, 0, targetAngle ),
turnSpeed * Time.deltaTime );

我們來看一下這個代碼,首先我們用Mathf.Atan2來找到x軸與moveDirection之間的角度.Mathf.Atan2將返回角度的弧度,所以要乘以Mathf.Rad2Deg來轉(zhuǎn)換為角度.
然后用Quaternion.Slerp來轉(zhuǎn)向您所計算的目標角度.
Quaternion.Slerp執(zhí)行的是指定兩個角度的球面線性插值.類似于前面我們用到的Vector3.Lerp,只是它是計算新的旋轉(zhuǎn),而不是計算新的位置.

此前,調(diào)用Vector3.Lerp,并用moveSpeed調(diào)整僵尸移動的距離,同時用turnSpeed做僵尸的面向角度處理.

以上就是ZombieController.cs腳本,保存它并回到Unity.
在Hierarchy視圖選擇zombie.設(shè)定Turn Speed到5,如下圖:

運行游戲并點擊周圍的海灘,僵尸將始終朝向你鼠標點擊的位置.

上面這些就是這個教程教你做Zombie Conga游戲的所有內(nèi)容.通過”File\Save Scene as…. ”并命名為”CongaScene”保存場景.

下一節(jié)我們要講一些只在Unity專業(yè)版(付費版本)才提供的功能,這些對于Zombie Conga游戲不是必要的,但你可能想了解更復(fù)雜項目的制作,就需要用到它-Sprite Packing.

精靈封裝(Sprite Packing)-僅針對專業(yè)人員.

注:本節(jié)介紹的功能,只適用于Unity Pro中.你仍然可以在Unity free版本中直接使用一個紋理圖集,可它需要你用不同的工具來創(chuàng)建生成紋理圖集的圖片文件.你同樣可以在運行時將一些精靈壓縮為圖集切片,但是它會令你組織和使用資源變成很不直觀的,因此我們這里不介紹這種方法.

播放游戲,并點擊游戲視圖頂部控制欄的Stats按鈕查看渲染狀態(tài)信息,如下圖:

請注意,現(xiàn)在場景中因為沒有進行配料(batching)優(yōu)化,所以Draw calls看起來很多.

當然,Draw calls現(xiàn)在是正常的,因為現(xiàn)在場景里渲染了四個精靈,每一個精靈都用了一個獨自的材質(zhì)球.雖然現(xiàn)在只有四個draw calls,但真正的游戲中隨著場景中對象和效果的增加,這個draw calls數(shù)也會增加,太多的draw calls會降低游戲性能,所以我們要仔細的組織精靈紋理,幸運的是有個基本的方法來幫助我們優(yōu)化draw calls,就是將零散的精靈圖片轉(zhuǎn)換成精靈紋理圖集.紋理圖集(texture atlases)是由若干個小紋理組成的大紋理貼圖,用于優(yōu)化渲染時GPU的調(diào)用,這不是新技術(shù),以前要我們用第三方工具或者手工創(chuàng)建它,而現(xiàn)在Unity可以幫我們自動創(chuàng)建它.

注:在Unity4.3.2版中的Sprite Packing仍處于開發(fā)者預(yù)覽模式.

為了將精靈合并到圖集里,首先需要修改其導(dǎo)入設(shè)置.
在Project視圖中找到cat.png并打開Import Settings,這里注意名為Packing的標簽屬性. Packing標簽用來定義精靈加入到紋理圖集后的名稱,可以是任何你想要的字符串.
在Packing標簽中輸入它的名字”toons”:

然后點擊應(yīng)用按鈕保存設(shè)置,用同樣的方法將enemy和zombie也命名一下.
然后從”Window\Sprite Packer”菜單中打開”Sprite Packer”,如果是4.3.2版本,有可能是” Window\Sprite Packer (Developer Preview)”這樣的菜單,那么將會顯示下面這樣的錯誤提示:

正如你所見默認是禁用Sprite packing的,我們到”Edit\Project Settings\Editor”中把Sprite Packer的模式選為”Always Enabled”,像下圖這樣:

當選擇”Always Enabled”后,你可以在build時候看到一個”only packing your Sprites for builds”選項.

再次從”Window\Sprite Packer”菜單打開Sprite Packer窗口,如下圖:

黃色的文字是提醒你用的是一個功能的預(yù)覽版.以后正式版就不會看到這個提醒文字了.

在這個窗口的左上方點擊Pack按鈕,你會看到精靈都排列在窗口里了,如下圖:

再次運行游戲到游戲視圖查看運行狀態(tài)信息,你將看到現(xiàn)在只用了兩個draw calls,比原來省了兩個.

這樣做的好處是顯而易見的,精靈共享使用了材質(zhì)球,優(yōu)化了性能,同時做這個優(yōu)化如此簡單,何樂不為.

Sprite Packer的選項和問題

Sprite Packer窗口頂部包含一個控制欄,如下圖:

1:視圖中看到的是目前的圖集.第一個下拉菜單是你使用過的Packing標簽名稱.可以選擇它查看它的內(nèi)容.
2:如果Sprite Packer幫你整合圖集超過一張圖,你需要通過第二個下拉菜單切換其它圖集.
3:默認精靈在圖集中的分配方法是按照DefaultPackerPolicy進行的,可以通過調(diào)整DefaultPackerPolicy來自定義分配方法,不過這個高級功能本教程就不介紹了.

有時候Unity會將我們本來要整合到一個圖集拆分創(chuàng)建成多個地圖集,并把名字加了序號.造成這個問題的原因是精靈紋理壓縮格式不同.

例如:zombie.png我們設(shè)置的是16位顏色(16 bits),而enemy.png和cat.png是用的壓縮格式(Compressed),那么Unity整合圖集時,將會創(chuàng)建出兩個圖集,名稱分別是”toons (Group 1)”和”toons (Group 2)”:

盡管這三個精靈有相同的Packing標簽,但Unity仍舊創(chuàng)建了多個圖集.為了確保圖集最優(yōu)化,我們要確保準備整合到同一個圖集中的精靈的壓縮格式相同.

正常情況下,將盡可能的減少精靈圖集的總數(shù),除非精靈太多,一張圖集存不下,Unity會再次自動拆分圖集,我們要用Packing標簽合理安排精靈歸屬,盡可能做到精靈圖集的最優(yōu)化.

好了,本教程到此結(jié)束,可以從這里下載到完成的項目源碼:(http://cdn5./wp-content/uploads/2014/01/ZombieConga-Part1-complete.zip),官方出的中文字幕版2D工具視頻教程:http://v.youku.com/v_show/id_XNjQxNDk0MTg4.html