EgreWing带透明Image点击区域测试

EgreWing带透明Image点击区域测试

问题

Egret中使用带Aplha图片,虽然合了图集,但是点击区域依旧使用源图片的矩形区域判定。界面上的点击事件完全无法控制,非所见即所得。目前没查到官方有提供合理的解决方案。

所以只能从本源来想办法:图片边缘的空白区域不应那么多,是吧?

新的问题来了:

  • 最简单情况:该图片是单张图片,比如单张UI,那可以直接找美术修改该图片,边缘处理一下,这个还好(这是UI的锅无疑)。

  • 复杂一点:以特效序列帧为例,你可能会说也单张处理,但这样动画一播放就会发现中心点对不上。所以还是只能按单组动画只能按一个统一大小来输出。而如果每个特效的底图尺寸都不一样的话,显然很影响工作效率。一般美术的处理肯定是统一一个大小的背景,如512x512或者1024x1024。放到别的引擎如unity中合图集之后毫无问题,Egret真的坑。。

  • 复杂一点:人物avatar,各个部位组装输出,只能以统一的规格,如1024*1024,这样各部位的动画偏移才能方便编辑存储,这种情况不在本文讨论之列。


按钮是否可以点击测试:

  • image_big.touchEnabled = true; 点击不到

  • image_big.touchEnabled = true; 可以点击

  • group.touchEnabled = true; image_big.touchEnabled = true; 点击不到

  • group.touchEnabled = true; image_big.touchEnabled = false; 点击不到

  • group.touchEnabled = false; image_big.touchEnabled = false; 可以点击


继续探讨

有人说,可以把group和image的touchEnabled都设为false。是的。wing编辑的时候你把每一层父节点都设置一下,这里可以临时解决问题(相信我,你不会愿意这样去编辑的)。

而且,就算手动逐个编辑,list组件我们也会经常使用,list下的ItemRender默认的selected是使用外层group的事件来触发的,全部禁用的话,又需要自己去加按钮,写选中切换逻辑,程序会很费事。。

综上,还是从源头上解决。思路:读取该序列帧每张图片的区域,计算出可以包住所有图片的外圈范围,在1024*1024的大图基础上裁剪每张图片,生成统一的大小。。单张图片就当做只有一帧的序列帧来处理。如下图:三张序列帧的范围frame1,frame2,frame3,最终导出3张最外圈大小的图片。

写工具

使用Python的PIL-Image库最适合,具体实现参见我的另一篇文章:
Python裁剪序列帧空白区域-CutImage-https://blog.csdn.net/liyaxin2010/article/details/84196790


其他

裁剪之后的图片在wing上编辑也是所见即所得,策划编辑好UI,看到的区域和实际点击的区域统一,就不会出现加一个特效,换一张图片,明明没有挡着后面的按钮,却又点不到了之类的无聊问题。。



参考

发布了41 篇原创文章 · 获赞 27 · 访问量 5万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览