我們?cè)?/span>Made With Unity作品《Agent A - 偽裝游戲》中分享了游戲從2D設(shè)計(jì)轉(zhuǎn)為3D的初衷，以及轉(zhuǎn)換設(shè)計(jì)后對(duì)游戲性能與應(yīng)用包體帶來的改進(jìn)，例如場景大小從30MB縮小至500KB的FBX文件及最小尺寸的紋理。下面就一起來看看從2D效果還原至3D場景的具體步驟。

2D原畫轉(zhuǎn)3D模型
為了不耽誤游戲主程的開發(fā)進(jìn)度，在早期的草圖階段，我們?yōu)槊總€(gè)場景創(chuàng)建了非常簡單的灰箱模型以便進(jìn)行程序開發(fā)工作，而且美術(shù)設(shè)計(jì)也可以同時(shí)進(jìn)行。

?
早期的灰箱模型與最終模型的對(duì)比


雖然最終的2D原畫被用作3D場景建模的參考，但是在這個(gè)階段需要注意的是，并非所有2D內(nèi)容都可以重現(xiàn)到3D場景，我們只能讓3D模型盡可能多地還原2D效果。

我們選擇使用Blender軟件進(jìn)行3D建模，這款軟件相當(dāng)強(qiáng)大，不僅免費(fèi)，還能滿足項(xiàng)目的大部分需求。我們?cè)贐lender中建模時(shí)粗略設(shè)置一個(gè)光照，以便對(duì)整個(gè)場景的光照效果有初步的概念，這也更便于在資源導(dǎo)入后在Unity中進(jìn)行設(shè)置。

光照、著色和紋理的技術(shù)細(xì)節(jié)
我們發(fā)現(xiàn)最終模型在Blender中顯示的顏色可能比較奇怪，那是因?yàn)樽罱K的著色與紋理化是完全在Unity中完成的。為什么要在Unity中完成這些工作呢？因?yàn)閁nity是一款所見即所得的游戲引擎，且編輯器上手簡單，在Unity中進(jìn)行著色與紋理化是最快的方式，同時(shí)還避免了重復(fù)處理。我們可以在Blender中設(shè)置好顏色，然后在Unity中使用不同的光照設(shè)置對(duì)顏色進(jìn)行調(diào)整。

具體到《Agent A - 偽裝游戲》，它的藝術(shù)風(fēng)格包含了很多漸變，因此需要一種在Unity中創(chuàng)建這些漸變的高效方法。在運(yùn)行時(shí)僅使用一個(gè)著色器繪制漸變會(huì)為每個(gè)場景帶來大量的額外負(fù)擔(dān)，并且我們也想確保這款游戲盡可能多地在配置較低的設(shè)備上運(yùn)行。

最后的解決方案是使用非常小的像素紋理來處理漸變。我們?cè)赑hotoshop中創(chuàng)建像素高度為1的圖像，并在水平位置添加盡可能多的像素點(diǎn)來形成漸變，例如從黑色到白色的灰度轉(zhuǎn)變可以理解為1px黑色到1px白色，我們可以在Unity中使用雙線性濾鏡(Bilinear Filtering)處理微小紋理，當(dāng)紋理拉伸至整個(gè)網(wǎng)格大小時(shí)就會(huì)生成一個(gè)平滑漸變。然后在著色器中添加一個(gè)旋轉(zhuǎn)滑塊，就可以將漸變進(jìn)行360度任意旋轉(zhuǎn)后附于其所在的表面，也可以復(fù)用2D漸變紋理。


?
一個(gè)2像素紋理放大32倍后的效果

?

?
將紋理導(dǎo)入U(xiǎn)nity并應(yīng)用于材質(zhì)的效果


提示：確保在檢視面板中將紋理的Wrap模式設(shè)置為Clamp，以消除邊緣的褪色。

該著色器基于Unity的Diffuse或Unlit著色器，添加了下述代碼來創(chuàng)建UV旋轉(zhuǎn)：
?

[C#]?純文本查看?復(fù)制代碼
// 滑塊屬性 [0 to 2xPI]
_Rotation (“Rotation”, Range(0.0, 6.2831853071)) = 0.0
// 定義一個(gè)頂點(diǎn)著色器函數(shù)
#pragma surface surf Lambert vertex:vert
// 應(yīng)用旋轉(zhuǎn)變換矩陣
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貼圖
為了使上節(jié)所述的旋轉(zhuǎn)滑塊正常工作，我們需要使用一種稍微不同的方式來展開UV。物體(Object)的每一面都需要平鋪展開并填充至整個(gè)UV貼圖。這意味著，如果處理正確，選擇所有平面后同時(shí)查看UV，它們將被依次重疊放置。

我們想要的效果并非如下的傳統(tǒng)UV貼圖（選中控制面板的所有面）。
?


而是下面這種重疊放置的混亂效果（選中控制面板的所有面）。



當(dāng)選中每個(gè)單獨(dú)的表面時(shí)，它看起來會(huì)更清晰一些（僅選中控制面板的正面）。
?


使用此方法，模型中每個(gè)需要進(jìn)行控制的面都需要一個(gè)單獨(dú)的材質(zhì)。這樣一來，在Unity中選中對(duì)象時(shí)，就可以使用多個(gè)材質(zhì)來控制每一面的顏色、漸變和紋理。
?


添加光照
我們發(fā)現(xiàn)，在每個(gè)場景都有一束方向光的情況下，額外添加哪怕一個(gè)點(diǎn)光源，都會(huì)觸及不影響移動(dòng)設(shè)備上運(yùn)行幀率的極限。所以我們嘗試盡可能多地使用Diffuse著色器而非Unlit著色器，原因是當(dāng)場景中的道具四處移動(dòng)時(shí)，可以看到來自方向光的實(shí)時(shí)陰影，例如下面這幅畫移開后露出的秘密間諜控制臺(tái)。
?


場景環(huán)境光通常設(shè)置為中性灰，但偶爾會(huì)加入一點(diǎn)其它顏色來調(diào)節(jié)氣氛，比如讓場景感覺更加溫馨的黃色。
?


紋理
紋理對(duì)《Agent A - 偽裝游戲》的藝術(shù)風(fēng)格有著至關(guān)重要的作用。所有紋理都是通過真實(shí)攝影、在Photoshop中從零開始繪制或著混合(PhotoChopped)制作而成，然后利用著色器中的通道將紋理應(yīng)用到對(duì)象。我們有兩種選擇可以應(yīng)用到各種不同的著色器中，如Diffuse、Unlit等，這兩種紋理的混合方式分別是“Multiply”和“Additive”。我們可以基于想要實(shí)現(xiàn)的特殊效果在它們之間進(jìn)行選擇，將紋理放入對(duì)應(yīng)的欄位，使用該欄位的360度旋轉(zhuǎn)滑塊和用于控制紋理混合強(qiáng)度的滑塊進(jìn)行紋理效果的調(diào)整，它們也可以與漸變紋理一起使用。漸變紋理將覆蓋在base欄位中的基本紋理上方。

下面是一些在門廳場景中使用著色器的示例。
?

?

?

銳亞教育