在Unity中為即時戰略遊戲實現戰爭迷霧（上）

本文將由遊戲開發工程師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物件中展示已探索的區域。


下圖顯示已探索區域與迷霧在遊戲內的外觀效果。


建築

由於《鋼鐵戰隊》中的建築較大，而且不會像《星際爭霸》的建築那樣移動，因此我們打算使用類似的實現方法。

為此，我們對迷霧下我們想要顯示的建築新增元件，並設定為在建築離開玩家視野時，讓其繼續進行渲染。

我們還有一個系統，在帶有之前元件的物件首次進入玩家視野時，該系統會建立另一個物件，並進行相應的配置。

當建築不再處於玩家視野時，該物件會自動啟用，當建築處於視野內時，它會自動禁用。如果該建築在視野外被摧毀，該物件也不會立即消失，直到玩家檢視到該物件的新狀態。

在進入和離開玩家視野時，我們加入了簡單的過渡效果，使該過程看起來更平滑。下面的圖片展示了該過程的效果。


小結

雖然本文的實現方法缺少一些常見的戰爭迷霧功能，但它很適合我們的遊戲，外觀也很不錯，這種方法在移動裝置上的執行效果很好，我們對《鋼鐵戰隊》開發中所實現的成果感到非常驕傲和高興。

本文就是我為《鋼鐵戰隊》實現戰爭迷霧的方法，希望開發者能夠喜歡這種方法。下一篇文章中，我將介紹包含更多功能的新方法。

來源： Unity官方平臺  
原地址：https://mp.weixin.qq.com/s/CNUZzynN8COh96S0l99_cg