作者：沈琰

前言

事情源于前不久偶然翻到了Jasper Flick大佬在catlikecoding上的Unity博客教程。

大致讀了一下教程，非常佩服這位作者。這應(yīng)該是見過最細致的教程，并沒有把大段的代碼和效果圖一股腦丟給你看，而是詳細地說明每一個步驟的思路和原理，甚至?xí)谝欢未a上反復(fù)改動只為讀者能完全弄明白。

極少有教程會像這樣去一點點的教你作者的思路，內(nèi)容也是由淺顯到深并包含許多綜合性的內(nèi)容，非常具有學(xué)習(xí)價值。

在學(xué)習(xí)大有收獲之余，我也希望如此精彩的教程能幫助到更多同學(xué)。在此選取HexMap這個系列教程整理翻譯。

關(guān)于選擇HexMap系列的原因
這個系列從簡單到復(fù)雜,有著很明顯的難度階梯曲線,比較適合有一定基礎(chǔ)的初學(xué)者入手學(xué)習(xí)。此教程包含的內(nèi)容從算法、3D數(shù)學(xué)到Unity的特性、C#語法等,都有涉及,內(nèi)容相當(dāng)豐富且綜合。并且地圖生成本身也是非常有趣和實用的內(nèi)容。

當(dāng)然，雖然我會盡己所能，但限于水準難免翻譯會有疏漏和詞不達意的位置。因此還是推薦有能力的同學(xué)直接學(xué)習(xí)英文原版。

另外，因為原版教程中代碼的增刪改動會以黃色背景色表示，而知乎的代碼編輯模塊不具備這種功能，為了能最大限度保留作者原意，就直接以截圖的方式附上代碼。

此系列教程的資源包從Unity5.3.1到Unity2017.3.0p3橫跨數(shù)個版本，為防止導(dǎo)入出現(xiàn)版本沖突問題，我會統(tǒng)一使用Unity2018.3.0b12實現(xiàn)一遍,并在結(jié)尾附上當(dāng)前教程的工程文件。

原版教程地址：https://catlikecoding.com/unity/tutorials/

本期原文地址：https://catlikecoding.com/unity/tutorials/hex-map/part-1/

本篇難度:★☆☆☆☆

創(chuàng)建六邊形網(wǎng)格

此教程是六邊形地圖系列的第一部分。許多游戲，尤其是戰(zhàn)略游戲，都常使用六邊形的網(wǎng)格地圖。包括《奇跡時代3》，《文明5》和《無盡傳奇》等等。我們將從簡單的基礎(chǔ)開始逐步添加功能，直到最終得到一個基于六邊形網(wǎng)格結(jié)構(gòu)的復(fù)雜地圖。

