我們在Made With Unity作品《Agent A - 偽裝游戲》中分享了游戲從2D設計轉為3D的初衷，以及轉換設計后對游戲性能與應用包體帶來的改進，例如場景大小從30MB縮小至500KB的FBX文件及最小尺寸的紋理。下面就一起來看看從2D效果還原至3D場景的具體步驟。
2D原畫轉3D模型
為了不耽誤游戲主程的開發進度，在早期的草圖階段，我們為每個場景創建了非常簡單的灰箱模型以便進行程序開發工作，而且美術設計也可以同時進行。
雖然最終的2D原畫被用作3D場景建模的參考，但是在這個階段需要注意的是，並非所有2D內容都可以重現到3D場景，我們只能讓3D模型盡可能多地還原2D效果。
我們選擇使用Blender軟件進行3D建模，這款軟件相當強大，不僅免費，還能滿足項目的大部分需求。我們在Blender中建模時粗略設置一個光照，以便對整個場景的光照效果有初步的概念，這也更便於在資源導入后在Unity中進行設置。
光照、着色和紋理的技術細節
我們發現最終模型在Blender中顯示的顏色可能比較奇怪，那是因為最終的着色與紋理化是完全在Unity中完成的。為什么要在Unity中完成這些工作呢？因為Unity是一款所見即所得的游戲引擎，且編輯器上手簡單，在Unity中進行着色與紋理化是最快的方式，同時還避免了重復處理。我們可以在Blender中設置好顏色，然后在Unity中使用不同的光照設置對顏色進行調整。
具體到《Agent A - 偽裝游戲》，它的藝術風格包含了很多漸變，因此需要一種在Unity中創建這些漸變的高效方法。在運行時僅使用一個着色器繪制漸變會為每個場景帶來大量的額外負擔，並且我們也想確保這款游戲盡可能多地在配置較低的設備上運行。
最后的解決方案是使用非常小的像素紋理來處理漸變。我們在Photoshop中創建像素高度為1的圖像，並在水平位置添加盡可能多的像素點來形成漸變，例如從黑色到白色的灰度轉變可以理解為1px黑色到1px白色，我們可以在Unity中使用雙線性濾鏡(Bilinear Filtering)處理微小紋理，當紋理拉伸至整個網格大小時就會生成一個平滑漸變。然后在着色器中添加一個旋轉滑塊，就可以將漸變進行360度任意旋轉后附於其所在的表面，也可以復用2D漸變紋理。
提示：確保在檢視面板中將紋理的Wrap模式設置為Clamp，以消除邊緣的褪色。
該着色器基於Unity的Diffuse或Unlit着色器，添加了下述代碼來創建UV旋轉：
// 滑塊屬性 [0 to 2xPI]
_Rotation (“Rotation”, Range(0.0, 6.2831853071)) = 0.0
// 定義一個頂點着色器函數
#pragma surface surf Lambert vertex:vert
// 應用旋轉變換矩陣
float _Rotation;
void vert ( inout appdata_full v ) {
v.texcoord.xy -= 0.5;
float s = sin( _Rotation );
float c = cos( _Rotation );
float2x2 rotationMatrix = float2x2( c, -s, s, c );
rotationMatrix *= 0.5;
rotationMatrix += 0.5;
rotationMatrix = rotationMatrix * 2–1;
v.texcoord.xy = mul ( v.texcoord.xy, rotationMatrix );
v.texcoord.xy += 0.5;
}
不同尋常的UV貼圖
為了使上節所述的旋轉滑塊正常工作，我們需要使用一種稍微不同的方式來展開UV。物體(Object)的每一面都需要平鋪展開並填充至整個UV貼圖。這意味着，如果處理正確，選擇所有平面后同時查看UV，它們將被依次重疊放置。
我們想要的效果並非如下的傳統UV貼圖（選中控制面板的所有面）。
而是下面這種重疊放置的混亂效果（選中控制面板的所有面）。
當選中每個單獨的表面時，它看起來會更清晰一些（僅選中控制面板的正面）。
使用此方法，模型中每個需要進行控制的面都需要一個單獨的材質。這樣一來，在Unity中選中對象時，就可以使用多個材質來控制每一面的顏色、漸變和紋理。
添加光照
我們發現，在每個場景都有一束方向光的情況下，額外添加哪怕一個點光源，都會觸及不影響移動設備上運行幀率的極限。所以我們嘗試盡可能多地使用Diffuse着色器而非Unlit着色器，原因是當場景中的道具四處移動時，可以看到來自方向光的實時陰影，例如下面這幅畫移開后露出的秘密間諜控制台。
場景環境光通常設置為中性灰，但偶爾會加入一點其它顏色來調節氣氛，比如讓場景感覺更加溫馨的黃色。
紋理
紋理對《Agent A - 偽裝游戲》的藝術風格有着至關重要的作用。所有紋理都是通過真實攝影、在Photoshop中從零開始繪制或着混合(PhotoChopped)制作而成，然后利用着色器中的通道將紋理應用到對象。我們有兩種選擇可以應用到各種不同的着色器中，如Diffuse、Unlit等，這兩種紋理的混合方式分別是“Multiply”和“Additive”。我們可以基於想要實現的特殊效果在它們之間進行選擇，將紋理放入對應的欄位，使用該欄位的360度旋轉滑塊和用於控制紋理混合強度的滑塊進行紋理效果的調整，它們也可以與漸變紋理一起使用。漸變紋理將覆蓋在base欄位中的基本紋理上方。
下面是一些在門廳場景中使用着色器的示例。
下面是着色器中另一個代碼段，為Multiply和Additive添加額外的紋理欄位：
void surf (Input IN, inout SurfaceOutput o) {
// 注意：我們在組合一個表面紋理材質
half4 c = _Color * tex2D (_MainTex, IN.uv_MainTex); // base texture & colour
c *= (tex2D (_Multiply, IN.uv2_Multiply) * _MultiplyStrength) + (1.0f-_MultiplyStrength); // multiply texture
o.Albedo = c.rgb;
o.Alpha = c.a;
}
最后游戲中門廳的效果如下圖所示。
總結
以上就是在Unity中實現《Agent A - 偽裝游戲》藝術風格場景的具體步驟，除了美術設計與光照調整，還涉及到了巧妙利用着色器實現別出心裁的視覺效果。希望本文能為大家也提供一些靈感或幫助，以利用Unity完成獨一無二的優秀作品。更多相關教程請訪問Unity平台。
轉載於http://imgtec.eetrend.com/blog/9326