時隔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
接下來準備實現技能按鈕部分，也不知道可以不可以實現，如果各位有好的參考代碼也歡迎各位提供我學習參考下，謝謝