支持合图,支持
gizmo
添加节点和调整位置,支持缩放旋转。文章底部获取完整项目!
效果预览与使用
原理
回顾
在gizmo入门探索介绍了gizmo
与多边形裁剪的配合。
在使用 mesh 实现多边形裁剪图片 中介绍了mesh
和切耳法的相关使用。
相比mask
组件,这种meshRenderer
的实现可以降低两个draw call
。
因为小伙伴使用的比较多,这边对这个多边形裁剪图片进行一次升级,增加易用性!
升级后添加了以下几个特性:
升级版本至Cocos Creator 2.4
(一些接口的变化)
支持gizmo
直接添加多边形节点
支持节点缩放旋转后,gizmo
的正确显示
支持合图,图片资源可以勾选packable
接下来就大致讲解主要特性的原理吧。
分割多边形
这次不采用切耳法分割分割了,而是采用poly2tri这个库去分割(注意这个库有严格的限制)。
主要计算顶点索引过程如下。
//计算顶点索引constids=[];//多边形切割poly2tri,支持简单的多边形,确保顶点按顺序且不自交constcountor=this.vertexes.map((p)=>{return{x:p.x,y:p.y}});constswctx=newpoly2tri.SweepContext(countor,{cloneArrays:true});swctx.triangulate();consttriangles=swctx.getTriangles();triangles.forEach((tri)=>{tri.getPoints().forEach(p=>{consti=countor.indexOf(pasany);ids.push(i);});})mesh.setIndices(ids);
支持合图
引用一张@GT
的图。
在SpriteFrame
里含有这个uv
信息,这里可以做一次转换,先计算0~1
的比例,再做一次转化坐标。
private_lerp(a:number,b:number,w:number){returna+w*(b-a);}
constuv=this.spriteFrame.uv;consttexture=this.spriteFrame.getTexture();/***t*lr*b*/constuv_l=uv[0];constuv_r=uv[6];constuv_b=uv[3];constuv_t=uv[5];//计算uvconstuvs=[];for(constptofthis.vertexes){constu=this._lerp(uv_l,uv_r,(pt.x+texture.width/2+this.offset.x)/texture.width);constv=this._lerp(uv_b,uv_t,(pt.y+texture.height/2-this.offset.y)/texture.height);uvs.push(cc.v2(u,v));}mesh.setVertices(gfx.ATTR_UV0,uvs);
gizmo 增加多边形顶点
整体思路是先根据所有顶点画线段,给线段添加事件监听,在点击位置添加一个节点。
点击转换坐标有个坑,y
的坐标要用一个高度减去后再转换(感谢@GT
的pr)。
start:(x,y,event,param)=>{y=this._view.offsetHeight-y;//坐标转换letposition=cc.v2(x,y);position=Editor.GizmosUtils.snapPixelWihVec2(position);position=this._view.pixelToWorld(position);position=node.convertToNodeSpaceAR(position);}
gizmo 支持旋转缩放
整体来说,就是将坐标点先做缩放,再做旋转处理即可。
this._tool.plot(target.vertexes.map((p)=>{letscaleX=node.scaleX;letscaleY=node.scaleY;letangle=-node.angle*Math.PI/180;constcos_angle=Math.cos(angle);constsin_angle=Math.sin(angle);constv=Editor.GizmosUtils.snapPixelWihVec2(p.mul(this._view.scale));returncc.v2((v.x*cos_angle*scaleX+v.y*sin_angle*scaleY),-(-v.x*sin_angle*scaleX+v.y*cos_angle*scaleY));}),position);
小结
坐标转换!旋转!跳跃!不停歇!
以上为白玉无冰使用Cocos Creator v2.4
实现"多边形裁剪!"
的技术分享。如果对你有帮助,欢迎点赞(在看
)让我知道,这代表你对白玉无冰的认可。
知识不过是潜在的力量,只有将它组织成明确的行动计划,并指引它朝着某个明确目的发挥作用的时候,知识才是力量。
更多
支持
感谢大家一直以来的支持。除了打赏
支持,还可以点点这两个ad播放器,ad播放器1,AD 播放器2。
/baiyuwubing/cocos-creator-examples