Cocos2d-js3.3虚拟摇杆的实现

前端之家收集整理的这篇文章主要介绍了Cocos2d-js3.3虚拟摇杆的实现前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
2015-04-03 09:51
虚拟摇杆是在手机格斗游戏中经常看到的一个东西,今天就来了解一下如何在cocos2d-js实现一个虚拟摇杆...

首先,先来看一下这个虚拟摇杆的效果

默认类型(Default):


跟随类型(Follow):


下面,来看一下我实现的这个虚拟摇杆的创建方法

[javascript] view plain copy
  1. varjoystick=newJoystick(res.JoystickBG_png,
  2. res.Joystick_png,
  3. 50,
  4. TouchType.DEFAULT,108); list-style:decimal-leading-zero outside; color:inherit; line-height:20px; margin:0px!important; padding:0px 3px 0px 10px!important"> DirectionType.ALL,248)"> sprite);
  5. joystick.setPosition(cc.p(100,100));
  6. joystick.setSpeedwithLevel1(1);
  7. joystick.setSpeedwithLevel2(2);
  8. //joystick.setOpacity(128);
  9. //joystick.setEnable(true);
  10. joystick.callback=this.onCallback.bind(this);
  11. this.addChild(joystick,101);

可以看到,构造函数中传进了6个参数,分别是:

遥控杆的背景(底盘)图、遥控杆图、底盘半径、触摸类型、方向类型和要控制的目标

其中,触摸类型分为:默认(DEFAULT)跟随(FOLLOW)

方向类型分为:四方位(上下左右)八方位(上下左右、左上左下、右上右下)全方位

然后,我们可以设置摇杆的位置、速度1、速度2、透明度、是否可用、绑定回调函数

这里解释一下,速度1和速度2,当控杆中心在底盘边缘,目标移动速度为速度2,否则移动速度为速度1

而绑定回调函数,是为了在控杆的角度变化时,能反馈过来,是否需要改变目标的朝向等。


最后,来看一下这个虚拟控杆类

