用 Cocos Creator 做一個(gè)物理畫(huà)線游戲！支持 UGC 關(guān)卡創(chuàng)作和微信關(guān)卡分享

游戲的核心玩法是玩家通過(guò)畫(huà)線保護(hù)自己的小雞，讓其免受黑洞中掉下的障礙小雞、或地圖上的其他障礙傷害。

考慮到制作成本，游戲美術(shù)使用了簡(jiǎn)單的手繪風(fēng)格，用 paletton 選擇類(lèi)似紙張的顏色，拖動(dòng)色盤(pán)，把比較順眼的方案保存起來(lái)，確定游戲整體的風(fēng)格。

色板中用到的顏色統(tǒng)一可以使用圓角矩形縮到最小（比如 15px，就輸出成 15+15+2=32px，預(yù)留2個(gè) px 給九宮格拉伸用），游戲所有的 UI 框架加起來(lái)就只有幾 KB，減少顯存的同時(shí)，還可以提高加載速度。

考慮到 spine 專業(yè)版數(shù)千元的價(jià)格，游戲內(nèi)的動(dòng)畫(huà)效果統(tǒng)一使用了 Cocos 內(nèi)置的動(dòng)畫(huà)編輯器+序列幀動(dòng)畫(huà)。序列幀動(dòng)畫(huà)使用 PS 制作，在畫(huà)好我們的角色后，PS 內(nèi)復(fù)制數(shù)個(gè)分組，調(diào)整角色的五官，輸出序列幀，一些相似的做了剔除，減少動(dòng)畫(huà)的體積占用。

在 Cocos 內(nèi)制作序列幀動(dòng)畫(huà)比較簡(jiǎn)單。幀動(dòng)畫(huà)使用30幀，新建好動(dòng)畫(huà)，并在精靈上面創(chuàng)建好動(dòng)畫(huà)組件，在對(duì)應(yīng)的關(guān)鍵幀替換圖片即可。

制作好的序列幀動(dòng)畫(huà)無(wú)需進(jìn)行合并，拖入到一個(gè)文件夾內(nèi)，使用 Cocos 自帶的自動(dòng)圖集打包即可。

考慮到游戲的背景是一個(gè)紙上世界、同時(shí)需要支持 UGC 和簡(jiǎn)單的 AI，我們需要一個(gè)圖片背景+網(wǎng)格。然而使用圖片背景+網(wǎng)格圖片不夠靈活，同時(shí)做出來(lái)的效果會(huì)比較死板，缺少隨機(jī)性，因此我從 shadertoy 上移植了一個(gè)紙張網(wǎng)格的效果。

原 shader 的 for 循環(huán)比較多，且風(fēng)格比較寫(xiě)實(shí)，這里進(jìn)行了一定的簡(jiǎn)化。

同時(shí)考慮到算法簡(jiǎn)單，這里不做屏幕分辨率的適配了，默認(rèn)的設(shè)計(jì)分辨率是 750x1334，支持的最大顯示高度是 750x2.2倍=1650（絕大多數(shù)全面屏手機(jī)的最大高度）。

uv 統(tǒng)一后，我們需要設(shè)置一下網(wǎng)格顯示，默認(rèn)黃色是安全區(qū)域坐標(biāo)，表示可以放置物體或者有物體，紅色是危險(xiǎn)區(qū)域，表示不可以放置物體。

如果需要使用自己的圖片作為背景，可以打開(kāi) Use_Texture 的宏，使用 750x1650 的背景拖即可。

有了上述的準(zhǔn)備工作，我們就可以開(kāi)始地圖編輯器的制作了。

接下來(lái)根據(jù)格子的奇數(shù)或者偶數(shù)決定落點(diǎn)的位置，可以分為 x 和 y 兩周軸向分開(kāi)處理。

如果是偶數(shù)就不需要做偏移，在格子中間落點(diǎn)即可，如果是奇數(shù)，需要偏移1個(gè)格子單位，同時(shí)偶數(shù)的格子用 Math.floor 求最小的整數(shù)格子，奇數(shù)用 Math.round 四舍五入求最近的格子。

當(dāng)我們檢測(cè)到碰撞體時(shí)候，當(dāng)前物體的周?chē)蜁?huì)變紅，存在碰撞體的周?chē)恢脮?huì)表黃。

