這次我要介紹一個很好玩的東西——戰爭迷路。

（小若：喂！迷路？）

其實這麼解釋不太好解釋，我們舉個例子。魔獸爭霸相信大家都玩過，遊戲開始時，地圖上到處都是黑濛濛的一片，什麼都看不到，我們必須一邊走一邊探路。

（小若：我知道了！不就是地圖探索嘛！）

就是這樣，我們來看看下圖就更加清楚了（圖片資源來自網路）：

（小若：我說，你早點放圖不就好了，為什麼要解釋這麼多！）

我們即將用Cocos2d-x的CCTMXTiledMap來實現這個功能。

（小若：好棒！）

但是，在這之前，我們得先補點數學理論知識。

（小若：我討厭數學！）

1. 版權問題

在這之前，我必須要宣告，戰爭迷霧的製作原理參考了以下這篇文章：

這篇文章寫得很好，大家感興趣的可以看看。本教程使用到的理論基礎和部分素材均來自這篇文章，特此宣告。同時，十分感謝網友的無私奉獻。

2. 神奇的數學

我們來看看一張瓦片地圖的圖素：

至於為什麼這麼排序，也許不在本教程討論範圍之內，我只給大家介紹這樣排序能帶來的好處。

（小若：其實你自己也不懂，是不是！）

我們來看看以下編號的4張圖片：4號、8號、1號、2號。把這幾張小圖拼起來剛好是這樣的：

也就是說，這四張圖剛好是四個白色角落的圖。

（小若：那又怎麼樣？）

現在，我們要做一件很不可理喻的事情，我們把每張小圖劃分為四個部分，每個部分是一個頂點，頂點預設值都為0，例如下圖：

我們把圖素白色部分定義為非空，黑色為空，則根據這個定義4、8、2、1號圖素的頂點分別如下：

只有這四張圖素才這樣定義，因為這四張圖素可以組合出任意其它的圖素。

（小若：噗，我不信。）

舉個例子，4號圖素和8號圖素相加等於什麼？看看下圖：

我們把四個頂點值相加： 0 + 0 + 8 + 4 = 12

然後我們再回頭看看12號圖素，是不是和上圖非常接近？

同理，我們試試結合4號、8號以及2號圖素：0 + 4 + 8 + 2 = 14，我們看看14號圖素是不是剛好和4、8、2號圖素疊加後的圖很接近？

我們需要的一個理論支援就是：將4、8、2、1號圖素進行疊加，將疊加後的4個頂點值相加，得到的值即為所需的圖素編號。

3. 這又有什麼作用

我們花了這麼大的功夫去得到這個十分神奇的結論，那，它到底有什麼作用呢？而且，旁白為什麼沒有吐槽呢？

（小若：喂！你不準吐槽我！）

這一切都是為了平滑過渡，不信的話，看看下圖，下圖就是把圖素隨機混亂拼接的後果：

我想，這種戰爭迷霧，我們寧願不要。

使用前面所說的規則，就可以讓圖素以最佳效果進行拼接。

具體這個規則怎麼使用，我們來看看例子，看下圖：

我們只留意圖中標明的4個圖素格子，當我們點選了左上角的圖素格子時，我們做以下操作：

1）當前圖素格子右下角的頂點值設為4

2）當前圖素格子右邊相鄰的格子的左下角頂點值設為8

3）當前圖素格子下方相鄰的格子的右上角頂點值設為1

4）當前圖素格子右下方相鄰的格子的左上角頂點值設為2

結合上圖一起理解會比較好。

（小若：圖畫得超級醜！你就不能畫好點嗎？）

現在，大家動手試試點選右上角的格子時，發生什麼事情？

我把當前點選的格子用綠色不規則花邊標明瞭。

（小若：我不想吐槽了，你絕對不是做畫家的材料！）

我們一步步再按照上面說的四步進行操作，最後格子的頂點數值就如上圖一樣了。

我們繼續關注當前點選的格子，我們計算一下它的四個頂點的和：0 + 0 + 8 + 4 = 12。所以將當前格子的圖素換成12號圖素。以此類推。

（小若：雖然我不是很明白，但是感覺好神奇的樣子！）

好了，理論知識到此結束了。也許大家還很模糊，但是沒有關係，用程式碼實現一遍，就能輕鬆地理解了。