此教程的知識基礎(chǔ)是假設(shè)你已經(jīng)學(xué)完了以Procedural Grid(https://catlikecoding.com/unity/tutorials/procedural-grid/)開始的Mesh編程系列教程。工程由Unity5.3.1創(chuàng)建,中間橫跨多個Unity版本,最后一部分是用Unity2017.3.0p3完成。

1.六邊形相關(guān)知識

為什么要用六邊形?如果需要一個網(wǎng)格地圖,使用正方形應(yīng)該更合理一點。正方形很容易繪制和定位坐標，不過也有一個缺點。

觀察一下下圖中網(wǎng)格里的正方形和它的相鄰正方形：

可以看到中間的正方形一共有八個相鄰正方形，其中四個在邊上相鄰，另外四個在角上相鄰。

假如正方形邊長為1，那么邊上相鄰的正方形距離中間的正方形長度為1，而角上相鄰的正方形距離為√2。

這種距離的差別會在計算移動時導(dǎo)致很多問題。對于這種問題，不同的游戲有不同的解決方式。其中一個就是用六邊形網(wǎng)格來代替正方形網(wǎng)格。

相比于正方形網(wǎng)格，六邊形網(wǎng)格的相鄰格由八個變成了六個，并且都是在邊上相鄰。也就是說每個相鄰格對于中間的單元格距離是一致的，這無疑簡化了很多事情。不過六邊形網(wǎng)格的構(gòu)造比正方形要復(fù)雜一些，而這篇教程就是用來解決這個問題的。

在開始之間，我們先定義六邊形的大小。如下圖，以邊長10作為基準，所以圓心到每個角的距離也是10，因為六邊形是由六個等邊三角形組成的。我們把圓心到角的距離稱作六邊形的外徑。

有外徑自然就有內(nèi)徑，就是圓心到每條邊中心的距離。這個常量很重要，因為相鄰六邊形之間的距離剛好是這個值的兩倍。

內(nèi)徑的長度等于外徑的?

?倍，所以在當(dāng)前邊長下內(nèi)徑的值就是?

?。把這些常量放在一個靜態(tài)類中方便取用。

內(nèi)徑是如何計算的？
取組成六邊形的六個等邊三角形中的一個，內(nèi)徑就是這個三角形的高，把這個三角形中中間分開成兩個直角三角形，即可用勾股定理求得。
對于邊長e,內(nèi)徑為:?

此外還需要定位中心的六邊形單元格。六邊形有兩種定位方式，要么是尖的朝上，要么是平的朝上。這里我們選前一種方式，并把朝上的第一個角作為起點，然后順時針添加其余角的頂點，在世界坐標系的XZ平面構(gòu)建六邊形。

2 網(wǎng)格構(gòu)建

創(chuàng)建一個六邊形的網(wǎng)格就需要定義每一個單元格。為此創(chuàng)建一個HexCell腳本。目前就空著，暫時還不需要任何單元格數(shù)據(jù)。

一開始很簡單，創(chuàng)建一個默認的Plane,把HexCell腳本掛上去,并創(chuàng)建成預(yù)制體。

下面輪到創(chuàng)建HexGrid腳本,并定義寬度、高度和單元格預(yù)制體這幾個公共變量。在場景中新建一個空對象掛載這個腳本。

先從創(chuàng)建一個標準的正方形網(wǎng)格開始，并把單元格存儲在數(shù)組里，以便之后訪問。

默認的Plane是10乘10的大小,所以以此為基準調(diào)整每個單元格的位置。

如此一來就生成了一個嚴絲合縫的正方形網(wǎng)格，但同時也不好識別每個單元格分別的位置。對于正方形網(wǎng)格也許還比較容易推算出來，但在六邊形網(wǎng)格中就不好辦了。如果這時能分別看到所有單元格的坐標就很方便了。

2.1 顯示單元格坐標

在場景中添加一個canvas組件(GameObject / UI / canvas)并使其成為HexGrid的子物體。因為這是一個純用來顯示信息的canvas,所以可以刪除上面的附帶的raycaster組件。基于同樣的理由，自動添加的EventSystem也可以刪了,暫時都用不到。

把canvas的渲染模式設(shè)置為World Space,繞X軸旋轉(zhuǎn)90度。將其軸心和坐標全部歸零，并給予一個輕微的垂直向上偏移量，這樣顯示的內(nèi)容就會出現(xiàn)在網(wǎng)格上面。canvas的寬度和高度都不重要,我們自己會定位顯示內(nèi)容,你可以全部歸零來消除場景中canvas的矩形預(yù)覽框。

最后把Dynamic Pixels Per Unit屬性修改為10，確保文本有一個合適的字體紋理分辨率。

創(chuàng)建一個Text組件對象(GameObject / UI / text)并設(shè)為預(yù)制體,用來顯示坐標。確保其錨點和軸心居中，大小設(shè)置為5x15。文本對齊方式也設(shè)置為水平和處置居中，字體大小設(shè)置為4。

最后，刪除默認顯示的文本也不啟用Rich Text。是否啟用RaycastTarger也不重要,canvas不會調(diào)用。

現(xiàn)在HexGrid腳本中需要引用canvas和text的預(yù)制體,添加UnityEngine.UI的頭部引用就能訪問這些類型。text預(yù)制體可以通過公共變量靜態(tài)引用,canvas就直接調(diào)用GetComponentInChildren（）找到。

腳本中獲取text預(yù)制體的引用后就可以實例化并顯示每個單元格的坐標,在X和Z之間添加一個換行符,這樣就能顯示在不同的行間。

2.2 六邊形的位置

現(xiàn)在我們可以直觀地識別每個單元格了,開始對單元格的位置進行移動。通過之前的分析我們可以知道在X軸方向上，每個六邊形單元格的相對距離是其內(nèi)徑的2倍，同時每行之間的距離應(yīng)該是其外徑的1.5倍。

當(dāng)然，連續(xù)的六邊形單元格位置并不是在彼此的上下方，而應(yīng)該在X軸上以內(nèi)徑為基準偏移。我們可以把Z軸偏移的一半加到X軸上然后乘以內(nèi)徑的兩倍。

現(xiàn)在的網(wǎng)格的形狀是是個菱形而不是矩形，由于使用矩形更為方便，我們強制讓Z軸上的單元格回到直線上。通過減去部分X軸上的偏移量來實現(xiàn)這個目的，每隔一行所有的X軸上的單元格應(yīng)該都后退一點，具體的值通過相乘之前減去Z軸偏移的整數(shù)倍除以2就行了。

3.渲染六邊形

當(dāng)位置確定后就可以把工作轉(zhuǎn)移到渲染實際的六邊形上了。首先移除默認的Plane,HexCell預(yù)制體上除了腳本其它組件全部刪除。

就像在Mesh Basics系列教程中所做的一樣，我們用單個Mesh來呈現(xiàn)整個網(wǎng)格。但這一次不打算預(yù)先確定需要多少個頂點和三角形了，將使用列表來代替數(shù)組作為存儲容器。

創(chuàng)建一個新的腳本HexMesh來管理Mesh,它需要MeshFilter和MeshRenderer組件,一個Mesh對象與保存其頂點和三角形的列表。

在HexGrid上創(chuàng)建一個空的子對象并掛載此腳本,會自動添加MeshFilter和MeshRenderer組件。然后再添加一個默認的材質(zhì)球。

現(xiàn)在HexGrid腳本可以像獲取canvas組件一樣獲取HexMesh。

當(dāng)HexGrid調(diào)用Awake()獲取HexMesh后,HexMesh才能三角化單元格，所以這里要確保調(diào)用順序在Awake()之后。在MonoBehaviour的生命周期里Start()是在Awake()之后的,所以在這里執(zhí)行。

HexMesh.Triangulate ()可能在任何時候調(diào)用，即使在之前已經(jīng)對單元格三角化的情況下也是如此。所以首先從清理舊數(shù)據(jù)開始，然后循環(huán)遍歷所有單元格分別對它們進行三角剖分。這一步進行完之后將生成的頂點和三角形數(shù)據(jù)賦值給Mesh,最后重新計算Mesh的法線。

因為六邊形是三角形組成的，比較直觀的方式是通過給定的三個頂點創(chuàng)建添加三角形的方法，按順序往列表里添加頂點并把這些頂點的下標相連形成三角形。第一個頂點的下標等于添加新頂點之前頂點列表的長度，所以在添加頂點之前先保存它。

現(xiàn)在可以從第一個三角形開始試試效果，它的第一個頂點應(yīng)該是六邊形的中心點，另外兩個頂點是相對于中心的第一個和第二個角的頂點。

可以看到?jīng)]問題，接下來就循環(huán)六次渲染剩下的的三角形。

