巧用Shader，遊戲玩法新思路

最新 07-05

今天為大家分享由學生組成的遊戲開發小型團隊，在為期5天的課堂Game Jam中使用Unity製作小遊戲《Color Wars》的過程，以及其中使用著色器為遊戲畫面添加各種顏色的方法。

他們製作的《Color Wars》是一款非常簡單的2.5D多人對戰遊戲，玩家可以射擊敵人，為敵人或者為場景加上顏色。遊戲效果如下：

GIF/2K

圖形部分

所有遊戲的特效魔法背後，都是最原始的3D模型、圖片與人物精靈來組成整個場景。這些組成場景的元素都有其顏色及紋理。

其中比較棘手的部分是需要在Alpha通道中屏蔽所有元素的顏色。換而言之，默認情況下，屏幕的整個Alpha通道都是黑色的，直到玩家開始噴射油漆，才會使被油漆濺到區域的Alpha通道變為白色。然後圖像效果就是其原有顏色與灰度進行混合。

如下：

從上圖可以看出，使用Projector將噴漆繪製到物體表面並創建顏色遮罩。每個Projector都使用程序化動態生成，在子彈（空中飛行的白點）接觸到某個表面時進行初始化。Projector帶有一個盒式碰撞體，當子彈落在Projector上時，不會初始化新的Projector，而是讓原先的Projector變大。這樣漆量會變多，而場景中的Projector數量卻保持不變。

默認情況下，Unity標準著色器會為所有不透明對象的Alpha通道寫入1。所以下面使用自定義著色器來替換Unity標準著色器。新建一個標準表面著色器，將其表面函數替換為如下：

下面這行很重要，用於避免Unity更改自定義的Alpha值。將#pragma那行代碼改為如下：

注意，該技巧不可用於Unity中的延遲渲染管線，因為它重寫了G-Buffer中的Alpha通道來存儲遮罩數據。

油漆噴射

當子彈撞擊某個表面時就會在撞擊處動態生成Unity Projector。這些Projector帶有自定義材質與自定義著色器。材質紋理是一張帶有Alpha通道噴濺形狀圖，本文示例使用的紋理如下圖：

注意，紋理導入設置中要將Wrap Mode設為「Clamp」而非「Repeat」。用於Projector材質的著色器從Unity提供的ProjectorLight修改而來，代碼如下：

下面來介紹其中最為重要的混合部分。

混合原理

當著色器計算某個像素的顏色時，該顏色必須作用於屏幕上該點已經存在的像素顏色之上。默認情況下，新的像素會完全覆蓋原有像素，但新像素也可以與原有像素進行混合。混合通常用於讓對象呈透明或半透明效果，當然也可以實現很多其它的炫酷特效。

關鍵字Blend可以包含在Subshader或Pass標籤中，甚至對同一個著色器的不同Pass進行混合。添加Blend關鍵字後，必須寫入混合因子。混合因子如下：

Src指向著色器用於計算的顏色。Dst指向屏幕上已有的像素顏色。著色器用於計算的顏色會與第一個因子相乘，而屏幕上已有顏色會與第二個因子相乘。將兩個結果相加，就是最終寫到屏幕的顏色。

所以"Blend SrcAlpha One"會將自身Alpha值與當前著色器計算的顏色相乘，此時屏幕上的顏色暫未改動。然後再將屏幕顏色計算後的結果與前者相加。還可以使用逗號分隔兩組因子，逗號前的混合選項用於計算顏色，逗號後的混合選項僅計算Alpha通道。可以查閱Unity文檔了解更多關於混合的內容。

用於Projector的著色器就是「Blend Zero One, One One」，「Zero One」移除了飛濺紋理的顏色，使用子彈所飛濺到的表面顏色。「One One」將飛濺物的Alpha值與表面Alpha值相加。

現在使用上面的著色器與材質來生成Projector，應該將場景視圖的Alpha通道設為白色。

顏色與灰度

現在可以隨意修改Alpha通道，但還未達到最終效果。下面利用Alpha遮罩來創建遊戲所需的圖像特效。

首先，創建要使用圖像特效的著色器。在Unity中新建默認的Image Effect Shader，然後將片段代碼替換為如下：

可以隨意更改bnw(Black&White)變數以達到理想的混合效果。最後還需要新建腳本來運行該圖像特效。腳本非常簡單，代碼如下：

注意，這裡用到了ImageEffectBase，該資源在Unity標準資源庫中（Unity 5.5及以上版本推薦使用Post Processing Stack資源庫代替ImageEffects）。導入標準資源庫後，將腳本綁定到相機（確保將相機的渲染模式設為Forward）上，並將公共的著色器變數設為前面提到的著色器。

到此就可以向場景中噴射油漆啦！

已知限制

本文提到的實現方式還存在一些限制，不一定適合所有的應用場景，但對於《Color War》這款遊戲來說已足夠。主要存在以下兩點限制：

採用Alpha遮罩就意味著沒有Alpha通道，也不支持延遲渲染。這也許可以使用模板、命令緩衝區甚至多渲染目標來解決。

項目使用的自定義著色器過多，這種做法並不推薦。如果您的項目可以使用延遲渲染解決其它問題，那麼這個問題也就不存在了。

結語

本文為大家分享了在Unity中利用著色器來實現噴繪效果的過程，文中的解決方法僅作為一種思路參考，不一定適用於所有項目。大家也可以按照項目的實際需求，來選取更加適合的解決方案。

我們還會為大家分享更多Unity遊戲及VR/AR內容的開發經驗在Unity官方中文社區（unitychina.cn），請保持關注！

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！