Cocos Creator 实现虚拟摇杆

文章目录

1、引言
2、准备
3、原理分析
4、场景搭建
5、代码
6、效果展示
7、Demo示例下载
8、结束语

1、引言

近日准备做一个休闲游戏，需要用到虚拟摇杆！于是摸索一番，便有一得，这里分享出来，有不足之处还望大家来指正！

2、准备

Cocos Creator v2.1.4
VsCode

3、原理分析

作为摇杆，需要有一个节点进行触摸，还需要约束摇杆能够移动的范围，我们可以通过相似三角形等比例限定(x,y)。如下图
通常我们操作摇杆之后我们需要把摇杆放置在摇杆背景的中心。我们在触摸结束的时候重新归置摇杆的位置。

4、场景搭建

我们只需要两个素材，一个是摇杆背景，一个是摇杆。如下图所示：

我们只需搭好摇杆，放置一个玩家就可以了，如下图所示：

5、代码

cc.Class({extends: cc.Component,properties: {/** 摇杆移动中心 */midNode: {default: null,type: cc.Node,displayName: '移动中心节点'},/** 摇杆背景做监听，体验好些 */joyBk: {default: null,type: cc.Node,displayName: '摇杆背景节点'},/** 摇杆最大移动半径 */maxR: {default: 100,displayName: '摇杆活动半径'},/** 摇杆移动回调 */joyCallBack:  {default: [],type: cc.Component.EventHandler,displayName: '摇杆移动回调',tooltip: '触发touchmove后分发数据'}},onLoad () {// 归位this.goBackMid();},start () {this.joyBk.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this);this.joyBk.on(cc.Node.EventType.TOUCH_MOVE, this.onTouchMove, this);this.joyBk.on(cc.Node.EventType.TOUCH_END, this.onTouchEnd, this);this.joyBk.on(cc.Node.EventType.TOUCH_CANCEL, this.onTouchEnd, this);},/** 回归中心 */goBackMid () {this.joyBk.setPosition(0, 0);this.midNode.setPosition(0, 0);},onTouchStart (e) {let pos = this.node.convertToNodeSpaceAR(e.getLocation());this.clampPos(pos);this.midNode.setPosition(pos.x, pos.y);let angle = this.covertToAngle(pos);console.log(this.joyCallBack);// 触发回调this.joyCallBack[0].emit([pos, angle]);},onTouchMove (e) {let pos = this.node.convertToNodeSpaceAR(e.getLocation());this.clampPos(pos);this.midNode.setPosition(pos.x, pos.y);let angle = this.covertToAngle(pos);// 触发回调this.joyCallBack[0].emit([pos, angle]);},onTouchEnd (e) {this.goBackMid();this.joyCallBack[0].emit([cc.v2(0, 0),null]);},/** 根据半径限制位置 */clampPos (pos) {let len = pos.mag();if (len > this.maxR-0.5) {let k = this.maxR / len;pos.x *= k;pos.y *= k;}},/** 根据位置转化角度 */covertToAngle (pos) {let r = Math.atan2(pos.y, pos.x);let d = cc.misc.radiansToDegrees(r);return d;},
});

由于代码中已经给出了详尽的注释，这里也就不再啰里啰嗦了。启动该工程，只要我们拖动摇杆就可以看到如下效果！

6、效果展示

下面是代码实现的效果：

7、Demo示例下载

为了方便大家，当然如果有不明白的童鞋也可以在这里点此下载Demo示例！

8、结束语

The End
好了，今天的分享就到这里，如有不足之处，还望大家及时指正，随时欢迎探讨交流！！！

喜欢的朋友们，请收藏、点赞、评论！您的肯定是我写作的不竭动力！

Cocos Creator 实现虚拟摇杆相关推荐

《Cocos Creator游戏实战》虚拟摇杆实现
虚拟摇杆实现摇杆布局实现摇杆功能实现用摇杆控制主角该功能已收录在Many Widgets插件中,使用Cocos Creator 3.x版本的小伙伴可以用该插件快速生成摇杆. 插件地址:http ...
Cocos 2d-js 虚拟摇杆
虚拟摇杆是在手机格斗游戏中经常看到的一个东西,用来控制人物的8个方向的行走,今天就来了解一下如何在cocos2d-js实现一个虚拟摇杆... // 虚拟摇杆类型 var ROCKER_TYPE = R ...
Cocos Creator发布H5游戏，做项目构建流程定制
游戏实现主要介绍游戏玩法,具体实现,参考游戏源码.玩法是:游戏开始后,通过虚拟摇杆控制猴子在屏幕左右方向跳动,屏幕上随机出现香蕉,过一段时间后消失,猴子吃到香蕉得分,如果等到香蕉消失时,猴子仍旧没吃 ...
《Cocos Creator游戏实战》贪吃蛇平滑移动
贪吃蛇平滑移动贪吃蛇平滑移动初始化蛇头和蛇身调整蛇头方向贪吃蛇移动蛇头和蛇身的节点顺序添加食物添加碰撞逻辑代码从pointsArray中剔除无用的坐标点(更新) 在本教程中我们重点来学 ...
022 - cocos creator 3D
#cocos creator 3D warning 报错:"project:///assets/main.js,将https中的export注视掉重试一遍知识点 scrollview组件添 ...
Cocos Creator游戏开发教程学习笔记
学完提问几个问题吧: position的锚点位置数值原点在哪里? 因为position是相对坐标,所以原点是父节点的锚点 .所以Canvas下面的直属节点原点就是世界坐标系的原点Canvas的锚点. ...
cocos creator开发微信小游戏(五)贪吃蛇大作战
目录小游戏介绍小游戏cocos creator场景图小游戏部分JS代码开发中碰到的问题工程及说明小游戏介绍贪吃蛇小游戏:贪吃蛇试玩(首次加载比较慢),类似贪吃蛇大作战的小游戏.当玩家的蛇 ...
Cocos Creator 写的小游戏
# 超能陆战队注:美术资源来源于网络作者: 是烧麦啊未生畏死游戏类型:动作类 * 所用到的 IDE : Cocos Creator v2.0.10,主要用于视觉还原.主逻辑开发.跨端调试和编译 ...
Cocos Creator 一步一步实现重力球游戏
「获取源码」点击上方蓝字关注公众号「游戏开发小白变怪兽」,回复「重力球」获取源码及美术资源. 「游戏玩法」通过手机陀螺仪,调整手机,让球从上一层的间隔中落到下一层,楼层会不断上涨,如果球碰到上方或 ...
Cocos Creator源码和教程分享
由于受论坛修改时间限制,后续不能修改的情况下,开新帖分享新源码和教程. https://forum.cocos.com/t/cocoscreator/80131 https://forum.cocos ...