自定义虚拟摇杆组件让你一劳永逸

2019 年 10 月 3 日
筆記

最近在研究虚拟摇杆实现方式的时候，发现网上的教程的实现方式可移植性并不是特别好，于是我决定自己实现一个虚拟摇杆组件，保存到自己的组件库，方便以后用到的时候直接使用（关注公众号后台回复「虚拟摇杆组件」可获取该组件），下面正文开始。

实现思路：

为了实现高度可移植，定义了两个节点属性，用于绑定场景和玩家角色，另外添加 PlayerNodeSpeed 属性和 MaxR 属性用于控制玩家移动速度和摇杆节点的移动范围。

实现过程：

1.首先创建一个空节点 Rocker，下面挂载上虚拟摇杆的背景 rockerBg 和摇杆节点 joystick：

2.然后给创建好节点添加合适的虚拟摇杆资源，没有资源的小伙伴可以关注公众号后台回复「虚拟摇杆」获取多套美术资源：

3.之后编写脚本如下，代码中已经尽可能详细做好了备注，如果仍有不清楚的小伙伴可以后台私信我，看到后我会及时回复的：

  1 // Rocker.js    2    3 cc.Class({    4     extends: cc.Component,    5    6     properties: {    7         sceneNode: {    // 场景节点    8             type: cc.Node,    9             default: null,   10         },   11   12         playerNode: {    // player节点   13             type: cc.Node,   14             default: null,   15         },   16   17         playerNodeSpeed: 100,    // player移动速度   18   19         Max_r: 100,    // 摇杆移动半径，根据自己美术资源进行调整   20     },   21   22     onLoad() {   23         // 隐藏摇杆组件节点   24         this.node.active = false;   25   26         // 获取摇杆节点并初始化摇杆节点位置及角度   27         this.joystick = this.node.getChildByName('joystick')   28         this.joystick.setPosition(cc.v2(0, 0));   29         this.dir = cc.v2(0, 0);   30   31         // 注册父节点的 touch 监听事件   32         this.sceneNode.on(cc.Node.EventType.TOUCH_START, this.cbTouchStart, this);   33         this.sceneNode.on(cc.Node.EventType.TOUCH_MOVE, this.cbTouchMove, this);   34         this.sceneNode.on(cc.Node.EventType.TOUCH_END, this.cbTouchEnd, this);   35         this.sceneNode.on(cc.Node.EventType.TOUCH_CANCEL, this.cbTouchCancel, this);   36     },   37   38     update(dt) {   39         if (this.dir.mag() < 0.5) {   40             return;   41         }   42   43         let vx = this.dir.x * this.playerNodeSpeed;   44         let vy = this.dir.y * this.playerNodeSpeed;   45   46         let sx = vx * dt;   47         let sy = vy * dt;   48         //移动   49         this.playerNode.x += sx;   50         this.playerNode.y += sy;   51   52         let windowsSize = cc.winSize;   53   54         let minX = -windowsSize.width / 2 + this.playerNode.width / 2;    // 最小X坐标   55         let maxX = Math.abs(minX);    // 最大X坐标   56         let minY = -windowsSize.height / 2 + this.playerNode.height / 2;    // 最小Y坐标   57         let maxY = Math.abs(minY);    // 最大Y坐标   58   59         let currentPos = this.playerNode.getPosition();   60   61         if (currentPos.x < minX) {   62             currentPos.x = minX;   63         } else if (currentPos.x > maxX) {   64             currentPos.x = maxX;   65         }   66   67         if (currentPos.y < minY) {   68             currentPos.y = minY;   69         } else if (currentPos.y > maxY) {   70             currentPos.y = maxY;   71         }   72   73         this.playerNode.setPosition(currentPos);   74   75         //方向计算   76         var r = Math.atan2(this.dir.y, this.dir.x);   77         var degree = r * 180 / (Math.PI);   78         degree = 360 - degree + 90;   79         this.playerNode.rotation = degree;   80     },   81   82     cbTouchStart(event) {   83         let pos = event.getLocation();   84   85         // 点击时显示摇杆组件节点并设置位置   86         this.node.active = true;   87         let rPos = this.sceneNode.convertToNodeSpaceAR(pos);    // 将世界坐标转化为场景节点的相对坐标   88         this.node.setPosition(rPos);   89   90         // 初始化摇杆节点位置及角度   91         this.joystick.setPosition(cc.v2(0, 0));   92         this.dir = cc.v2(0, 0);   93     },   94   95     cbTouchMove(event) {   96         var pos = event.getLocation();   97   98         var jPos = this.node.convertToNodeSpaceAR(pos);    // 将世界坐标转化为摇杆组件节点的相对坐标   99  100         // 获取摇杆的角度  101         let len = jPos.mag();  102         this.dir.x = jPos.x / len;  103         this.dir.y = jPos.y / len;  104  105         // 设置摇杆的位置  106         if (len > this.Max_r) {  107             jPos.x = this.Max_r * jPos.x / len;  108             jPos.y = this.Max_r * jPos.y / len;  109         }  110         this.joystick.setPosition(jPos);  111     },  112  113     cbTouchEnd(event) {  114         // 初始化摇杆节点位置及角度  115         this.joystick.setPosition(cc.v2(0, 0));  116         this.dir = cc.v2(0, 0);  117         this.node.active = false;  118     },  119  120     cbTouchCancel(event) {  121         // 初始化摇杆节点位置及角度  122         this.joystick.setPosition(cc.v2(0, 0));  123         this.dir = cc.v2(0, 0);  124         this.node.active = false;  125     }  126 });