用鼠标编辑的多边形裁剪! gizmo 插件入门 ! Cocos Creator!

原创
2020/02/14 08:45
阅读数 546

在编辑器用鼠标拖动顶点编辑多边形形状!文章底部获取完整代码[1]

效果预览:

使用 mesh 实现多边形裁剪图片!这篇文章中介绍了一种不用 mask 实现多边形裁剪的一种方法。

其中有一步编写顶点感觉不是很方便。想着要是能够像cc.PolygonCollider组件那样可编辑该多好!

于是通过查看引擎源码,进入编辑器开发者工具(搜索gizmo),解压app.asar(解压失败),都没找到可参考的代码!

最后,只能通过gizmo 官方文档[2]gizmo api 文档[3]重新写一个了。

新建一个扩展包。

扩展包里的 package.json 中定义 gizmos 字段, 并注册上到 mesh-texture-mask 的脚本上。

"gizmos": {    "mesh-texture-mask": "packages://points-polygon/main.js"}

参考 自定义 Gizmo 进阶[4] 中的代码,编写插件。

这个插件需要画出顶点坐标,根据组件脚本的顶点坐标画出多个小圆。需要注意的是,顶点坐标需要乘以编辑器的缩放系数。参考代码如下。

this._tool.plot = (points, position) => {  // 移动到节点位置  this._tool.move(position.x, position.y);  // 清除原来的点  circles.forEach(v => v.radius(0));  // 画圆点  points.map((v, i) => {    // this._view.scale 编辑器缩放系数    v = Editor.GizmosUtils.snapPixelWihVec2(v.mul(this._view.scale));    let circle = circles[i];    if (!circle) {      circles[i] = circle = this._tool.circle()        // 设置 fill 样式        .fill({ color: 'rgba(0,128,255,0.8)' })        // 设置点击区域,这里设置的是根据 fill 模式点击        .style('pointer-events', 'fill')        // 设置鼠标样式        .style('cursor', 'move')      // 注册点击事件      this.registerMoveSvg(circle, i, { cursor: 'pointer' });    }    circle.center(v.x, -v.y).radius(10 * this._view.scale);  })};

同样的,对于点击回调事件,也要乘以编辑器缩放系数。

{    update: (dx, dy, event, i) => {        // 获取 gizmo 依附的组件        let target = this.target;        if (!start_vertex) {            start_vertex = target.vertexes[i].clone();        }        target.vertexes[i].x = start_vertex.x + dx / this._view.scale;        target.vertexes[i].y = start_vertex.y + dy / this._view.scale;        target.vertexes = target.vertexes;    }}

以上为白玉无冰使用 Cocos Creator v2.2.2 开发"gizmo 插件入门"的技术分享。有什么想法欢迎留言交流!如果这篇对你有点帮助,欢迎分享给身边的朋友。



使用卷积实现各种滤镜效果!shader 编程实战!Cocos Creator!

飘扬的旗帜!shader 编程实战!Cocos Creator!

使用 mesh 实现多边形裁剪图片!Cocos Creator!

如何实现高抛平抛发射?从抛物线说起!Cocos Creator!

竟然可以用 effect 玩水?Cocos Creator 3D !

为何你的弹球如丝般顺滑?不停歇的球!技术分享!源码相送!

2D / 3D 往期精选!附送 github 地址!Cocos Creator !

原创不易!转载请保留文末二维码,以及完整代码获取方式!

本文仅供个人交流学习使用,请勿用于其他用途

[1] 完整代码: https://github.com/baiyuwubing/cocos-creator-examples/tree/master/meshTexture
[2] gizmo 官方文档: https://docs.cocos.com/creator/manual/zh/extension/custom-gizmo.html
[3] gizmo api 文档: https://docs.cocos.com/creator/manual/zh/extension/api/editor-framework/renderer/gizmo.html
[4] 自定义 Gizmo 进阶: https://docs.cocos.com/creator/manual/zh/extension/custom-gizmo-advance.html

点击阅读原文查看完整代码

我就知道你“在看”▼

本文分享自微信公众号 - 白玉无冰(lamyoung-com)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部