CocosCreator 中的摇杆

前面一篇文章写了几种常见的主角控制方式，这篇文章将介绍利用摇杆JoyStick 去控制主角。

看到网上都是JS写的代码，找了一个效果不错的参考了一下，本文采用TS写的：

首先查看效果图：

摇杆有两种显示方式，都是平时在游戏里常见的。

实现起来和Unity 里面的摇杆实现方式差不多，只是语言不同罢了。

首先是摇杆类：

 onLoad(){this.radius=this.bgNode.width/2;this.initTouchEvent();if (this.joyStickType==JoyStickType.FOLLOW){this.node.opacity=0;}this.playerScr=this.player.getComponent('Player');}initTouchEvent(){this.node.on(cc.Node.EventType.TOUCH_START,this.touchStartEvent,this);this.node.on(cc.Node.EventType.TOUCH_MOVE,this.touchMoveEvent,this);this.node.on(cc.Node.EventType.TOUCH_END,this.touchEndEvent,this);this.node.on(cc.Node.EventType.TOUCH_CANCEL,this.touchEndEvent,this);}touchStartEvent(event){let startTouchPos=this.node.convertToNodeSpaceAR(event.getLocation());if(this.joyStickType==JoyStickType.FIXED){this.stickPos=this.bgNode.getPosition();let distance=startTouchPos.sub(this.bgNode.getPosition()).mag();if(this.radius>distance){this.dotNode.setPosition(startTouchPos);}}else if(this.joyStickType==JoyStickType.FOLLOW){this.stickPos=startTouchPos;this.node.opacity=255;this.touchPos=event.getLocation();this.bgNode.setPosition(startTouchPos);this.dotNode.setPosition(startTouchPos);}}touchMoveEvent(event){if(this.joyStickType==JoyStickType.FOLLOW){if(this.touchPos==event.getLocation()){return;}}//将触摸坐标 转化到 bg 下， 此时 的dis 就是 触摸点相对于bg 的距离let touchP=this.bgNode.convertToNodeSpaceAR(event.getLocation());let dis=touchP.mag();let posX=this.stickPos.x+touchP.x;let posY=this.stickPos.y+touchP.y;//向量归一(获取方向)let p = cc.v2(posX,posY).sub(this.bgNode.getPosition()).normalize();if(this.radius>dis){this.dotNode.setPosition(cc.v2(posX,posY));this.playerScr.speedType=SpeedType.NORMAL;}else{//摇杆在圈边let nowPosX=this.stickPos.x+p.x*this.radius;let nowPosy=this.stickPos.y+p.y*this.radius;this.dotNode.setPosition(cc.v2(nowPosX,nowPosy));this.playerScr.speedType=SpeedType.FAST;}this.playerScr.moveDir=p;}touchEndEvent(event){this.dotNode.setPosition(this.bgNode.getPosition());if(this.joyStickType==JoyStickType.FOLLOW){this.node.opacity=0;}this.playerScr.speedType=SpeedType.STOP;}onDestroy(){this.node.off(cc.Node.EventType.TOUCH_START,this.touchStartEvent,this);this.node.off(cc.Node.EventType.TOUCH_MOVE,this.touchMoveEvent,this);this.node.off(cc.Node.EventType.TOUCH_END,this.touchEndEvent,this);this.node.off(cc.Node.EventType.TOUCH_CANCEL,this.touchEndEvent,this);}

也是几种触摸事件结合实现的。

接着是player 类的实现：

 //移动方向moveDir=cc.v2(0,1);moveSpeed:number=0;stopSpeed:number=0;normalSpeed:number=100;fastSpeed:number=200;update(dt){switch(this.speedType){case SpeedType.STOP:this.moveSpeed=this.stopSpeed;break;case SpeedType.NORMAL:this.moveSpeed=this.normalSpeed;break;case SpeedType.FAST:this.moveSpeed=this.fastSpeed;break;}this.move();}move(){//radiansToDegrees弧度转角度。atan2返回从 x 轴到点 (x,y) 之间的角度 Math.atan2(y,x)，结果为弧度this.node.rotation=90-cc.misc.radiansToDegrees(Math.atan2(this.moveDir.y,this.moveDir.x));//缩放向量let newPos=this.node.position.add(this.moveDir.mul(this.moveSpeed/60));this.node.setPosition(newPos);}

具体demo 链接：https://download.csdn.net/download/hnzmdlhc/11253948

附上enum 脚本：

  export enum SpeedType{STOP,NORMAL,FAST,}export enum JoyStickType{FIXED,FOLLOW,}export enum DirectionType{FOUR,EIGHT,ALL,}

CocosCreator 中的摇杆相关推荐

CocosCreator中游戏摇杆的实现
在rpg游戏,包括很多其他游戏中,都要用到摇杆操控角色进行移动的效果,可以说是很多游戏的必须模块,今天我们就来实现这个模块效果展示: 首先准备好摇杆的素材摇杆代码:joystick.js cc.C ...
CocosCreator游戏开发---菜鸟学习之路（三）如何在CocosCreator中使用Pomelo
PS(废话): 这段时间都在研究网易的Pomelo框架,作为新手小白,自然遇到了不少坑爹的事情.(当然也有可能是因为自己技术不过关的原因所以导致在很多基础的问题上纠结了很久.)网上也搜索了好久,但是基 ...
CocosCreator中Protobuf的简单使用
cocosCreator中Protobuf的简单使用 proto文件格式: pro1.jpeg 准备工具: cocosCreator webStorm或者VSCode 安装node.js 下载prot ...
CocosCreator中使用Animation制作动画
CocosCreator中使用Animation制作动画大家好,今天给大家分享的是关于如何使用CocosCreator来制作动画效果的经验. 我们知道,一个游戏中不可或缺的元素就是动画,比如小鸟展翅 ...
CocosCreator中使用pureMvc
PureMVC框架的目标很明确,即把程序分为低耦合的三层:Model.View和Controller. PureMvc的结构 Model与Proxy Model保存对Proxy对象的引用,Proxy负 ...
android 摇杆控制方向键,Android Studio中实现摇杆
今天和大家分享一下Android Studio实现摇杆,原理很简单,代码中有对应的注释. 实现效果图实现代码 package com.example.fragmentcar1.view; impor ...
cocoscreator 中 spine局部换皮
1 多attachment切换 let goblingirl = this.spine2.findSlot("left-arm");let attachment = gobling ...
cocoscreator中spine局部换皮的探索
1.需求情况书之国中需要一个人物捏脸系统,要求可以让用户自由选择身体不同部位的形象,比如头发.眼睛.眉毛.上衣.裤子等.已经支持RegionAttacment和MeshAttachment,而且在r ...
CocosCreator中移动摄像机之后转世界坐标
引擎版本 CocosCreator v2.0.9 很多时候我们可能会做一个大地图游戏,而摄像机的移动是必须的. 但是摄像机移动后获取到的触点是基于屏幕的,而物体坐标是世界下的. 这时候就要求我们转化为 ...

CocosCreator 中的摇杆

CocosCreator 中的摇杆相关推荐

最新文章

热门文章