时隔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