基於紋理繪製的戰爭迷霧

戰鬥迷霧（fog of war）是rts類、moba類遊戲中不可缺少的乙個部分。在2d遊戲中，使用磚塊地圖（tiled map）拼接，是最常用的實現方法。但在具體實現過程中發現，磚塊地圖實現的戰爭迷霧有一些不足，比如迷霧邊緣不柔和；解開迷霧時不流暢；繪製定點數過多，在低端手機上的幀數降低明顯等。

這裡介紹另外乙個實現，「基於紋理繪製」的戰鬥迷霧。簡單來說，就是根據迷霧資料，繪製一張比視窗（顯示視窗）小很多的紋理，然後再將紋理放大、柔化邊緣。實際過程中涉及到一些優化和特殊處理，具體步驟如下：

1. 將世界地圖網格化、記錄陰影資料。

比如世界大小為10 k pixel * 10 k pixel，設定每個網格大小為 32 pixel * 32 pixel，那麼我們生成大小為312 * 312 的世界網格，每個網格用1 byte記錄陰影資料，共100 kb的陰影資料。

2. 根據當前顯示視窗，擷取陰影資料。

比如當前顯示視窗為 1366 pixel * 768 pixel，我們需要擷取43 * 24的網格。

這裡有個優化: 我們擷取更大區域的網格，例如47 * 28。目的是在移動過程中，減少重新整理頻率，同時使陰影變化更加流暢。

3. 根據陰影資料，生成紋理。

定義單個畫素點顏色rgba(0.0, 0.0, 0.0, 0.0)。如果改點有陰影，則將透明度值設為預設值（比如0.8），否則為0.0。紋理佔據的記憶體大小為1byte * 4 * 47 * 28 = 5kb。

這裡也有乙個優化：計算每個畫素點的透明度時，取改點周圍3*3範圍內資料點的平均值。目的為使陰影邊緣根據柔和。

4. 放大紋理。

這裡使用的是雙線性插值，放大32倍。下圖為迷霧效果，可以發現邊緣非常平滑。

5. 視窗移動時，重新整理陰影。

預設情況下，陰影位於視窗的正**，當視窗移動時，陰影位置也跟隨移動。當陰影邊緣進入視窗時，需要重新整理陰影。適當的擴大陰影區域，大於視窗，能夠降低重新整理的頻率。但過大的陰影區域，也會加大單次繪製的壓力，因此需要選取恰當的值。

6. 陰影優化，繪製第二層陰影。

除了我們實現的戰爭迷霧，即點亮角色路經的區域；還有一種迷霧，點亮角色周圍的區域，角色離開的區域重新變暗。這層的迷霧實現方法比較簡答，這裡直接使用乙個中間透明、四周黑暗的。下圖為兩層迷霧疊加後的效果：

7. 效能比較：

相比tiled map，這種方法實現的迷霧: 邊緣更加光滑，解開迷霧的過程更加流暢，在低端機上的效能更高。

在三星低端的安卓機上真機測試比較: tiled map實現的迷霧，幀率為40 （預設為60）；而本文方法，基本能做到不掉幀。

當然每個演算法都有其適宜的地方，不能說本方法就適合所有遊戲，也不能說在所有遊戲中本方法都比磚塊地圖合適，只能說在某些情況下，本方法有一定的優勢。當然本方法也有繼續優化的餘地，也有別的更好的辦法實現戰爭迷霧，歡迎和大家一起討論進步。