摇杆控制器！ Cocos Creator ！

摘要

关于摇杆的实现网上有很多，但是耦合度比较高。今天 KUOKUO 将摇杆实现抽出来，单独一个脚本并声明了一个可拖入回调。

正文

版本说明

使用 CocosCreator 的 2.2.0 版本演示。

节点层级

新建个空节点作为管理节点（joystick），然后是背景与中心节点。监听事件建议把监听写在背景节点，这样触摸范围大些，体验好。

1. // joyBk为背景节点

2. start () {

3. this.joyBk.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this);

4. this.joyBk.on(cc.Node.EventType.TOUCH_MOVE, this.onTouchMove, this);

5. this.joyBk.on(cc.Node.EventType.TOUCH_END, this.onTouchEnd, this);

6. this.joyBk.on(cc.Node.EventType.TOUCH_CANCEL, this.onTouchEnd, this);

7. },

最大限制

获取到触摸位置后转化节点坐标下位置。

1. let pos = this.node.convertToNodeSpaceAR(e.getLocation());

然后，如果手指出圆了，要进行限位。假如最大半径 100，触摸位置为 150，那么就让 150 乘以 100/150；这样就转化回来了。

1. /** 根据半径限制位置 */

2. clampPos (pos) {

3. let len = pos.mag();

4. if(len > this.maxR) {

5. let k = this.maxR / len;

6. pos.x *= k;

7. pos.y *= k;

8. }

9. },

完整的处理代码：

1. let pos = this.node.convertToNodeSpaceAR(e.getLocation());

2. this.clampPos(pos);

3. this.midNode.setPosition(pos.x, pos.y);

回调数据

这样我们就算出了位置，接下来算角度。

1. /** 根据位置转化角度 */

2. covertToAngle (pos) {

3. let r = Math.atan2(pos.y, pos.x);

4. let d = cc.misc.radiansToDegrees(r);

5. return d;

6. },

好了，位置和角度都有了，摇杆的脚本任务完成了，那么如何做个回调呢？先声明一个变量，类型为 cc.Component.EventHandler。

1. properties: {

2. /** 摇杆移动回调 */

3. joyCallBack: {

4. default: [],

5. type: cc.Component.EventHandler,

6. displayName: '摇杆移动回调',

7. tooltip: '触发touchmove后分发数据'

8. }

9. },

然后将数据传出去：

1. onTouchMove (e) {

2. let pos = this.node.convertToNodeSpaceAR(e.getLocation());

3. this.clampPos(pos);

4. this.midNode.setPosition(pos.x, pos.y);

5. let angle = this.covertToAngle(pos);

6. // 触发回调

7. this.joyCallBack[0].emit([pos, angle]);

8. },

玩家脚本：

1. cc.Class({

2. extends: cc.Component,

3. properties: {

4. },

5. onLoad () {

6. this.vector = cc.v2(0, 0);

7. },

8. /** 被触发回调 */

9. playerMoving (vector, angle) {

10. this.vector.x = vector.x;

11. this.vector.y = vector.y;

12. if(angle) {

13. this.node.angle = angle;

14. }

15. },

16. update (dt) {

17. const speed = 0.02;

18. this.node.x += this.vector.x * speed;

19. this.node.y += this.vector.y * speed;

20. },

21. });

结语

这样就实现了摇杆脚本只处理摇杆数据，谁用谁传个回调进来。

2019！让我们一起学习！

O(∩_∩)O~~

微信公众号

更

多

精

彩

源码地址

https://github.com/KuoKuo666/MyComponent