關(guān)于繪制障礙物邊緣的處理
? ? ???
????????--首先感恩鳴謝@小明童鞋提出的問題和美術(shù)資源，思考問題的過程很有趣。
????????--其次感謝@寒冰童鞋還沒做完的校對工作。
????????設(shè)想一種情景，我們需要設(shè)計一些在有限方格內(nèi)隨機生成的障礙物策略，那么首先我們需要把地圖網(wǎng)格化，比如長這樣：
????????對于隨機格子產(chǎn)生障礙物來說，這里有很多種策略，因為我們主要是討論障礙物邊緣的處理，這里就手動選定一些格子來代表產(chǎn)生的障礙物。
????????這樣的障礙物看上去太單調(diào)啦，作為邏輯圖導(dǎo)入程序處理肯定是沒問題，但是我們希望他的美術(shù)效果要好一點，比如rimworld那樣
????????雖然是2D資源，但是加上這些邊緣處理之后，整個墻體的感覺出來了，再輔以陰影光照之類的效果，可以做到欺騙玩家的眼睛了，相比于邏輯圖來說，這樣會極大加強玩家的體驗感。但我們要怎么做才能讓邊緣處理真實合理呢？
????????聰明的你可能已經(jīng)想到了，把所有的預(yù)設(shè)方塊都畫出來，然后根據(jù)位置信息來選擇使用具體哪一個方塊，就像很多俯視角2D游戲正在做的那樣
????????如果我們要做的是一個隨機生成的地圖，那么就需要將所有的預(yù)設(shè)情況羅列出來，那么問題就變成了我們需要多少種預(yù)設(shè)呢？
????????要計算這個問題，不妨嘗試一下窮舉。首先是最基本的單獨方塊，他在表現(xiàn)上會是這樣：
????????順便我們引入邏輯圖，這里用0和1來表示格子內(nèi)的障礙物情況，0為空1則為實；而紅色部分表示我們需要做處理的格子（實際上每格都需要處理，這里只是單元化方便后續(xù)遍歷操作）。
????????周圍的8格分別會在不同的情況下，對中心格造成影響，從而影響其形狀，下面會舉例說明。比如觀察這個邏輯圖，他所產(chǎn)生的形狀會是怎樣的呢？
????????對于紅色區(qū)域來說，他在表現(xiàn)上應(yīng)當(dāng)是這樣：
????????同理對于位于紅色區(qū)域上面的“1”格來說，他也會受到相應(yīng)的影響，從而在表現(xiàn)上為：
????????由于九宮格在四方向上的對稱性，所以當(dāng)“1”的位置改變到↑→↓←四個方向時，會產(chǎn)生四種變化。那么更深一步地考慮這個問題，當(dāng)我們的邏輯圖由現(xiàn)在的情況變化為下圖的時候，相應(yīng)的紅色區(qū)域會發(fā)生變化嗎？
????????我們直接把表現(xiàn)畫出來：
????????可以看到，雖然在上方“1”的位置產(chǎn)生了Inner(內(nèi)陷角)的圖案，但紅色區(qū)域并沒有因此產(chǎn)生變化，也就是沒有受到九宮格外部四個拐角的狀態(tài)影響。那是否外部拐角本身便不會對紅色區(qū)域產(chǎn)生影響呢？
????????答案顯然是否定的，我們簡單對比兩種情況就可以發(fā)現(xiàn)不同。
????????他們所產(chǎn)生的表現(xiàn)應(yīng)當(dāng)是這樣的：
????????可以看到，第二張圖的部分依舊產(chǎn)生了Inner部分，而第一張圖的對應(yīng)部分為Fill(填充)模式。
--這里有個需要澄清說明的點，可以看到在筆者的實例圖在邊緣處理方面，實際美術(shù)視角看上去會比較低，Inner部分已經(jīng)只體現(xiàn)在頂部pattern和幾像素點的差別。因此在某些項目中，會簡單粗糙地將其處理為一種情況，這里為了方便說明原理，還是從數(shù)學(xué)原理上將所有的可能性羅列出來。這也反映了，根據(jù)不同的實際項目需求，處理方式上也會有天差地別，但是需要了解原理，之后采取何種方式去適應(yīng)就變得得心應(yīng)手了。
????????我們繼續(xù)對邊角的情況分析，將目光聚焦到某個拐角也就是這個2*2的區(qū)域，還是由于對稱性的原因：
????????這兩種情況對于紅色區(qū)域來說，其拐角狀態(tài)并不會影響到紅色區(qū)域的狀態(tài)。那么我們便可以得出結(jié)論：
????????--只有當(dāng)與當(dāng)前格子和對角格子均相鄰的格子狀態(tài)鋪滿時，對角格子的狀態(tài)才會對當(dāng)前格產(chǎn)生影響，且影響范圍為2種--
????????這句話可能看上去比較難理解，講人話就是只有當(dāng)藍(lán)色部分的值都為1時，白色格子里的值才會對紅色格子產(chǎn)生影響，且由于白色格子有兩種取值方式，所以對應(yīng)的紅色格子會有兩種狀態(tài)。
????????當(dāng)我們得出來這個基本原理之后，我們對于九宮格便會把它分成兩種情況來考慮，藍(lán)色區(qū)域只要變動則一定會對紅色區(qū)域產(chǎn)生影響，白色區(qū)域只有在特定情況下才會產(chǎn)生影響。
我們要計算其所有種類的話，其實只要分步思考即可。
① 情況0：藍(lán)色區(qū)域中沒有“1”
????????共計種類數(shù)：0C4 = 1
② 情況1：藍(lán)色區(qū)域中有且只有一個"1"
????????共計種類數(shù)：1C4 = 4
③ 情況2：藍(lán)色區(qū)域中有且只有兩個“1”
????????注意，此種情況下，總數(shù)應(yīng)為2C4 = 6種
????????但其中包含了4種相鄰情況和2種對角情況，示意圖如下
????????在相鄰情況下，對應(yīng)的一個拐角狀態(tài)會影響到紅色區(qū)域的狀態(tài)所以需要*2
????????在對角情況下，拐角的狀態(tài)并不會造成影響，所以不需要*2
????????分別對應(yīng)的情況數(shù)為：4種和2C4-4 = 2種
--這里稍微提一句這個4是怎么來的，因為看起來我們好像只是完成了一次窮舉來把4種可能的情況列出，但實際上我們可以將藍(lán)色區(qū)域看成一個圓環(huán)上的四個點，就像是手鏈上的四個珠子，由于數(shù)據(jù)的順序讀取，我們按照不同的順序去讀則種類為4--
????????再將它們分別乘以拐角造成的影響值，分別為：
????????????????4*2^1 = 8種
????????????????(2C4-4)*2^0 = 2種
④ 情況3：藍(lán)色區(qū)域中有且只有3個“1”
????????共計種類數(shù)：3C4 = 4
????????注意這種情況下，不論怎么組合，一定會有兩個拐角影響程度，所以需要*2^2也就是*4
????????那么共計種類數(shù)為：3C4*2^2 = 16種
⑤ 情況4：四個藍(lán)色區(qū)域全部為“1”
????????在這種情況下，紅色區(qū)域僅會受到拐角狀態(tài)的影響，所以需要*2^4也就是*16
????????而藍(lán)色區(qū)域情況為4C4 = 1
????????所以共計為：4C4*2^4 = 16種
????????至此，我們將所有的種類想加，得到總計數(shù)量為sum = 1+4+8+2+16+16 = 47種
????????但實際上應(yīng)該是48種啦，因為我們還要考慮如果紅色區(qū)域本身沒有值會怎樣，那當(dāng)然是一片空白啦。這與我們窮舉出來的情況吻合：
????????本文寫到這里，實際上你已經(jīng)可以拿一套資源去unity里面練練手了，比如使用RuleTile功能將這些模塊全綁上去。
????????但實際上我會覺得這種做法非常的麻煩（其實主要是對于出美術(shù)資源的@小明同學(xué)來說非常的麻煩，我打不過他所以只能考慮下別的解決方案）
????????我們仔細(xì)觀察或者思考就會發(fā)現(xiàn)，其實在很多種變化里，紅色區(qū)域的格子只有四個角的某個會發(fā)生變化，那我們何不將他們拆開來，然后分別賦予呢？
????????比如對于此圖來說，紅色陰影區(qū)域的狀態(tài)只會受到左上，上和左3個格子的狀態(tài)影響，因此我們只需要統(tǒng)計到一個待處理區(qū)域的九宮格，原理上我們根據(jù)其周圍的狀態(tài)便可將四個小區(qū)域分別給出。這里需要用到一個sprite混合的方法，具體大家可以去看前人鋪路的文章。
????????比如這篇：https://blog.csdn.net/mkr67n/article/details/117030977
????????我們的原理便是，基于一張邏輯圖，將所有格子的信息記錄下來，然后根據(jù)其周圍信息來動態(tài)生成格子狀態(tài)，我們只需要給其提供1*1的構(gòu)成圖即可，而構(gòu)成圖一共幾種呢？13種！
????????雖然我覺得網(wǎng)上應(yīng)該也有相關(guān)的理論例子可以看，但并不妨礙我們給它起個炫酷的名字，不如就叫《炫酷的CBIF邊緣處理方法吧》。
????????哦對了，有生之年我應(yīng)該會把Unity的sample整理好發(fā)上來，做成一個懶人工具的樣式方便大家取用。
????????能看到這里的都是真愛了吧，那無以為報留下一個思考題吧：
????????上述內(nèi)容都是基于四邊形地塊而言的，如果我們需要做3D或者是六邊形格子地塊的邊緣處理呢？
