"初探精靈(Sprite)中的網格(Mesh)渲染模式 ！ Cocos Creator ! "
小朋友你是否有很多問號？
當 Sprite 組件選擇渲染模式 Mesh 時，圖片會沒了？
翻翻官方文檔看看這個是什麼東西？
按照文檔，下載 TexturePacker 並導出，拖到編輯器內，改成 Mesh 果然出現圖片了。
請無視上面的紅碼，因爲是免費版的，導出的時候自動加碼了。
好了，該開始研究一下該怎麼用這個 (Mesh)渲染模式 。
除了使用 TexturePacker 導出的資源，我們還可以通過代碼去實現這個網絡模式。
先看看 MeshSpriteAssembler 的源碼。
可以看到在 sprite.spriteFrame 中有一個數據 vertices。
vertices 非常像在 使用 mesh 實現多邊形裁剪圖片 中介紹的 cc.Mesh。
根據命名和源碼，大概可以猜到 vertices 中的每個參數的含義。
x，位置座標x的數組。y，位置座標y的數組。nu，紋理座標u的數組。nv，紋理座標v的數組。triangles，頂點索引數組。
可以嘗試一下傳入一些數據進去。
// this.sp // cc.Sprite
this.sp.spriteFrame.vertices = {
x: [0, 100, 100],
y: [0, 0, 100],
nu: [0, 1, 1],
nv: [0, 0, 1],
triangles: [0, 1, 2],
}
// 標記頂點數據修改過了
this.sp.setVertsDirty();
效果如下。
可以看出來位置座標 x 和 y 是以左上角爲原點。紋理座標u 和 v 也是以左上角爲原點。
當然可以圍成一個正方形，這只需要四個頂點數據，和六個頂點索引就可以了。
再大致解釋一下這些東西。
通過上圖可以看出來，x y nu nv 構成了頂點數據。
triangles 構成了頂點索引，告訴它該以什麼順序畫三角形(0->1->2和2->3->0這兩個三角形)。因爲網絡都是以三角形組成的。
當然，這個 MeshSpriteAssembler 的頂點數據格式僅支持位置座標``紋理座標``顏色值這幾個數據。而且默認顏色值是固定寫一個值的。
如果要定製其他數據值，或者實現漸變效果，可以自定義 Assembler ，達到自定義渲染的效果。
https://docs.cocos.com/creator/manual/zh/advanced-topics/custom-render.html
這些內容且聽下回分解(挖一個坑)～
以上爲白玉無冰使用 Cocos Creator v2.3.3 關於 "精靈(Sprite)中的網格(Mesh)渲染模式"的技術分享。如果對你有點幫助，歡迎分享給身邊的朋友。