我們不能共用頂點么？
當(dāng)然可以，甚至可以做的更好，只使用四個，而不是六個三角形來組成一個六邊形。但不這么做會讓接下來的工作更簡單，也許現(xiàn)在優(yōu)化頂點數(shù)是個不錯的點子，但隨著教程的進展事情反而會變得更復(fù)雜。現(xiàn)在優(yōu)化頂點和三角形只會礙事。

不過這樣寫會產(chǎn)生一個數(shù)組越界的異常，這是因為最后一個三角形會試圖獲取不存在的第七個角。這時候應(yīng)該繞回到第一個角作為它的最終頂點。但在不改變代碼邏輯的情況下也可以用點小技巧，在HexMetrics.corners中復(fù)制第一個角作為第七個角，這樣就不用擔(dān)心數(shù)組越界問題了。

4.六邊形的坐標

現(xiàn)在來觀察一下六邊形網(wǎng)格里每一個單元格的坐標,Z軸方向的坐標看起來沒問題,但是X軸方向的坐標看起來是呈鋸齒狀的。這是我們?yōu)榱俗尵W(wǎng)格整體呈現(xiàn)一個矩形而強行偏移每一行坐標產(chǎn)生的副作用。

直接處理六邊形網(wǎng)格的坐標偏移不太方便，讓我們添加一個HexCoordinates結(jié)構(gòu)體用來在不同的坐標系中轉(zhuǎn)換。將其序列化以便Unity在運行模式也能識別它,并且在屬性中只公開get確保坐標不可改動。

