本文將由遊戲開發工程師Ariel Coppes分享在Unity中爲即時戰略遊戲實現戰爭迷霧效果。
過去三年中，我一直在Ironhide Game Studio開發移動即時戰略遊戲《鋼鐵戰隊》。在開發過程中，我實現了適合這款遊戲的戰爭迷霧效果，但該實現方法缺乏即時戰略遊戲中的一些常見功能，我希望有一天能夠找到改進它的方法。
最近，我在拳頭遊戲開發博客閱讀到了一篇關於《英雄聯盟》中戰爭迷霧實現方法的文章，我從中得到了很多啓發，於是開始構思新的實現方法。
本文，我將詳解《鋼鐵戰隊》中戰爭迷霧效果的實現方法。下一篇文章，我會介紹新的實現方法，解釋爲什麼該方法比之前的方法更好。
戰略遊戲中的戰爭迷霧
戰爭迷霧通常表現戰場上的未知信息和過期信息，例如：關於地形的未知信息，敵人基地的原先位置信息。玩家單位和建築會提供視野，移除戰爭迷霧，展示關於地形的信息、當前位置和敵人的狀態。
如下圖所示，在《沙丘2》中，戰爭迷霧效果展示了未知區域。
下圖是《魔獸爭霸：人類與獸人》中的戰爭迷霧。
戰爭迷霧的概念已經在策略類遊戲中使用了超過20年的時間，影響了大量的遊戲。
開發過程
在開始實現前，我研究了一些遊戲的效果，並決定我想要的效果。在完成研究後，我決定使用類似《星際爭霸》的實現方法。
在《星際爭霸》中，遊戲裏的單位和建築會給玩家提供一定範圍內的視野。未探索的區域覆蓋着不透明的黑色迷霧，之前探索過的區域會覆蓋半透明的迷霧，顯示玩家已經瞭解的地形等信息，這類信息在遊戲期間往往不會發生變化。
敵人單位和建築僅在進入玩家視野時可見，但建築在離開視野後會留下最後的已知位置。
我認爲這是因爲建築通常無法移動（《星際爭霸》的人族建築是例外），因此通常可以認爲在失去視野後，建築依舊留在遠處，這是戰場上的重要信息。
《鋼鐵戰隊》
確定這些規則後，我創建了模擬圖，用於在開發前確定想要呈現的遊戲內效果。
模擬圖1：在《鋼鐵戰隊》中，測試不同戰爭迷霧下的地形。
模擬圖2：測試敵人單位確定可見時間。
我首先構造邏輯原型，瞭解該效果是否適合我們的遊戲，並確定改進的方法。
爲此，我使用int矩陣來表示遊戲世界中玩家視野的離散數值形式。矩陣中的0表示玩家在該位置沒有視野，1或更大數值表示該位置有視野。
如下圖所示，在矩陣中有3塊視野，其中1塊有更大的範圍。
遊戲單位和建築的視野會給數值增加1，表示該世界位置在玩家的視野範圍之內。每次移動時，首先在原有位置減小1，然後在新的位置增加1。
我們爲每個玩家提供了類似的矩陣，用於顯示和隱藏敵人單位和建築，該矩陣也會提供給無法在視野外開火的自動瞄準目標的技能。
爲了決定敵人單位或建築是否可見，我們首先通過變換世界位置，獲取對應的矩陣部分，然後檢查存儲的數值是否大於0。
如果不大於0的話，我們會把遊戲對象圖層改爲從主攝像機中剔除的部分，來避免對其進行渲染，我們把相應圖層命名爲“Hidden”。如果是可見的話，我們會把該圖層改爲默認圖層，使它開始進行渲染。
下圖展示敵人單位不在遊戲視圖中渲染的效果。
視覺效果
首先，我們會在遊戲世界爲每個矩陣部分渲染黑色或灰色的四邊形，下圖是相應的渲染效果。
我們可以使用該效果構造原型，決定我們不需要的內容。例如，我們不想讓山和樹等障礙阻擋視野，因爲我們希望避免有視野受限的感覺，而且我們不希望像其它遊戲一樣，在遊戲中使用多個層級的地形。
在確定內容和在遊戲內進行測試後，我們決定開始改進視覺實現方法。
改進的版本可以在整個遊戲世界中渲染帶有戰爭迷霧的紋理，它和我們製作視覺模擬圖的方法類似。
爲此，我們創建了帶有MeshRenderer組件的遊戲對象，然後調整其大小，使它覆蓋整個遊戲世界。該網格會渲染名稱爲FogTexture的紋理，其中包含迷霧信息，該網格的着色器會把像素顏色視爲反向的Alpha通道，白色表示完全透明，黑色表示完全不透明。
爲了填補FogTexture紋理，我們創建了單獨的攝像機，名稱爲FogCamera，它會使用RenderTexture渲染紋理，把畫面渲染到紋理上。
對於遊戲中提供視野的每個對象，我們都在FogCamera對象中創建了相應的遊戲對象，根據視野的範圍來變換位置並進行縮放。我們使用了被其它攝像機剔除的獨立Unity層，讓FogCamera來渲染這個層中的遊戲對象。
爲了完成這個過程，每個對象都有SpriteRenderer組件，組件上有白色的小橢圓紋理，可以用來在RenderTexture渲染紋理中渲染白色像素。
請注意：爲了模擬遊戲視角，我們使用的是橢圓形，而不是圓形。
這是每個視野使用的紋理，它是帶有透明度的白色橢圓形。在此，我把透明部分改爲不透明的白色，以便讀者可以查看。
下面是遊戲對象和FogCamera對象的示例。
爲了讓FogTexture在遊戲過程中有平滑的效果，在渲染到RenderTexture渲染紋理時，我們對FogCamera對象應用了少量模糊效果。
我們測試了不同的模糊着色器和配置，最後找到適用於多款移動設備的着色器。下面是該腳本組件的截圖。
下圖是迷霧在遊戲內的效果，第一張圖沒有模糊效果，第二張圖有模糊效果。
爲了渲染已探索的區域，我們要在之前加一步。在該步驟中，我們配置了另一個攝像機，名稱爲PreviousFogCamera，它也會使用RenderTexture渲染紋理，該渲染紋理名稱爲PreviousVisionTexture，我們使用相同的過程在此渲染視野。
該步驟的主要區別是：新的攝像機使用了“Don’t Clear”清理標識，不會清理緩衝區。因此，我們可以保留之前畫面的數據。
此後，我們會使用FogCamera對象，渲染灰色部分的PreviousVisionTexture紋理和FogTexture紋理中視野的對象，最終結果如下圖所示。
下圖是在FogCamera對象中展示已探索的區域。
下圖顯示已探索區域與迷霧在遊戲內的外觀效果。
建築
由於《鋼鐵戰隊》中的建築較大，而且不會像《星際爭霸》的建築那樣移動，因此我們打算使用類似的實現方法。
爲此，我們對迷霧下我們想要顯示的建築添加組件，並設置爲在建築離開玩家視野時，讓其繼續進行渲染。
我們還有一個系統，在帶有之前組件的對象首次進入玩家視野時，該系統會創建另一個對象，並進行相應的配置。
當建築不再處於玩家視野時，該對象會自動啓用，當建築處於視野內時，它會自動禁用。如果該建築在視野外被摧毀，該對象也不會立即消失，直到玩家查看到該對象的新狀態。
在進入和離開玩家視野時，我們加入了簡單的過渡效果，使該過程看起來更平滑。下面的圖片展示了該過程的效果。
小結
雖然本文的實現方法缺少一些常見的戰爭迷霧功能，但它很適合我們的遊戲，外觀也很不錯，這種方法在移動設備上的運行效果很好，我們對《鋼鐵戰隊》開發中所實現的成果感到非常驕傲和高興。
本文就是我爲《鋼鐵戰隊》實現戰爭迷霧的方法，希望開發者能夠喜歡這種方法。下一篇文章中，我將介紹包含更多功能的新方法。