CocosCreator游戏开发（四）实现摇杆控制角色功能

时隔3年，我又开始继续写这个系列的帖子了，也不知道是会写完全系列，还是再次夭折。

废话不多。直接开始主题了

主要实现的功能点包含这些内容：通过摇杆控制角色进行八方位移动，并按照各方位播放对应移动动画

效果图如下：



本次案例其实都是拼凑网上别人的一些现成代码，然后进行整合梳理

涉及到的相关内容如下：

参考代码如下：

1.Cocos Creator 地图滚动&摄像机人物跟随

地址：https://www.bilibili.com/video/BV1et411J7iC

2.joystick摇杆控件

代码地址：https://github.com/YunYouJun/cocos-creator-joystick

在线演示：https://www.yunyoujun.cn/cocos-creator-joystick/

3. Animation动画创建

教程地址：http://www.cocoachina.com/bbs/read.php?tid-458312.html

我其实也只是代码的搬运工，通过对以上三部分的整合，最终就实现了我想要的效果。

开始介绍项目

场景结构

场景中分别包含了以下控件:

• MainCamera 负责绘制UI
• RoleCamera 负责绘制角色（之后的遥感其实也是控制这个摄像头的坐标移动）
• MapView 地图（里面包含了一些地图相关的内容，在参考代码里面的视频有做解释，我这里不做详细介绍了）
• Role 主角，主要的控件，相关的控制代码都挂在主角上面
• joystick 摇杆控件，该部分代码可以直接通过参考代码2去下载，然后直接使用即可。

代码结构

其实需要讲解的代码也就两部分：joystick.js 与Role.JS

Joystick组件

属性（Properties）

• dot ：摇杆操纵点
• ring ：摇杆背景节点
• joystickType ：触摸类型（跟随，固定两种）
• directionType ：方向类型（4方向，8方向，全方位）
• _stickPos ：摇杆所在位置
• _touchLocation ：触摸位置

函数(Functions)

• _initTouchEvent : 初始化
• _onChangeJoystickType : 更改触摸类型
• _touchStartEvent ： 当手指按下时触发，判断触摸类型，并根据触摸类型执行相应动作
• _touchMoveEvent : 当手指按住摇杆控件时持续触发，先判断按下的位置是否相同，如果相同，则不做处理。
• _touchEndEvent ： 当手指抬起时触发，结束相关动作

Role组件

主要函数(Functions)

• _updateCameraPosition ：更新摄像机位置
• _getTilePos ： 计算摇杆角度
• onTouchMove ： 按住摇杆时持续触发
  
  
• getCalculaAngle ： 将摇杆移动的坐标进行角度转换，转换之后用来判断朝哪个方向移动了
  
  
• getfwinfo ： 根据角度判断角色应该朝哪个方向
  
  
• move ： 移动摄像头
  
  
• update ：
  
  

主要逻辑顺序

当用户按住摇杆时触发onTouchMove 事件，判断移动方向，切换角色动画。

最后就是贴代码了

链接：https://share.weiyun.com/8WRBYpR5 密码：jny2wj