分享Creator点击事件透明穿透问题

之前公司在做一个家园养成类游戏,主要是摆放一些家具,和家具移动、旋转等等,因为家具和房子都是45度角,因此有些大的家具,空白区域会很大,当把前面都做好之后,发现有时候点那些小家具的时候,总会选中那些大家具,因为事件被大家具的透明区域截取掉了,事件没有传到小家具,当时问官方有没有事件穿透,因为这些家具都是兄弟节点,没有冒泡事件,当时官方的回复是没有穿透,最近官方更新了,我也做好了这个透明点击穿透,来此和大家分享下,同时也是大力支持creator。
首先给节点添加事件:


首先把点击的点的坐标转换成局部的,然后创建一个节点矩形区域,下面cc.rectContainsPoint方法判断的是是否点击到此精灵上(官方对于这些都是有例子的),接下来就是我们的主要部分,判断透明:

onLucencyTouch方法就是判断点击的点是否透明,只需要把图片对象传进来即可,而上面setTouchSwallow方法是设置是否穿透用的,官方demo以及api都没有此方法说明,也是在网上找了半天找到的。
总结就是当点到透明区域的时候会return 0,也就是false然后把穿透设置成false然后就事件穿透了,下面的家具就会收到事件依旧判断是否是透明区域等,以此类推。而不是0的时候,设置事件禁止穿透,也就是下面的家具就不会收到事件了。

透明穿透大概就是这样了,第一次写帖子,希望大家能看懂,嘿嘿。
附上项目
assets.rar (59.0 KB)

21赞

感谢分享,技术贴必顶:smiling_imp:

感谢分享!楼主用的事件是传统的事件系统,建议改为基于 Creator 事件系统的方式,修改方式如下:

  1. 将触点是否应该穿透的判断放在一个 hitTest 函数中
  2. 对于需要这种透明穿透的节点,设置:node._hitTest = hitTest
  3. Node 原始的 _hitTest 源码在此

然后用 on 去注册触摸事件,应该也是可以满足需求的

7赞

技術帖必頂,感謝分享!!

技术贴必顶 有个小问题 如果整体适配缩放之后有没有可能位置会取不准?

不会,因为都是转换成局部坐标了

:+1::+1:nice

onLucencyTouch里面,每次都ctx.drawImage,会不会有效率问题呢?

MASK :slightly_smiling: :grinning:

每次都是draw的一个像素,没有效率问题,网页跑的没问题目前

大哥,你这个在安卓系统无效啊,模拟器也跑不起来

这条语句浏览器支持,模拟器不支持。

这块代码也是浏览器支持,模拟器不支持

他这是用canvas的属性,你模拟器用OpenGL是不支持的!

楼主的思路是可以的!
其实通常做法应该是通过鼠标坐标来计算出点击的在哪个tile上,然后通过tile的row,col,来判断是否是选中了
这tile区域的物件!

先谢谢楼主分享,我按楼主的方法去做,但提示getComponent(…).spriteFrame.getTexture(…).getHtmlElementObj is not a function是什么原因呢?求楼主解救

1赞

我也遇到楼上的这个问题,有解决吗?

楼上不是说了OpenGL不支持了吗,透明区域的判断用Polygon Collider组件来判断

新手:slightly_smiling: 谢谢楼上的

this.listenerCallBack = cc.eventManager.addListener(listener, self.node);这句代码获得一个EventListener对象,然后才能用该对象调用下面的函数实现穿透,前面版本我都用得很顺手:
setTouchSwallow: function(isSwallowTouch){
this.listenerCallBack.setSwallowTouches(isSwallowTouch);
},
可现在1.6版本cc.eventManager.addListene被废除了,现在用哪种方式注册事件可以获得EventListener对象?我试过了好几个方式都不行。

现在1.6.1版本 self.node.getComponent(cc.Sprite).spriteFrame.getTexture().getHtmlElementObj(); 这里获取不到对象了怎么弄呢,

@panda大神 找了一天啊,终于找到_hitTest能实现了,建议放到常用XX的地方. @jare好硬.