如何渲染网络图片_初探精灵中的网格渲染模式 ！

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

当 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.Spritethis.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 必读

“在看”是最大的鼓励▼