Unity 自主学习之用设计模式模拟王者荣耀（三）-- Easytouch实现技能指示器

技能指示器就是王者荣耀里面的技能按钮，这个按钮在点击之前是一个按钮的样子，但是点击之后，技能图标会缩小一定大小，并且会出现一个可以拖动的范围按钮，更joystick一样，但是经过从尝试发现单纯使用Easytouch提供的Joystick并不能够符合要求，所以我通过对其进行一下封装来实现这个技能指示器。

UI结构如下：

最外层是一个空物体，用来当作技能指示器来挂载脚本，Icon用于显示技能图标，以及实现技能按钮缩小的效果，SkillJoystick 就是Easytouch的遥感组件，用来实现拖动。

代码结构：

我这里的遥感的事件与其他逻辑是相互分离的，我只提供按钮相应事件的接口，具体实现是在其它地方，这里相当于使用了桥接者模式。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Events;
using UnityEngine.UI;namespace WangZhe.UI
{public class SkillIndicator : MonoBehaviour{private static int s_skillJoysticNum = 0;private ETCJoystick m_skillJoystic;private Image m_skillBg;private Image m_thumbIcon;private Image m_skillIcon;private Color m_skillBgColorShow;private Color m_skillBgColorHide;private Sprite m_skillIconSprite;private Sprite m_thumbIconSprite;#region 对外交互的数据public float DragDisPersent { get; private set; }public string Name { get; set; }public int ID { get; private set; }public Vector2 DragDir { get; private set; }public UnityEvent OnDrag;public UnityEvent OnDragEnd;#endregionprivate void Awake(){s_skillJoysticNum++;m_skillJoystic = transform.GetComponentInChildren<ETCJoystick>();                         m_skillBg = m_skillJoystic.GetComponent<Image>();m_thumbIcon = m_skillJoystic.transform.Find("Thumb").GetComponent<Image>();m_skillIcon = transform.Find("Icon").GetComponent<Image>();m_skillBgColorShow = m_skillBg.color;m_skillBgColorHide = new Color(0, 0, 0, 0);m_skillIconSprite = m_skillIcon.sprite;m_thumbIconSprite = m_thumbIcon.sprite;#region 对外数据初始化DragDisPersent = 0;DragDir = Vector2.zero;Name = transform.name;ID = s_skillJoysticNum;#endregionm_skillIcon.gameObject.SetActive(false);m_skillBg.color = m_skillBgColorHide;m_thumbIcon.sprite = m_skillIconSprite;m_skillJoystic.onMove.AddListener(OnThumbMove);m_skillJoystic.onMoveEnd.AddListener(OnThumbMoveEnd);}public void OnThumbMove(Vector2 moveDir){m_skillIcon.gameObject.SetActive(true);                                                     //显示技能图标m_skillBg.color = m_skillBgColorShow;                                                       //显示拖动范围背景m_thumbIcon.sprite = m_thumbIconSprite;                                                     //修改拖动按钮的背景Vector3 thumbPos = m_thumbIcon.transform.localPosition;                                     //偏移位置Vector3 bgPos = m_skillBg.transform.localPosition;                                          //中心点位置DragDisPersent = Vector3.Distance(thumbPos, bgPos) / m_skillJoystic.GetRadius();            //偏移距离除以半径得到拖动偏移的百分比DragDir = moveDir;                                                                          //设置位移方向OnDrag.Invoke();                                                                            //提供接口做处理}public void OnThumbMoveEnd(){m_skillIcon.gameObject.SetActive(false);                            //隐藏技能图标m_skillBg.color = m_skillBgColorHide;                               //隐藏拖动范围图标m_thumbIcon.sprite = m_skillIconSprite;                             //修改拖动按钮图标DragDisPersent = 0;                                                 //设置拖动距离百分比为0DragDir = Vector2.zero;                                             //设置拖动方向为0OnDragEnd.Invoke();                                                 //提供接口}}
}

最上面的一些数据是控制按钮本身的UI显示用的变量，还有一部分是用来与外界交互的变量（后面可能会添加一些，后面不够用了再添就是）。

初始化里面就不说了，都是些绑定操作，最后两句就是将joystick的move 事件与函数相绑定，重点在这两个函数里面。

这两个函数里面主要都是对自身按钮UI显示的操作，而对外提供的接口就是OnDrag和OnDragEnd这两个委托函数，这两个使得我可以在其它地方去绑定具体的按钮事件。

使用：

这只是一个技能指示器按钮，相当于一个控制里面的一个部分，而王者荣耀的控制按钮中，左边的移动按钮永远是不变的，只是右边的按钮会根据技能个数而改变，所以我讲右边的部分整体做成一个预制体，根据技能个数来加载对应的预制体，所以控制逻辑与实现逻辑分开是必要的。

这个使用如下：

using HedgehogTeam.EasyTouch;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Events;
using WydUtility.Extension;
using WangZhe.Battle.Charactor;
using WangZhe.UI;namespace WangZhe.Battle.UI
{public enum Skill_ID{ATK,Skill1,Skill2,Skill3,Skill4}public class BattleControlPanel : MonoBehaviour{protected ETCButton m_ATKBtn;protected ETCJoystick m_joystick;protected SkillIndicator[] m_skillIndicators;private void Awake(){m_joystick = GameObject.Find("CharaJoystic").GetComponent<ETCJoystick>();m_skillIndicators = transform.GetComponentsInChildren<SkillIndicator>();if (null == m_joystick)Debug.LogWarningFormat("未找到遥感");if (m_skillIndicators.Length <= 0)Debug.LogWarningFormat("未找到任何技能控制器");m_joystick.onMove.AddListener(OnJoysticMove);foreach(SkillIndicator si in m_skillIndicators){si.OnDrag.AddListener(new UnityAction(() => OnSkillStart(si)));}}protected virtual void OnJoysticMove(Vector2 moveDir){PlayerSystem.Instance.PlayerMove(moveDir);}protected virtual void OnSkillStart(SkillIndicator skillIndicator){Vector2 skillDir = skillIndicator.DragDir;float skillDisPercent = skillIndicator.DragDisPersent;PlayerSystem.Instance.SkillReleasBegin(skillDir, skillDisPercent);}protected virtual void OnSkillRelease(){}protected virtual void InitOnAwake() { }}
}

当这个按钮使用的时候回去通知PlayerSystem去实现相对应的技能效果。

效果：