提前先創(chuàng)建一個轉(zhuǎn)換成常規(guī)偏移坐標的靜態(tài)轉(zhuǎn)換方法，具體的等會寫，現(xiàn)在先直接返回參數(shù)的值。

再添加一個字符串轉(zhuǎn)換方法。默認的ToString()方法返回的是結(jié)構(gòu)體的類型名,這顯然沒法用。所以重載這個方法讓其返回當(dāng)前結(jié)構(gòu)的坐標值。同樣的再添加一個分成兩行顯示坐標的方法，因為現(xiàn)在的顯示用的就是這樣的格式。

現(xiàn)在可以給HexCell聲明一個坐標了。

這時候就可以修改HexGrid.CreateCell，用新的坐標獲取方法。

現(xiàn)在我們修改X軸上的坐標，令其在一條直線上對齊，通過去掉水平偏移實現(xiàn)。

目前這個二維坐標系可以讓我們在四個方向上描述移動和偏移量，但是在一個單元格中可是有六個相鄰單元格，剩下的兩個方向去哪了？這表明了其實還存在第三個維度，事實上水平翻轉(zhuǎn)一下X軸就可以得到那條缺失的Y軸。

當(dāng)X軸和Y軸互為鏡像的情況下，如果Z軸不變，那么三個坐標相加應(yīng)該總會得到一樣的結(jié)果。事實上當(dāng)你這么做時會發(fā)現(xiàn)這個結(jié)果總是0。如果你在一個軸向上增加坐標，另一個軸上就會減少，這就產(chǎn)生了六個可能的移動方向。這些坐標通常稱為立方體坐標，因為它是三維的,其拓撲結(jié)構(gòu)類似于立方體。

因為所有的坐標加起來一定等于0，所以你總是可以從其他兩個坐標中得到另一個坐標。我們目前已經(jīng)存儲了X和Z的坐標，就不需要存儲Y的坐標了?？梢詣?chuàng)建一個屬性包含計算它的方法，并在ToString()方法中使用。

4.1 在inspector上顯示坐標。

運行模式中選中網(wǎng)格中的一個單元格，只有HexCell.coordinates的前綴名而并沒有顯示具體坐標值。

雖然這不是什么大問題，但如果能顯示坐標值會顯得整潔美觀?，F(xiàn)在沒有顯示是因為坐標值沒有標記成序列化字段，為此需要顯示定義一下。

現(xiàn)在顯示倒是顯示出來了，但是是可編輯狀態(tài)的。我們并不想這樣，因為按道理來說坐標是固定不變的，而且顯示在下面也不好看。

我們可以通過為HexCoordinates制定一個自定義的特性來讓它做得更好。創(chuàng)建一個HexCoordinatesDrawer腳本放在Editor文件夾下，這是一個只用于編輯器的腳本。這個類應(yīng)該擴展自UnityEditor.PropertyDrawer，并需要UnityEditor.CustomPropertyDrawer特性來讓其正確關(guān)聯(lián)起來。

PropertyDrawers通過OnGUI（）方法顯示其內(nèi)容，該方法提供了要在其中繪制的屏幕矩形、序列化的屬性數(shù)據(jù)以及它所屬的字段的標簽。

