cocos creator-Assembler2D

Assembler2D

fillBuffers 方法解读
顶点数据格式
参考

fillBuffers 方法解读

/*** Assembler 意为装配器* * fillBuffer()是简单的字节流拷贝，只关心数据长度，不关心数据内容** fillBuffer()每帧都会被调用，是热点代码，需要关注效率。但是_renderData顶点数据不是每一帧都会更新*/
fillBuffers (comp, renderer) {// 如果节点的世界坐标发生变化，重新从当前节点的世界坐标计算一次顶点数据if (renderer.worldMatDirty) {this.updateWorldVerts(comp);}// 获取准备好的顶点数据let renderData = this._renderData;// vData包含pos、uv、color数据// vData的类型是 Float32Array// 一张simple图片,vData数值如下（其实Label也是一样的，会作为一个图片来渲染，所以顶点信息也一样），长度为20（4个顶点数据，每个顶点数据包含posX,posY,uvX,uvY,color 共5个值，数组长度为 4*5 = 20）// 数组内容：   [10.180180549621582, 270, 0.0009765625, 0.001953125, NaN, 110.18018341064453, 270, 0.001953125, 0.001953125, NaN, 10.180180549621582, 370, 0.0009765625, 0.0009765625, NaN, 110.18018341064453, 370, 0.001953125, 0.0009765625, NaN]// 每个值的含义：posX                posY uvX           uvY         color// 4个顶点数据的顺序是 ： 左下 -> 右下 ->左上 ->右上 四个点// 对于posX,posY 的值，是确确实实的该点在 cocos全局坐标系下的值。也就是 左下角为（0,0）// 我们可以posX 和posY 的值进行修改，那么就会得到了扭曲的变形的图片。那么我们其实可以通过定义顶点填充，来展示不同的效果。// 如果我们设置为slice type九宫格， 那么顶点数为 4*4  = 16个顶点。vData 的长度就是 16 * 5 = 80let vData = renderData.vDatas[0];// iData包含三角剖分后的顶点索引数据// iData类型为 Uint16Array// 测试一张图片的数值如下，一个图片，也就是一个四边形（有四个顶点）。需要拆分为两个三角形。那么需要六个索引号。// [0, 1, 2, 1, 3, 2]// 我们可以做如下测试，比如将[0, 1, 2, 1, 3, 2] 顶点索引改掉，那么会显示不同的裁剪结果显示出来。// 如果我们设置为slice type九宫格， 一个四边形为6的索引，那么9个四边形 顶点索引数为 9 * 6 = 54 let iData = renderData.iDatas[0];// 获取顶点缓存let buffer = this.getBuffer(renderer);// 获取当前节点的顶点数据对应最终buffer的偏移量// 可以简单理解为当前节点和其他同格式节点的数据，都将按顺序追加到这个大buffer里// 一张simple图片，verticesCount 就为 4 ，代表顶点数量。 indicesCount 就为6，代表顶点索引数量。// 如果我们设置为slice type九宫格的一张图片， verticesCount 就为 16 ，代表顶点数量。 indicesCount 54；// 目前还没搞懂tiled的顶点数量怎么计算的，就是特别多。let offsetInfo = buffer.request(this.verticesCount, this.indicesCount);// 填充顶点信息 fill vertices// vbuf 是最终产出的 顶点数据集合（多个图片）// vbuf 是一个5120长度的 Float32Array，默认里面全部值都是0。若是普通的图片,那么每20个长度，就刚好保存一个完整的四边形pos,uv,color数据// 比如我们有两个图片，那么vbuf index 0~19 表示第一个图的顶点数据。20~39表示第二个图的顶点数据// 这里是每个图片，获取到的自己在数组中的偏移量，然后偏移量开始将新的顶点数据填进去（刷新或填入数据）let vertexOffset = offsetInfo.byteOffset >> 2,vbuf = buffer._vData;// 将准备好的vData拷贝到vbuf:VetexBuffer里。if (vData.length + vertexOffset > vbuf.length) {// 这里会判断如果buffer装不下了，vData会被截断一部分。// 通常不会出现装不下这种情况，因为buffer.request中会分配足够大的空间；如果出现，则当前组件只能被渲染一部分vbuf.set(vData.subarray(0, vbuf.length - vertexOffset), vertexOffset);} else {// 直接拷覆盖进去，vertexOffset为偏移值（可以认为是数组的index，填充长度当然就是 vData的长度）。vbuf.set(vData, vertexOffset);}// 将准备好的iData拷贝到IndiceBuffer里// ibuf 是最终产出的 顶点数据索引集合// ibuf 是一个1536长度的 Uint16Array，默认里面全部值都是0。若是普通的图片,那么每6个长度，就刚好保存一个完整的四边形顶点索引数据// 比如我们有两个图片，那么ibuf index 0~5 表示第一个图的顶点索引数据。6~11表示第二个图的顶点索引数据// 注意存储的值有一点不一样。比如每张图的顶点索引肯定是 0 1 2 3 ，但是最终填入ibuf的时候，是做了处理的：// 第一个图的索引为 0~ 3  ，第二个图的索引为 4 ~ 7 。按此规律做偏移的。let ibuf = buffer._iData,indiceOffset = offsetInfo.indiceOffset,vertexId = offsetInfo.vertexOffset;for (let i = 0, l = iData.length; i < l; i++) {ibuf[indiceOffset++] = vertexId + iData[i];}}

顶点数据格式

    var vfmtPosUvColor = new gfx.VertexFormat([// 节点的世界坐标，占2个float32{ name: gfx.ATTR_POSITION, type: gfx.ATTR_TYPE_FLOAT32, num: 2 },// 节点的纹理uv坐标，占2个float32// 如果节点使用了独立的纹理（未合图），这里的uv值通常是0或1// 合图后的纹理，这里的uv对应其在图集里的相对位置，取值范围在[0,1)内{ name: gfx.ATTR_UV0, type: gfx.ATTR_TYPE_FLOAT32, num: 2 },// 节点颜色值，cc.Sprite组件上可以设置。占4个uint8 = 1个float32{ name: gfx.ATTR_COLOR, type: gfx.ATTR_TYPE_UINT8, num: 4, normalize: true },]);

参考

GT大佬   https://forum.cocos.org/t/demo/95087

cocos creator-Assembler2D相关推荐

Cocos Creator入职学习日记——篇1（KeyWord：艺术字、渐变色、透明过渡特效）
刚入职,事情不是特别多,看到了之前一直在找的Cocos Creator的一些使用技巧,简做记录目录一.艺术字二.渐变色三.透明过渡特效四.分享时间一.艺术字 Cocos Creator的艺 ...
Cocos Creator 预制的使用模板（一般用于UI）
Cocos Creator里绑定properties @property(cc.Prefab)XXUIPrefab: cc.Prefab = null; 在预制上挂脚本 import { Consta ...
Cocos Creator 的动作（Action）系统:moveBy的使用
Cocos Creator 快速上手:制作第一个游戏可以在这里感受一下这款游戏的完成形态: http://fbdemos.leanapp.cn/star-catcher/ 准备项目和资源我们已经为 ...
cocos creator 安卓原生平台环境_竞技对抗小游戏单挑篮球开发历程 | Cocos技术派第12期...
本文来自于"Cocos 荣耀讲师"征稿活动第1期,最先发表于 Cocos 中文社区,作者 ID:蟹老板,2017年加入社区,文章作品包括<猎头专家的开发历程>等. Co ...
asp.net js函数弹出登录窗口_JS基础 | Cocos Creator 开发环境搭建
编程并不只是简单地写代码,而是要将编写的代码运行在指定平台环境上,在此之前我们还需要搭建生产代码的环境. 一. 软件准备 Chrome:浏览器,用于预览.调试我们的游戏 VSCode:代码编辑器,用于 ...
Cocos Creator—最佳构建部署实践
这篇文章主要是我们团队在使用Cocos Creator过程中的一些关于部署方面的实践总结,标题党了一回,严格来说,应该是<快看漫画游戏研发团队使用Cocos Creator构建部署最佳实践> ...
Cocos Creator快速开通联网服务教程
继集成Egret编辑器工作流后,在最新的Cocos Creator v2.0.7 版本中, Creator服务面板也集成了游戏服务器引擎Matchvs的联网服务.现附上开通教程,方便大家更快上手. 1 ...
5弹出阴影遮罩_千文详述Cocos Creator弹出式对话框实现技术，着实硬核
正文在Cocos Creator游戏开发中,经常需要使用到弹出式对话框,下面我们就一起来封装下自己的弹出式对话框. 一.弹出式对话框原理解析 1:对话框的结构: 1. `根节点 -->`2. ...
cocos creator 获取当前时间_前端开发者入门 Creator 必读吧
写在前面因为公司的业务需求,近期学习了Cocos Creator这款游戏引擎的开发,也基于此上线了一款游戏,因此写这系列文章记录一下我从入门到项目发布的学习过程. 相对于 web 开发,像Cocos ...
Cocos Creator学习目录
目录安装和启动文件结构编辑器基础基本概念 (场景树节点坐标组件 ) Cocos Creator 脚本简介 Cocos Creator调试节点 cc.Node 组件开发cc.Compon ...

cocos creator-Assembler2D

Assembler2D

fillBuffers 方法解读

顶点数据格式

参考

cocos creator-Assembler2D相关推荐

最新文章

热门文章