多边形裁剪图片与自定义 Gizmo !Cocos Creator Gizmo!
支持合图,支持
gizmo
添加节点和调整位置,支持缩放旋转。文章底部获取完整项目!
效果预览与使用
原理
回顾
在gizmo入门探索介绍了 gizmo
与多边形裁剪的配合。
在使用 mesh 实现多边形裁剪图片 中介绍了 mesh
和切耳法的相关使用。
相比mask
组件,这种meshRenderer
的实现可以降低两个draw call
。
因为小伙伴使用的比较多,这边对这个多边形裁剪图片进行一次升级,增加易用性!
升级后添加了以下几个特性:
升级版本至
Cocos Creator 2.4
(一些接口的变化)支持
gizmo
直接添加多边形节点支持节点缩放旋转后,
gizmo
的正确显示支持合图,图片资源可以勾选
packable
接下来就大致讲解主要特性的原理吧。
分割多边形
这次不采用切耳法分割分割了,而是采用poly2tri这个库去分割(注意这个库有严格的限制)。
主要计算顶点索引过程如下。
// 计算顶点索引
const ids = [];
// 多边形切割 poly2tri,支持简单的多边形,确保顶点按顺序且不自交
const countor = this.vertexes.map((p) => { return { x: p.x, y: p.y } });
const swctx = new poly2tri.SweepContext(countor, { cloneArrays: true });swctx.triangulate();
const triangles = swctx.getTriangles();
triangles.forEach((tri) => {tri.getPoints().forEach(p => {const i = countor.indexOf(p as any);ids.push(i);});
})
mesh.setIndices(ids);
支持合图
引用一张 @GT
的图。
在 SpriteFrame
里含有这个uv
信息,这里可以做一次转换,先计算 0~1
的比例,再做一次转化坐标。
private _lerp(a: number, b: number, w: number) {return a + w * (b - a);
}
const uv = this.spriteFrame.uv;
const texture = this.spriteFrame.getTexture();
/**
* t
* l r
* b
*/
const uv_l = uv[0];
const uv_r = uv[6];
const uv_b = uv[3];
const uv_t = uv[5];// 计算uv
const uvs = [];
for (const pt of this.vertexes) {const u = this._lerp(uv_l, uv_r, (pt.x + texture.width / 2 + this.offset.x) / texture.width);const v = 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;// 坐标转换let position = 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) => {let scaleX = node.scaleX;let scaleY = node.scaleY;let angle = -node.angle * Math.PI / 180;const cos_angle = Math.cos(angle);const sin_angle = Math.sin(angle);const v = Editor.GizmosUtils.snapPixelWihVec2(p.mul(this._view.scale));return cc.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。
https://github.com/baiyuwubing/cocos-creator-examples
多边形裁剪图片与自定义 Gizmo !Cocos Creator Gizmo!相关推荐
- cocos creator学习(七)音乐
目录 背景音乐 使用AudioSource组件 ①添加组件 ②脚本控制 直接脚本控制 ①声明 ②播放背景音乐(playMusic) 音效 直接脚本控制 ①声明 ②播放 ③停止 注意 背景音乐 使用Au ...
- 使用 mesh 实现多边形裁剪图片!Cocos Creator!
和 mask 裁剪图片说拜拜,用上高性能的 mesh + shader .文章底部获取完整代码! 效果预览: 使用方法: 创建一个空节点 添加用户脚本组件 mesh-texture-mask 添加图片 ...
- cocos creator如何实现微信好友自定义转发分享功能
摘要 cocos creator如何实现微信好友转发分享功能.用户在使用小游戏过程中,可转发消息给其他用户或群聊. 环境 cocos Creator 引擎2.4.3 编辑工具HBuild X 转发菜单 ...
- Cocos Creator 下载图片动态替换纹理
Date: 2022-04-19 Cocos Creator v3.4.2 assetManager.loadRemote方法, 示例代码如下: let headImg = this.headSpri ...
- cocos creator 设置开启canvas 透明后 半透明图片 不正常的 官方解决办法
cocos creator 设置开启canvas 透明后 半透明图片 不正常的 官方解决办法 必须用 one,one minus src alpha,否则 web 端的贴图渲染时会莫名其妙和 canv ...
- 【cocos creator 3.x】精灵图片不显示
精灵图片不显示 现象 原因 解决方案 现象 在cocos creator 3.2版本的使用中遇到了精灵图片无法展示的几个场景: 在prefab某个node下Sprite的图片无法显示 动态加载pref ...
- cocos creator 3.x 精灵不显示、加载动态图片、物理碰撞、人物跟随鼠标移动、碰撞后节点销毁
温馨提醒:即刻转去Unity3d 精灵不显示: 不要在空节点下直接添加组件 正确的做法是:在空节点(Node)上右键创建一个精灵才会给看到 或者直接拖曳一个图片放到场景编辑器中也可 cocos cre ...
- Cocos Creator 从下载图片到手机本地相册
在游戏中难免会有使用保存图片到本地的功能 比如二维码等 但是creator的方法是保存在他的游戏目录里 如果手机没有root是无法查看的 这个方法就是 把图片下载到游戏目录 然后在通过目录查找图片 然 ...
- Cocos Creator图片动态效果
Cocos Creator图片动态效果 1.呼吸效果 2.按钮抖动效果 停止当前节点动画 1.呼吸效果 this.node.runAction(cc.repeatForever(cc.sequence ...
最新文章
- python算法预测风险等级_一般算法水平到底什么样子才能秒杀Bat的笔试编程题?...
- oracle中使用sys_connect_by_path进行表中行值连接
- NSTimer注意内存泄露(真该死)
- hexo博客添加暗色模式_我如何将暗模式添加到我的网站
- springboot集成oauth2和JWT(授权码模式)
- 《ArcGIS Runtime SDK for Android开发笔记》——离在线一体化技术:离线矢量数据编辑...
- 启动tomcat和java步骤
- python解析dom,关于Python解析xml dom的简单应用
- 腾讯联手联通推出车联网“网卡”,打“内容”+“流量”的组合拳...
- Windows磁盘格式、分区格式及类型
- 更新pip后出现WARNING:pip is being invoked by an old script wrapper
- Error while extracting response for type
- AIO-3399J重新安装Ubuntu系统-刷新固件
- web应用程序的访问与服务器,本地机的带宽关系 + 带宽详解
- 手机如何打开开发者模式
- 【安卓开发】DrawerLayout+ToolBar报错:DrawerLayout must be measured with MeasureSpec.EXACTLY.
- 小米智能插座监控设备耗电,并自动断电
- css 媒体查询 移动端,媒体查询(pc端,移动端不同布局)
- 申宝股票-煤炭等周期股大跌
- 五子棋1.0(Java单机版)