copy
    varTouchType={
  1. DEFAULT:"DEFAULT",
  2. FOLLOW:"FOLLOW"
  3. };
  4. varDirectionType={
  5. FOUR:"FOUR",248)"> EIGHT:"EIGHT",108); list-style:decimal-leading-zero outside; color:inherit; line-height:20px; margin:0px!important; padding:0px 3px 0px 10px!important"> ALL:"ALL"
  6. varJoystick=cc.Node.extend({
  7. _stick:null,//控杆
  8. _stickBG://控杆背景
  9. _listener://监听器
  10. _radius:0,//半径
  11. _angle://角度
  12. _radian://弧度
  13. _target://操控的目标
  14. _speed:0,0); background-color:inherit">//实际速度
  15. _speed1:1,0); background-color:inherit">//一段速度
  16. _speed2:2,0); background-color:inherit">//二段速度
  17. _touchType://触摸类型
  18. _directionType://方向类型
  19. _opacity:0,0); background-color:inherit">//透明度
  20. callback://回调函数
  21. ctor:function(stickBG,stick,radius,touchType,directionType,target)
  22. {
  23. this._super();
  24. this._target=target;
  25. this._touchType=touchType;
  26. this._directionType=directionType;
  27. //创建摇杆精灵
  28. this._createStickSprite(stickBG,radius);
  29. //初始化触摸事件
  30. this._initTouchEvent();
  31. },108); list-style:decimal-leading-zero outside; color:inherit; line-height:20px; margin:0px!important; padding:0px 3px 0px 10px!important"> _createStickSprite:this._radius=radius;
  32. if(this._touchType==TouchType.FOLLOW)
  33. this.setVisible(false);
  34. //摇杆背景精灵
  35. this._stickBG=newcc.Sprite(stickBG);
  36. this._stickBG.setPosition(cc.p(radius,radius));
  37. this.addChild(this._stickBG);
  38. //摇杆精灵
  39. this._stick=newcc.Sprite(stick);
  40. this._stick.setPosition(cc.p(radius,radius));
  41. this._stick);
  42. //根据半径设置缩放比例
  43. varscale=radius/(this._stickBG.getContentSize().width/2);
  44. this._stickBG.setScale(scale);
  45. this._stick.setScale(scale);
  46. //设置大小
  47. this.setContentSize(this._stickBG.getBoundingBox());
  48. //设置锚点
  49. this.setAnchorPoint(cc.p(0.5,0.5));
  50. },248)"> _initTouchEvent:function()
  51. {
  52. this._listener=cc.EventListener.create({
  53. event:cc.EventListener.TOUCH_ONE_BY_ONE,248)"> swallowTouches:false,108); list-style:decimal-leading-zero outside; color:inherit; line-height:20px; margin:0px!important; padding:0px 3px 0px 10px!important"> onTouchBegan:this.onTouchBegan,248)"> onTouchMoved:this.onTouchMoved,108); list-style:decimal-leading-zero outside; color:inherit; line-height:20px; margin:0px!important; padding:0px 3px 0px 10px!important"> onTouchEnded:this.onTouchEnded
  54. });
  55. //如果存在相同的对象,将被移除
  56. this.setUserObject(this._listener);
  57. //添加触摸监听
  58. cc.eventManager.addListener(this._listener,this._stickBG);
  59. //计算角度并返回
  60. _getAngle:function(point)
  61. varpos=this._stickBG.getPosition();
  62. this._angle=Math.atan2(point.y-pos.y,point.x-pos.x)*(180/cc.PI);
  63. returnthis._angle;
  64. //计算弧度并返回
  65. _getRadian:this._radian=cc.PI/180*this._getAngle(point);
  66. this._radian;
  67. //计算两点间的距离并返回
  68. _getDistance:function(pos1,pos2)
  69. returnMath.sqrt(Math.pow(pos1.x-pos2.x,2)+
  70. Math.pow(pos1.y-pos2.y,2));
  71. function(touch,event)
  72. //触摸监听目标
  73. vartarget=event.getCurrentTarget();
  74. //如果触摸类型为FOLLOW,则摇控杆的位置为触摸位置,触摸开始时候现形
  75. if(target.getParent()._touchType==TouchType.FOLLOW)
  76. target.getParent().setPosition(touch.getLocation());
  77. target.getParent().setVisible(true);
  78. target.getParent().scheduleUpdate();
  79. true;
  80. }
  81. else
  82. //把触摸点坐标转换为相对与目标的模型坐标
  83. vartouchPos=target.convertToNodeSpace(touch.getLocation());
  84. //点与圆心的距离
  85. vardistance=target.getParent()._getDistance(touchPos,target);
  86. //圆的半径
  87. varradius=target.getBoundingBox().width/2;
  88. //如果点与圆心距离小于圆的半径,返回true
  89. if(radius>distance)
  90. target.getParent()._stick.setPosition(touchPos);
  91. }
  92. false;
  93. //触摸监听目标
  94. vartarget=event.getCurrentTarget();
  95. //把触摸点坐标转换为相对与目标的模型坐标
  96. vartouchPos=target.convertToNodeSpace(touch.getLocation());
  97. //点与圆心的距离
  98. //圆的半径
  99. varradius=target.getBoundingBox().width/2;
  100. if(radius>distance)
  101. target.getParent()._stick.setPosition(touchPos);
  102. else
  103. varx=target.getPositionX()+Math.cos(target.getParent()._getRadian(touchPos))*target.getParent()._radius;
  104. vary=target.getPositionY()+Math.sin(target.getParent()._getRadian(touchPos))*target.getParent()._radius;
  105. target.getParent()._stick.setPosition(cc.p(x,y));
  106. //更新角度
  107. target.getParent()._getAngle(touchPos);
  108. //设置实际速度
  109. target.getParent()._setSpeed(touchPos);
  110. //更新回调
  111. target.getParent()._updateCallback();
  112. onTouchEnded://如果触摸类型为FOLLOW,离开触摸后隐藏
  113. if(target.getParent()._touchType==TouchType.FOLLOW)
  114. target.getParent().setVisible(false);
  115. //摇杆恢复位置
  116. target.getParent()._stick.setPosition(target.getPosition());
  117. target.getParent().unscheduleUpdate();
  118. _setSpeed://触摸点和遥控杆中心的距离
  119. vardistance=this._getDistance(point,153); font-weight:bold; background-color:inherit">this._stickBG.getPosition());
  120. //如果半径
  121. if(distance<this._radius)
  122. this._speed=this._speed1;
  123. this._speed2;
  124. _updateCallback:function()
  125. this.callback&&typeof(this.callback)==="function")
  126. this.callback();
  127. //更新移动目标
  128. update:function(dt)
  129. switch(this._directionType)
  130. caseDirectionType.FOUR:
  131. this._fourDirectionsMove();
  132. break;
  133. caseDirectionType.EIGHT:
  134. this._eightDirectionsMove();
  135. break;
  136. caseDirectionType.ALL:
  137. this._allDirectionsMove();
  138. default:
  139. //四个方向移动(上下左右)
  140. _fourDirectionsMove:this._angle>45&&this._angle<135)
  141. this._target.y+=this._speed;
  142. elsethis._angle>-135&&this._angle<-45)
  143. this._target.y-=this._angle<-135&&this._angle>-180||this._angle>135&&this._angle<180)
  144. this._target.x-=this._angle<0&&this._angle>-45||this._angle>0&&this._angle<45)
  145. this._target.x+=//八个方向移动(上下左右、左上、右上、左下、右下)
  146. _eightDirectionsMove:this._angle>67.5&&this._angle<112.5)
  147. this._speed;
  148. this._angle>-112.5&&this._angle<-67.5)
  149. this._angle<-157.5&&this._angle>157.5&&this._angle<180)
  150. this._angle>-22.5||this._angle<22.5)
  151. this._angle>112.5&&this._angle<157.5)
  152. this._speed/1.414;
  153. this._speed/1.414;
  154. this._angle>22.5&&this._angle<67.5)
  155. this._angle>-157.5&&this._angle<-112.5)
  156. this._angle>-67.5&&this._angle<-22.5)
  157. //全方向移动
  158. _allDirectionsMove:this._target.x+=Math.cos(this._angle*(Math.PI/180))*this._target.y+=Math.sin(//设置透明度
  159. setOpacity:function(opacity)
  160. this._opacity=opacity;
  161. this._stick.setOpacity(opacity);
  162. this._stickBG.setOpacity(opacity);
  163. //设置一段速度
  164. setSpeedwithLevel1:function(speed)
  165. this._speed1=speed;
  166. //设置二段速度
  167. setSpeedwithLevel2:this._speed1<speed)
  168. this._speed2=speed;
  169. this._speed2=//设置遥控杆开关
  170. setEnable:function(enable)
  171. this._listener!=null)
  172. if(enable)
  173. cc.eventManager.addListener( cc.eventManager.removeListener(//获取角度
  174. getAngle:this._angle;
  175. onExit:this._super();
  176. //移除触摸监听
  177. null)
  178. cc.eventManager.removeListener(this._listener);
  179. });
源码下载点击打开链接
原文链接:https://www.f2er.com/cocos2dx/341314.html

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