初探精灵中的网格渲染模式 ！

小朋友你是否有很多问号？

当 Sprite 组件选择渲染模式 Mesh 时，图片会没了？

翻翻官方文档看看这个是什么东西？

https://docs.cocos.com/creator/manual/zh/components/sprite.htm

按照文档，下载 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

这些内容且听下回分解(挖一个坑)～

使用 mesh 实现多边形裁剪图片 和这篇讲解的地方有相通之处，可以结合着一起学习喔。

小结

以上为白玉无冰使用 Cocos Creator v2.3.3 的技术分享，再次感谢白玉无冰童鞋，如果您在使用 Cocos Creator 2D/3D 的过程中 get 了独到的开发心得、见解或是方法，欢迎随时向我们投稿，帮助更多开发者们解决技术问题哦~
更多精彩：腾讯光子团队是如何制作《最强魔斗士》的？520出海脱单指南，“大厂”的流量扶持策略Cocos Creator 物理挖洞教程！Creator 3D v1.1 里程碑版本，三大维度齐升级！腾讯光子《最强魔斗士》3D开发经验分享
新书推荐|零基础入门小游戏开发
你还在熬夜加班写 bug? 让小秘书来帮你
Cocos 插件开发者的福音来了，余额提现秒到账
Creator 2.3.3 更新说明，效率即是一切！
Creator 3D 官方中文视频教程，附素材源码
如何在 Creator 中优雅地嵌套 Prefab？
如何打通用户获取与变现的闭环实现稳定增长？
Analytics自定义事件功能详解，埋点分析利器Cocos Creator 开发原生游戏体验如何原生 3D 游戏《弹无虚发》是如何炼成的？微信小游戏首包超出4M之后技巧：微信如何设置星标？？
前端开发者入门 Cocos Creator 必读

“在看”是最大的鼓励▼