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

2015-04-03 09:51

虚拟摇杆是在手机格斗游戏中经常看到的一个东西，今天就来了解一下如何在cocos2d-js实现一个虚拟摇杆...

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

默认类型(Default):

跟随类型(Follow):

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

 var joystick = new Joystick(res.JoystickBG_png,
                             res.Joystick_png,
                             50,
                             TouchType.DEFAULT,
                             DirectionType.ALL,
                             sprite);
 joystick.setPosition(cc.p(100, 100));
 joystick.setSpeedwithLevel1(1);
 joystick.setSpeedwithLevel2(2);
 //joystick.setOpacity(128);
 //joystick.setEnable(true);
 joystick.callback = this.onCallback.bind(this);
 this.addChild(joystick, 0, 101);

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

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

其中，触摸类型分为：默认(DEFAULT) 和跟随(FOLLOW)

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

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

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

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

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

 var TouchType = {
     DEFAULT: "DEFAULT",
     FOLLOW: "FOLLOW"
 };

 var DirectionType = {
     FOUR: "FOUR",
     EIGHT: "EIGHT",
     ALL: "ALL"
 };

 var Joystick = cc.Node.extend({
     _stick: null,       //控杆
     _stickBG: null,     //控杆背景
     _listener: null,    //监听器
     _radius: 0,         //半径
     _angle: null,       //角度
     _radian: null,      //弧度
     _target: null,      //操控的目标
     _speed: 0,          //实际速度
     _speed1: 1,         //一段速度
     _speed2: 2,         //二段速度
     _touchType: null,   //触摸类型
     _directionType: null,   //方向类型
     _opacity: 0,        //透明度
     callback: null,     //回调函数
     ctor: function(stickBG, stick, radius, touchType, directionType, target)
     {
         this._super();
         this._target = target;
         this._touchType = touchType;
         this._directionType = directionType;

         //创建摇杆精灵
         this._createStickSprite(stickBG, stick, radius);

         //初始化触摸事件
         this._initTouchEvent();
     },

     _createStickSprite: function(stickBG, stick, radius)
     {
         this._radius = radius;

         if(this._touchType == TouchType.FOLLOW)
             this.setVisible(false);

         //摇杆背景精灵
         this._stickBG = new cc.Sprite(stickBG);
         this._stickBG.setPosition(cc.p(radius, radius));
         this.addChild(this._stickBG);

         //摇杆精灵
         this._stick = new cc.Sprite(stick);
         this._stick.setPosition(cc.p(radius, radius));
         this.addChild(this._stick);

         //根据半径设置缩放比例
         var scale = radius / (this._stickBG.getContentSize().width / 2);
         this._stickBG.setScale(scale);
         this._stick.setScale(scale);

         //设置大小
         this.setContentSize(this._stickBG.getBoundingBox());

         //设置锚点
         this.setAnchorPoint(cc.p(0.5, 0.5));
     },

     _initTouchEvent: function()
     {
         this._listener = cc.EventListener.create({
             event: cc.EventListener.TOUCH_ONE_BY_ONE,
             swallowTouches: false,
             onTouchBegan: this.onTouchBegan,
             onTouchMoved: this.onTouchMoved,
             onTouchEnded: this.onTouchEnded
         });

         //如果存在相同的对象，将被移除
         this.setUserObject(this._listener);

         //添加触摸监听
         cc.eventManager.addListener(this._listener, this._stickBG);
     },

     //计算角度并返回
     _getAngle: function(point)
     {
         var pos = this._stickBG.getPosition();
         this._angle = Math.atan2(point.y-pos.y, point.x-pos.x) * (180/cc.PI);
         return this._angle;
     },

     //计算弧度并返回
     _getRadian: function(point)
     {
         this._radian = cc.PI / 180 * this._getAngle(point);
         return this._radian;
     },

     //计算两点间的距离并返回
     _getDistance: function(pos1, pos2)
     {
         return Math.sqrt(Math.pow(pos1.x - pos2.x, 2) +
         Math.pow(pos1.y - pos2.y, 2));
     },

     onTouchBegan: function(touch, event)
     {
         //触摸监听目标
         var target = event.getCurrentTarget();

         //如果触摸类型为FOLLOW，则摇控杆的位置为触摸位置,触摸开始时候现形
         if(target.getParent()._touchType == TouchType.FOLLOW)
         {
             target.getParent().setPosition(touch.getLocation());
             target.getParent().setVisible(true);
             target.getParent().scheduleUpdate();
             return true;
         }
         else
         {
             //把触摸点坐标转换为相对与目标的模型坐标
             var touchPos = target.convertToNodeSpace(touch.getLocation());

             //点与圆心的距离
             var distance = target.getParent()._getDistance(touchPos, target);

             //圆的半径
             var radius = target.getBoundingBox().width / 2;

             //如果点与圆心距离小于圆的半径,返回true
             if(radius > distance)
             {
                 target.getParent()._stick.setPosition(touchPos);
                 target.getParent().scheduleUpdate();
                 return true;
             }
         }
         return false;
     },

     onTouchMoved: function(touch, event)
     {
         //触摸监听目标
         var target = event.getCurrentTarget();

         //把触摸点坐标转换为相对与目标的模型坐标
         var touchPos = target.convertToNodeSpace(touch.getLocation());

         //点与圆心的距离
         var distance = target.getParent()._getDistance(touchPos, target);

         //圆的半径
         var radius = target.getBoundingBox().width / 2;

         //如果点与圆心距离小于圆的半径,控杆跟随触摸点
         if(radius > distance)
         {
             target.getParent()._stick.setPosition(touchPos);
         }
         else
         {
             var x = target.getPositionX() + Math.cos(target.getParent()._getRadian(touchPos)) * target.getParent()._radius;
             var y = target.getPositionY() + Math.sin(target.getParent()._getRadian(touchPos)) * target.getParent()._radius;
             target.getParent()._stick.setPosition(cc.p(x, y));
         }

         //更新角度
         target.getParent()._getAngle(touchPos);

         //设置实际速度
         target.getParent()._setSpeed(touchPos);

         //更新回调
         target.getParent()._updateCallback();
     },

     onTouchEnded: function(touch, event)
     {
         //触摸监听目标
         var target = event.getCurrentTarget();

         //如果触摸类型为FOLLOW，离开触摸后隐藏
         if(target.getParent()._touchType == TouchType.FOLLOW)
             target.getParent().setVisible(false);

         //摇杆恢复位置
         target.getParent()._stick.setPosition(target.getPosition());

         target.getParent().unscheduleUpdate();
     },

     //设置实际速度
     _setSpeed: function(point)
     {
         //触摸点和遥控杆中心的距离
         var distance = this._getDistance(point, this._stickBG.getPosition());

         //如果半径
         if(distance < this._radius)
         {
             this._speed = this._speed1;
         }
         else
         {
             this._speed = this._speed2;
         }
     },

     //更新回调
     _updateCallback: function()
     {
         if(this.callback && typeof(this.callback) === "function")
         {
             this.callback();
         }
     },

     //更新移动目标
     update: function(dt)
     {
         switch (this._directionType)
         {
             case DirectionType.FOUR:
                 this._fourDirectionsMove();
                 break;
             case DirectionType.EIGHT:
                 this._eightDirectionsMove();
                 break;
             case DirectionType.ALL:
                 this._allDirectionsMove();
                 break;
             default :
                 break;
         }
     },

     //四个方向移动(上下左右)
     _fourDirectionsMove: function()
     {
         if(this._angle > 45 && this._angle < 135)
         {
             this._target.y += this._speed;
         }
         else if(this._angle > -135 && this._angle < -45)
         {
             this._target.y -= this._speed;
         }
         else if(this._angle < -135 && this._angle > -180 || this._angle > 135 && this._angle < 180)
         {
             this._target.x -= this._speed;
         }
         else if(this._angle < 0 && this._angle > -45 || this._angle > 0 && this._angle < 45)
         {
             this._target.x += this._speed;
         }
     },

     //八个方向移动(上下左右、左上、右上、左下、右下)
     _eightDirectionsMove: function()
     {
         if(this._angle > 67.5 && this._angle < 112.5)
         {
             this._target.y += this._speed;
         }
         else if(this._angle > -112.5 && this._angle < -67.5)
         {
             this._target.y -= this._speed;
         }
         else if(this._angle < -157.5 && this._angle > -180 || this._angle > 157.5 && this._angle < 180)
         {
             this._target.x -= this._speed;
         }
         else if(this._angle < 0 && this._angle > -22.5 || this._angle > 0 && this._angle < 22.5)
         {
             this._target.x += this._speed;
         }
         else if(this._angle > 112.5 && this._angle < 157.5)
         {
             this._target.x -= this._speed / 1.414;
             this._target.y += this._speed / 1.414;
         }
         else if(this._angle > 22.5 && this._angle < 67.5)
         {
             this._target.x += this._speed / 1.414;
             this._target.y += this._speed / 1.414;
         }
         else if(this._angle > -157.5 && this._angle < -112.5)
         {
             this._target.x -= this._speed / 1.414;
             this._target.y -= this._speed / 1.414;
         }
         else if(this._angle > -67.5 && this._angle < -22.5)
         {
             this._target.x += this._speed / 1.414;
             this._target.y -= this._speed / 1.414;
         }
     },

     //全方向移动
     _allDirectionsMove: function()
     {
         this._target.x += Math.cos(this._angle * (Math.PI/180)) * this._speed;
         this._target.y += Math.sin(this._angle * (Math.PI/180)) * this._speed;
     },

     //设置透明度
     setOpacity: function(opacity)
     {
         this._opacity = opacity;
         this._stick.setOpacity(opacity);
         this._stickBG.setOpacity(opacity);
     },

     //设置一段速度
     setSpeedwithLevel1: function(speed)
     {
         this._speed1 = speed;
     },

     //设置二段速度
     setSpeedwithLevel2: function(speed)
     {
         if(this._speed1 < speed)
         {
             this._speed2 = speed;
         }
         else
         {
             this._speed2 = this._speed2;
         }
     },

     //设置遥控杆开关
     setEnable: function(enable)
     {
         if(this._listener != null)
         {
             if(enable)
             {
                 cc.eventManager.addListener(this._listener, this._stickBG);
             }
             else
             {
                 cc.eventManager.removeListener(this._listener);
             }
         }
     },

     //获取角度
     getAngle: function()
     {
         return this._angle;
     },

     onExit: function()
     {
         this._super();
         //移除触摸监听
         if(this._listener != null)
         {
             cc.eventManager.removeListener(this._listener);
         }
     }
 });

源码下载： 点击打开链接