游戲內(nèi)定義了幾種物體的名字的枚舉，當(dāng)他們的名字一致時(shí)候，初始化時(shí)候就會(huì)標(biāo)記為是畫(huà)線工具，刪除工具或者旋轉(zhuǎn)工具，當(dāng)使用這些工具檢測(cè)到結(jié)果時(shí)候，就會(huì)對(duì)選中物體標(biāo)亮并進(jìn)行對(duì)應(yīng)操作。

當(dāng)保存關(guān)卡時(shí)候，我們只需要記錄物件的格子開(kāi)始和結(jié)束范圍，也就是之前 map 保存的數(shù)據(jù)，同時(shí)記錄物件的 scale.x 和 scale.y 記錄左右和上下方向的旋轉(zhuǎn)，保存為 json 數(shù)據(jù)，再把 json 數(shù)據(jù) Stringify 即可。

下面介紹游戲的核心邏輯部分。

游戲的核心邏輯是使用 Graphics 畫(huà)線，并把畫(huà)線的路徑點(diǎn)記錄下來(lái)，同時(shí)我們的地圖編輯器也會(huì)使用到這個(gè)功能來(lái)畫(huà)輔助線。

游戲環(huán)境和編輯器環(huán)境使用了不同的長(zhǎng)度設(shè)置，編輯器會(huì)更短，來(lái)保證儲(chǔ)存的關(guān)卡長(zhǎng)度足夠小。

畫(huà)線的第一個(gè)點(diǎn)，我們使用了開(kāi)銷(xiāo)最低的 testPoint，記錄是否存在碰撞體。第二個(gè)點(diǎn)開(kāi)始，從上個(gè)點(diǎn)到當(dāng)前點(diǎn)發(fā)射一條射線進(jìn)行檢測(cè)。

需要注意的是，這里的坐標(biāo)點(diǎn)需要使用物體的世界坐標(biāo)。

當(dāng)畫(huà)線結(jié)束，就可以根據(jù)路徑點(diǎn)去生成碰撞體。這里直接使用了 polygon 多邊形生成碰撞體，已經(jīng)生成的碰撞體在關(guān)卡開(kāi)始的時(shí)候，會(huì)回收使用到的 vec2 類(lèi)，減少 GC。

我們首先把每2個(gè)點(diǎn)連成一條線，再對(duì)比每條線之間方向向量的斜率。考慮到性能，這里沒(méi)有使用三角函數(shù)，斜率在一定范圍內(nèi)，就判斷為是平行的，只會(huì)去推第二條線的最后一個(gè)點(diǎn)。

這樣我們參與計(jì)算的路徑點(diǎn)就可以減少 30%-40%，我們用優(yōu)化過(guò)的路徑點(diǎn)再來(lái)算需要生成的 polygon 多邊形，這里把起始點(diǎn)定為1，結(jié)束點(diǎn)定為2，其他中間點(diǎn)是0。

先計(jì)算出2個(gè)點(diǎn)之前的方向向量。

再計(jì)算方向向量上，2個(gè)垂直方向的向量，分別乘以我們線段一半的寬度，最后起始點(diǎn)和結(jié)束點(diǎn)分辨加上這2個(gè)向量，就可以得到3個(gè)或者4個(gè)路徑點(diǎn)，可以構(gòu)建出一個(gè)三角形或者平行四邊形（考慮到起始點(diǎn)和結(jié)束點(diǎn)可能貼邊，這里使用了三角形，避免碰撞沖突的修正）。

生成了多邊形的路徑點(diǎn)后，我們需要額外 apply() 一下，我們所有的 vec2 都從 VecPool 單例內(nèi)存儲(chǔ)，減少 GC。

這里額外支持了 Graphic 的自定義材質(zhì)，玩家可以在游戲內(nèi)更換畫(huà)筆的顏色。

這里使用了 Cocos 原本的 update，當(dāng)切換狀態(tài)時(shí)候會(huì)先執(zhí)行 onEnter 方法，再執(zhí)行 onUpdate 方法，這里可以把當(dāng)前狀態(tài)和之前狀態(tài)傳入，方便做邏輯切換，這里會(huì)記錄下 dt 和 duration 時(shí)長(zhǎng)，方便繼承狀態(tài)機(jī)的類(lèi)使用。

小黑子的 AI 繼承了 FSM 狀態(tài)機(jī)，整個(gè)狀態(tài)比較簡(jiǎn)單，只有尋路和攻擊兩個(gè)狀態(tài)。