cocos-js,Widget的addTouchEventListener改善

前端之家收集整理的这篇文章主要介绍了cocos-js,Widget的addTouchEventListener改善前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、基本使用


addTouchEventListener是属于Widget下的触摸事件相关的操作,基本使用规则如下:

  1. var button = new ccui.Button()
  2. button.addTouchEventListener(this.touchEvent,this)
  3.  
  4. touchEvent: function (sender,type) {
  5. switch (type) {
  6. case ccui.Widget.TOUCH_BEGAN:
  7. this._topDisplayLabel.setString("Touch Down");
  8. break;
  9.  
  10. case ccui.Widget.TOUCH_MOVED:
  11. this._topDisplayLabel.setString("Touch Move");
  12. break;
  13.  
  14. case ccui.Widget.TOUCH_ENDED:
  15. this._topDisplayLabel.setString("Touch Up");
  16. break;
  17.  
  18. case ccui.Widget.TOUCH_CANCELED:
  19. this._topDisplayLabel.setString("Touch Cancelled");
  20. break;
  21.  
  22. default:
  23. break;
  24. }
  25. }

二、为何改善


现在的触摸事件只做监听,并没有相关逻辑上的判断,我们游戏在开发的过程中遇到一些不正常点击而导致的问题。例如:在场景跳转的时候,连续点击两次后,会push两场同样的场景,正常逻辑应该是只push一次。

三、如何改善


先看我在基于原事件基础上添加的一些类型:

  1. ccui.Widget.TOUCH_TYPE_TIMELY = 1 //及时:随时点击,随时响应
  2. ccui.Widget.TOUCH_TYPE_DELAY_AFTER = 2 //延时:随时点击,点击后马上响应,延时一段时间后,响应下次点击
  3. ccui.Widget.TOUCH_TYPE_DELAY_FRONT = 3 //延时:每次onEnter时,延时一段时间后,才能响应点击
  4. ccui.Widget.TOUCH_TYPE_ONCE = 4 //一次:只有一次点击机会,点击后对象触摸禁止,当onExit后恢复
  5. ccui.Widget.TOUCH_TYPE_ALL_BAN = 5 //所有:只有一次点击机会,点击后全屏触摸禁止,当onExit后恢复
  6. ccui.Widget.TOUCH_TYPE_DELAY_FRONT_AND_ALL_BAN = 11 //兼具:DELAY_FRONT和ALL_BAN

