CocosCreator 基于Assembler实现的图片切割破碎效果及自定义遮罩 |
您所在的位置：网站首页 › 破碎效果图片大全大图可爱 › CocosCreator 基于Assembler实现的图片切割破碎效果及自定义遮罩 |
CocosCreator 基于Assembler实现的图片切割破碎效果及自定义遮罩
|
更多笔记，请关注公众号： QQ群：521643513 Cocos引擎源码位于CocosCreator.app/Contents/Resources/engine/cocos2d/(Mac版本), 以下使用CocosEngine代替路径 效果展示 1, 自定义渲染组件—TexturePlus
=========== 3, 图片切割效果
=========== 4, 图片破碎效果
=========== 5, 碎片掉落效果
=========== 浅析Assember源码路径位于 CocosEngine/core/renderer/assembler.js 对于Assembler的个人理解, Assembler中的核心是顶点数据, 每个顶点都有位置,uv信息, 通过改变顶点的位置和uv信息, 就可以实现一些例如 只显示图片的一部分区域,图片部分区域拉伸(九宫格也是基于这个实现的). 且修改顶点数据并不会打断合批,性能有保障. 而在Cocos中每一个渲染组件,例如cc.Sprite,cc.Label,cc.Graphics等, 它们都继承于RenderComponent, 且都有一个对应的Assembler从而实现不同的渲染效果.[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8QSLuvXr-1609931515309)(./cocos-dir-1.png)]; Assembler提供两个静态方法, register和init. register方法将渲染组件和Assembler绑定,init方法用于初始化Assembler. 自定义Assembler自定义Assembler的核心就是将顶点数据填充到renderdata中 Assembler的实现可以参考 Assembler2D, 源码位于CocosEngine/core/renderer/assembler-2d.js // 将这5个属性注入Assembler2D.prototype内 cc.js.addon(Assembler2D.prototype, { floatsPerVert: 5, // 一个顶点所需的空间 xy两个,uv两个,color一个 verticesCount: 4, // 顶点个数 indicesCount: 6, // 三角形顶点个数 uvOffset: 2, // uv在buffer中的偏移量, colorOffset: 4, // color在buffer中的偏移量 // 格式如 x|y|u|v|color|x|y|u|v|color|x|y|u|v|color|...... // 当然也可以自定义格式 }); export default class Assembler2D extends Assembler { constructor () { super(); this._renderData = new RenderData(); this._renderData.init(this); this.initData(); this.initLocal(); } // 计算总共所需的空间大小 get verticesFloats () { return this.verticesCount * this.floatsPerVert; } initData () { let data = this._renderData; data.createQuadData(0, this.verticesFloats, this.indicesCount); } // 更新顶点颜色信息 updateColor (comp, color) {} // 更新顶点坐标信息 updateWorldVerts (comp) {} // 将renderdata中的数据填充到buffer中, 也计算填充了三角形顶点索引 fillBuffers (comp, renderer) {} } cc.Assembler2D = Assembler2D; 简单概况一下就是: 计算每个顶点的position,uv,color(可以不要),以及三角形顶点索引,然后赋值到buffer内就行了,提供三角形顶点索引 是因为gpu绘制图像都是绘制了一个个三角形而成, 换而言之三角形是最小绘制单元而顶点内的信息只需要在顶点发生变化时才需要更新编辑器内可编辑的多边形区域的实现, 可以看之前那篇MaskPlus, 里面实现了如何实现一个自定义多边形遮罩以及自定义Gizmo. 计算顶点的世界坐标用上图显示图片的自定义多边形区域为例, 首先计算好多边形顶点数组polygon, polygon是基于结点坐标的, 且按逆时针排序. 计算过程可以直接参考我之前写的maskplus protected updateWorldVerts(comp: TexturePlus) { if (CC_NATIVERENDERER) { this.updateWorldVertsNative(comp); } else { this.updateWorldVertsWebGL(comp); } } protected updateWorldVertsWebGL(comp: TexturePlus) { let verts = this._renderData.vDatas[0]; let matrix: cc.Mat4 = comp.node['_worldMatrix']; let matrixm = matrix.m, a = matrixm[0], b = matrixm[1], c = matrixm[4], d = matrixm[5], tx = matrixm[12], ty = matrixm[13]; let justTranslate = a === 1 && b === 0 && c === 0 && d === 1; let floatsPerVert = this.floatsPerVert; if (justTranslate) { let polygon = comp.polygon; for(let i=0; i 0 ^ BC.cross(BD) >= 0); }在assembler中的使用 将这一步的计算不要放到fillBuffer内, 因为并不需要每帧计算, 只需要在修改顶点时计算即可 this.indicesArr = CommonUtils.splitPolygonByTriangle(comp.polygon); ---------------------------------------------------------------------------- let ins = this.indicesArr; for(let i=0; i> 2, vbuf = buffer._vData; if (vData.length + vertexOffset > vbuf.length) { vbuf.set(vData.subarray(0, vbuf.length - vertexOffset), vertexOffset); } else { vbuf.set(vData, vertexOffset); } // fill indices let ibuf = buffer._iData, indiceOffset = offsetInfo.indiceOffset, vertexId = offsetInfo.vertexOffset; // vertexId是已经在buffer里的顶点数，也是当前顶点序号的基数 let ins = this.indicesArr; for(let i=0; i |
感谢群内大佬 honmono 的分享，也欢迎同学们入群交流
【本文地址】
今日新闻 |
推荐新闻 |