小白筆記一：Unity的不規則UI設計

最近剛好公司安排了一個封裝不規則UI腳本的任務，作為一個剛過實習期的游戲小白本能反應是問度娘，但是找了很多文章，因為本身代碼水平一般，很多文章所用的代碼水平對我而言嚴重超綱，直到我看到了一篇宏哥的一篇文章[UnityUI]不規則圖片的點擊回應_宏哥的博客-CSDN博客，以下代碼也是我按照這篇文章最后的內容自己推展了一點，代碼邏輯比較簡單，可能不是很嚴謹，歡迎大佬們指正，

演示效果如下：

代碼部分如下：

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.Events;
using UnityEditor;

public class IrregularUI : MonoBehaviour
    {
        #region 欄位宣告
        public bool AlwaysIn = true;
        public bool draggable = false;
        public Image image;
        public PolygonCollider2D polygonCollider2D;
        private bool MouseDownInArea;
        private bool MouseAlwaysInArea;
        private bool IsDrag = false;
        public UnityEvent OnClick;
        public UnityEvent OnDragStart;
        public UnityEvent OnDragEnd;
        #endregion

        #region 生命周期
        void Start()
        {
            InitData();
            InitEvent();
            InitModule();
        }

        // Update is called once per frame
        void Update()
        {
            MouseInArea();
            if (AlwaysIn)
                AlwaysInArea();
            if (draggable && MouseDownInArea)
                StartDrag();
            if (IsDrag && !MouseDownInArea)
                EndDrag();
        }
        #endregion

        #region 初始化資料
        private void InitData()
        {
            MouseAlwaysInArea = true;
            MouseDownInArea = false;
        }
        private void InitEvent()
        {
            OnClick = new UnityEvent();
            OnDragStart = new UnityEvent();
            OnDragStart = new UnityEvent();
            OnClick.AddListener(OnClickedEvent);
        }
        private void InitModule()
        {
            if (image == null)
                image = GetComponent<Image>();
            if (polygonCollider2D == null)
                polygonCollider2D = GetComponent<PolygonCollider2D>();
        }
        #endregion

        #region 私有方法
        private void AlwaysInArea()                         //滑鼠按下至抬起期間，滑鼠移出區域不會觸發OnClick
        {
            if (MouseDownInArea && !polygonCollider2D.OverlapPoint(Input.mousePosition))
                MouseAlwaysInArea = false;
            if (Input.GetMouseButtonUp(0))
                MouseAlwaysInArea = true;
        }
        private void MouseInArea()                          //滑鼠按下至抬起期間，滑鼠移出區域也會觸發OnClick
        {
            if (Input.GetMouseButtonDown(0)&& polygonCollider2D.OverlapPoint(Input.mousePosition))
                MouseDownInArea = true;
            if (Input.GetMouseButtonUp(0) && MouseDownInArea && MouseAlwaysInArea)
            {
                if (polygonCollider2D.OverlapPoint(Input.mousePosition))
                    OnClick.Invoke();
                MouseDownInArea = false;
            }
            else if(Input.GetMouseButtonUp(0))
                MouseDownInArea = false;
        }
        private void StartDrag()
        {
            IsDrag = true;
            GetComponent<RectTransform>().position = Input.mousePosition;
            OnDragStart.Invoke();
        }
        private void EndDrag()
        {
            IsDrag = false;
            Vector3 pos = Input.mousePosition;
            GetComponent<RectTransform>().position = pos;
        }
        #endregion

        #region 公有方法
        public bool GetButtonState()                        //獲得當前滑鼠狀態
        {
            if (MouseDownInArea)
                return true;
            return false;
        }
        public bool DragState()
        {
            return IsDrag;
        }
        #endregion

        #region 測驗用臨時方法
        private void OnClickedEvent()
        {
            Log.Info("點擊");
        }
        #endregion

參考另一位大佬文章UGUI中幾種不規則按鈕的實作方式 - 知乎 (zhihu.com)，封裝了一個組件，添加起來方便一點，

public class IrregularUIHelper                          //自動添加組件
    {
        [MenuItem("GameObject/UI/IrregularUI")]
        public static void CreateIrregularUI()
        {
            var goRoot = Selection.activeGameObject;
            if (goRoot == null)
                return;
            var polygon = new GameObject("IrregularUI");
            var iUI = polygon.AddComponent<IrregularUI>();
            var p2D = polygon.AddComponent<PolygonCollider2D>();
            var image = polygon.AddComponent<Image>();
            iUI.polygonCollider2D = p2D;
            iUI.image = image;
            polygon.transform.SetParent(goRoot.transform, false);
            polygon.transform.SetAsLastSibling();
        }
    }

具體操作如下：

1、添加如上腳本

2、Hierachy界面創建IrregularUI物體（也可以直接在GameObject上直接添加，不過要手動添加Image和polygon collider 2d組件）

3、然后配置該GameObject的Inspector界面的Image和polygon collider 2d組件即可（如果是本身AddComponent添加的組件，在運行時會自動系結其他兩個組件：image和polygon collider 2d，也可以手動系結，直接將裝載該組建的GameObject拖拽到對應的位置即可）

AlwaysIn： 滑鼠按下至抬起期間，滑鼠移出區域是否會觸發OnClick

Draggable：當前GameObject是否可拖動

初入游戲行業，技能積累比較少，歡迎各位大佬指正批評，也希望可以與大家有更多游戲開發上面的交流，