從屬性中提取X和Z的值并用它們新建一個坐標，然后用重載的ToString()方法在指定位置繪制GUI標簽。

這樣坐標就顯示出來了，但是類型名丟失了。名字之類的通常使用EditorGUI.PrefoxLabel()方法繪制。有個額外的好處是它返回一個經(jīng)過調(diào)整的矩形，與該標簽名右側(cè)的空間剛好匹配。

5.點擊單元格

如果不能交互那這個六邊形的網(wǎng)格也沒什么意思。最基本的交互方式就是點擊定位單元格，接下來我們就試著去實現(xiàn)它?，F(xiàn)在先把這部分代碼寫在HexGrid里，一旦一切正常，就把這段代碼搬到別的位置去。

實現(xiàn)這個功能可以通過鼠標向場景打射線的方式，和Mesh Deformation?(https://catlikecoding.com/unity/tutorials/mesh-deformation/)教程中的使用方式一樣。

這些代碼現(xiàn)在什么都干不了，我們需要現(xiàn)在網(wǎng)格上添加碰撞盒好讓射線能檢測到。

并在三角化之后給Collider的Mesh賦值。

不能就用BoxCollider么?
可以,但是沒法精確吻合Mesh的輪廓。而且我們的Mesh不會一直都是平的，不過那是之后教程的部分了。

現(xiàn)在能點擊網(wǎng)格了，但是不知道具體點擊的是哪一個。為了弄清楚這個，需要從鼠標點擊的位置轉(zhuǎn)換成六邊形的坐標。這是HexCoordinates的工作，所以在其中聲明一個靜態(tài)方法FromPosition()。

這個方法該怎么計算選中的是哪個六邊形？可以同過X值除以六邊形的水平寬度，然后因為Y是X的鏡像，通過負的X得到Y(jié)。

不過這只在Z為零的時候才是對的，Z的坐標遞增時需要向左移動單元格。

現(xiàn)在X和Y計算完成，因為需要的是每個單元格中心的整數(shù)坐標，所以四舍五入一下，Z的值也能推導(dǎo)出來，然后構(gòu)筑最后的輸出坐標。

看起來似乎沒問題，但這些坐標都正確么？仔細研究一下你會發(fā)現(xiàn)，有可能所有坐標加起來不等于0。在這種情況下報一個警告確保真的發(fā)生了。

事實上得也到警告信息了，似乎只發(fā)生在鼠標點擊的位置接近六邊形的邊界的時候。所以是四舍五入那出了問題，因為離單元格的中心越遠，四舍五入舍去的值就越多，所以我們做一個合理的假設(shè)：舍去值更大的坐標是錯誤的。

最后解決方法就變成了廢棄具有最大舍去增量的坐標值，然后用其它的兩個坐標去重新構(gòu)建它。這里我們只需要去重建X和Z，不用為Y費神，因為Y本來就是由X和Z求得的。

5.1 為單元格著色

顯現(xiàn)點擊單元格的坐標是正確的,在此基礎(chǔ)上做一些真正的交互：改變點擊單元格的顏色。在HexGrid聲明一個默認的顏色和點擊變化的顏色。

在HexCell中添加一個公共的顏色字段:

在HexGrid.CreateCell（）中賦值默認的顏色:

同樣的還要在HexMesh中添加顏色信息:

當(dāng)三角化時,我們也需要給每個三角形添加顏色。另外分出一個方法去實現(xiàn)這個功能。

回到HexGrid.TouchCell里。整個流程就是先轉(zhuǎn)換單元格坐標為保存單元格的數(shù)組下標。在四邊形網(wǎng)格中就是X+Z乘以寬度，但在這里還需要加上一半的Z軸偏移。獲取到點擊的單元格后改變其顏色，然后再次三角化整個Mesh。

我們真的需要重新三角化整個Mesh么?
這里可以玩點花樣,但現(xiàn)在還不是進行此類優(yōu)化的時候。在后面的教程中Mesh會變得越來越復(fù)雜,現(xiàn)在做的任何假設(shè)和玩的花樣過些時候都會無效。但是重新三角化整個Mesh這種野蠻的方式無論在什時候都是有效的。

盡管現(xiàn)在顏色已經(jīng)改變了，但我們什么都沒看到。這是因為默認的著色器沒有應(yīng)用頂點顏色。我們現(xiàn)在需要創(chuàng)建一個自定義的著色器（Assets / Create / Shader / Default Surface Shader），它只需要做兩處改動：

1.在輸入結(jié)構(gòu)中添加顏色信息

2.輸出時讓反射率與顏色相乘。

當(dāng)材質(zhì)不透明時只用關(guān)心RGB通道。

新建一個材質(zhì)球應(yīng)用這個自定義的著色器，然后替換原來的材質(zhì)球，單元格的顏色就能顯示出來。

我得到了一些奇怪的陰影效果！
在某些Unity版本中,自定義表面著色器會遇到陰影問題。如果你遇到了陰影抖動或帶狀陰影問題，說明Z軸發(fā)生了沖突。校準方向光的陰影偏斜應(yīng)該能解決這個問題。

6.地圖編輯

現(xiàn)在我們把顏色編輯功能做成一個專門的編輯器，這就超出了HexGrid的功能范圍了。所以把TouchCell()方法設(shè)為公共并添加額外的參數(shù)。同樣要刪除touchedColor字段。

創(chuàng)建一個HexMapEditor腳本,然后把Update和HandleInput方法移動到這里,添加一個公共字段引用HexGrid,一個存儲顏色的數(shù)組,一個私有字段保記錄當(dāng)前顏色。最后添加一個公共方法選擇顏色，并確保當(dāng)前選擇的顏色是數(shù)組中的第一個。

另外新建一個canvas,這一次保持默認的設(shè)置,把HexMapEditor腳本添加到這里,添加若干顏色并把HexGrid拖入字段中。這一次需要EventSystem組件了，并且它也會隨著新建canvas再次自動創(chuàng)建。

在canvas上添加一個用來選擇顏色的面板,根據(jù)顏色數(shù)量添加若干toggle組件(Components/ UI/toggle),放在屏幕的一角。

為每個toggle指定顏色，我們現(xiàn)在不需要花哨的UI，只要它足夠清楚易用就行。

確保只有第一個toggle被選中,并確保都在一個toggle group中,這樣一次只能有一個toggle被選中。最后在編輯器中把他們與SelectColor()方法關(guān)聯(lián)起來。

這個事件在每次選擇變化時提供一個布爾參數(shù)表明這個toggle是否被選中。但是我們不需要關(guān)心這個。相反我們需要手動提供一個符合顏色數(shù)組下標的我們希望選中的整數(shù)型的參數(shù)。所以設(shè)置第一個為0，第二個為1，以此類推。

toggle的事件方法是什么時候調(diào)用的?
當(dāng)每次選中的toggle變化時,就會調(diào)用這個方法。如果這個方法有一個布爾類型的參數(shù)，它會告訴我們這個toggle是否被選中。
當(dāng)我們的toggle在一個組中,選中一個不同的toggle首先會取消選中當(dāng)前被選中的toggle,然后選中現(xiàn)在選中的。這意味著SelectColor（）方法會調(diào)用兩次。這是對的，因為第二次的調(diào)用才是我們需要關(guān)心的。

雖然UI只是一個功能性的組件，但是會有一個煩人的細節(jié)。移動UI面板使其覆蓋到六邊形網(wǎng)格上。在選擇顏色時同時也會改變UI下的單元格的顏色。同時進行UI和場景中的交互是沖突的。

可以通過詢問事件系統(tǒng)是否檢測到鼠標位于某個對象之上來解決這個問題。因為它只能檢測UI對象，這表明我們在與UI交互。所以我們應(yīng)該只在這種情況下自己處理輸入。

本期工程文件:https://github.com/tank1018702/Hex-Map-Learning/tree/CreatingAHexagonalGrid

想系統(tǒng)學(xué)習(xí)游戲開發(fā)的童鞋，歡迎訪問?http://levelpp.com/??????

游戲開發(fā)攪基QQ群：869551769???