代码如下:

  1. ccui.Widget.prototype.addTouch = function(_func,_type,_time){
  2. var __type = _type || ccui.Widget.TOUCH_TYPE_TIMELY
  3. var __time = _time || 1
  4.  
  5. switch (__type){
  6.  
  7. case ccui.Widget.TOUCH_TYPE_TIMELY:
  8. this.addTouchEventListener(_func)
  9. break
  10.  
  11. case ccui.Widget.TOUCH_TYPE_DELAY_AFTER:
  12. //当触发点击事件时,将按钮的可触性设置为false,用delayTime延迟1秒后再设置为true
  13. var that = this
  14. var __func = function(_sender,_type){
  15. switch(_type){
  16. case ccui.Widget.TOUCH_ENDED:
  17. that.setTouchEnabled(false)
  18. _func(_sender,_type)
  19. that.runAction(cc.sequence(cc.delayTime(__time),cc.callFunc(function(){
  20. that.setTouchEnabled(true)
  21. }.bind(that))))
  22.  
  23. break
  24. }
  25. }
  26. this.addTouchEventListener(__func)
  27. break
  28.  
  29. case ccui.Widget.TOUCH_TYPE_DELAY_FRONT:
  30. //在onEnter事件中,将按钮的可触性设置为false,然后delayTime延迟1秒后再设置为true
  31. this.setOnEnterCallback(function(){
  32. this.setTouchEnabled(false)
  33. this.runAction(cc.sequence(cc.delayTime(__time),cc.callFunc(function(){
  34. this.setTouchEnabled(true)
  35. }.bind(this))))
  36. }.bind(this))
  37.  
  38. if (_func == null){
  39. return
  40. }
  41.  
  42. var __func = function(_sender,_type){
  43. switch(_type){
  44. case ccui.Widget.TOUCH_ENDED:
  45. _func(_sender,_type)
  46. break
  47. }
  48. }
  49.  
  50. this.addTouchEventListener(__func)
  51. break
  52.  
  53. case ccui.Widget.TOUCH_TYPE_ONCE:
  54. //当触发点击事件时,将按钮的可触性设置为false,在onExit事件中设置为true
  55. var that = this
  56. var __func = function(_sender,_type)
  57. that.setOnExitCallback(function(){
  58. that.setTouchEnabled(true)
  59. }.bind(that))
  60. break
  61. }
  62. }
  63. this.addTouchEventListener(__func)
  64. break
  65.  
  66. case ccui.Widget.TOUCH_TYPE_ALL_BAN:
  67. //当触发点击事件时,在最上层添加一层遮罩,吞噬掉所有触摸,在onExit事件中移除遮罩
  68. var that = this
  69. var __func = function(_sender,_type){
  70. switch(_type){
  71. case ccui.Widget.TOUCH_ENDED:
  72. gAddMask()
  73. _func(_sender,_type)
  74. that.setOnExitCallback(function(){
  75. gRemoveMask()
  76. }.bind(that))
  77. break
  78. }
  79. }
  80. this.addTouchEventListener(__func)
  81. break
  82.  
  83. case ccui.Widget.TOUCH_TYPE_ALL_BAN_AND_DELAY_FRONT:
  84. //组合,DELAY_FRONT和ALL_BAN
  85. this.setOnEnterCallback(function(){
  86. this.setTouchEnabled(false)
  87. this.runAction(cc.sequence(cc.delayTime(__time),cc.callFunc(function(){
  88. this.setTouchEnabled(true)
  89. }.bind(this))))
  90. }.bind(this))
  91.  
  92. var that = this
  93. var __func = function(_sender,_type)
  94. that.setOnExitCallback(function(){
  95. gRemoveMask()
  96. }.bind(that))
  97. break
  98. }
  99. }
  100. this.addTouchEventListener(__func)
  101. break
  102.  
  103. default:
  104. this.addTouchEventListener(_func)
  105. break
  106. }
  107.  
  108. }

遮罩层的实现:

  1. function gAddMask(){
  2. var __scene = cc.director.getRunningScene()
  3. var __mask_layer = __scene.getChildByName("MaskLayer")
  4. if(!__mask_layer){
  5. __mask_layer = new MaskLayer()
  6. __scene.addChild(__mask_layer,99999)
  7. __mask_layer.setName("MaskLayer")
  8. }else{
  9. __mask_layer.setSwallowTouches(true)
  10. }
  11. }
  12.  
  13. function gRemoveMask(){
  14. var __scene = cc.director.getRunningScene()
  15. var __mask_layer = __scene.getChildByName("MaskLayer")
  16. if(__mask_layer){
  17. __mask_layer.setSwallowTouches(false)
  18. }
  19. }
  20.  
  21. var MaskLayer = cc.Layer.extend({
  22.  
  23. ctor:function(){
  24. this._super()
  25.  
  26. cc.log("wade MaskLayer ctor")
  27.  
  28. this.listener = cc.EventListener.create({
  29. event: cc.EventListener.TOUCH_ONE_BY_ONE,swallowTouches: true,onTouchBegan: function (touch,event) {
  30. cc.log("wade MaskLayer onTouchBegan")
  31. return true
  32. },onTouchMoved:function (touch,event){
  33. cc.log("wade MaskLayer onTouchMoved")
  34. },onTouchEnded:function (touch,event){
  35. cc.log("wade MaskLayer onTouchEnded")
  36. },})
  37.  
  38. cc.eventManager.addListener(this.listener,this);
  39.  
  40. },setSwallowTouches:function(_bool){
  41. this.listener.setSwallowTouches(_bool)
  42. }
  43.  
  44. })

猜你在找的Cocos2d-x相关文章