您好,登錄后才能下訂單哦!
Unity中怎么實現新手引導鏤空效果,相信很多沒有經驗的人對此束手無策,為此本文總結了問題出現的原因和解決方法,通過這篇文章希望你能解決這個問題。
一、實現思路
創建有8個頂點的Mesh,內外邊界都是四邊形(矩形)。只生成內、外邊之間的Mesh,內層矩形就產生了鏤空部分,外層的4個頂點,是組件自身RectTransform的四個頂點,內層的4個頂點,使用鏤空目標(_target)RectTransform的四個頂點。確定內層的頂點的時候需要注意,多數情況下_target和HollowOutMask都不在同一個本地坐標空間,所以需要使用CalculateRelativeRectTransformBounds計算出HollowOutMask空間下坐標這種鏤空的表現,可以稍稍提高下性能。因為鏤空的位置不參與渲染,Overdraw會降低
UGUI提供了ICanvasRaycastFilter接口,我們實現IsRaycastLocationValid方法,就可以很方便的控制HollowOutMask是否要攔截下在某一點觸發的事件
二、這個組件的作用
這個組件做了兩件事情:表現上鏤空一塊區域和不攔截鏤空范圍上的事件
三、代碼實現
using UnityEngine;using UnityEngine.UI; /// <summary>/// 實現鏤空效果的Mask組件/// </summary>public class HollowOutMask : MaskableGraphic, ICanvasRaycastFilter{ [SerializeField] private RectTransform _target; private Vector3 _targetMin = Vector3.zero; private Vector3 _targetMax = Vector3.zero; private bool _canRefresh = true; private Transform _cacheTrans = null; /// <summary> /// 設置鏤空的目標 /// </summary> public void SetTarget(RectTransform target) { _canRefresh = true; _target = target; _RefreshView(); } private void _SetTarget(Vector3 tarMin, Vector3 tarMax) { if (tarMin == _targetMin && tarMax == _targetMax) return; _targetMin = tarMin; _targetMax = tarMax; SetAllDirty(); } private void _RefreshView() { if (!_canRefresh) return; _canRefresh = false; if (null == _target) { _SetTarget(Vector3.zero, Vector3.zero); SetAllDirty(); } else { Bounds bounds = RectTransformUtility.CalculateRelativeRectTransformBounds(_cacheTrans, _target); _SetTarget(bounds.min, bounds.max); } } protected override void OnPopulateMesh(VertexHelper vh) { if (_targetMin == Vector3.zero && _targetMax == Vector3.zero) { base.OnPopulateMesh(vh); return; } vh.Clear(); // 填充頂點 UIVertex vert = UIVertex.simpleVert; vert.color = color; Vector2 selfPiovt = rectTransform.pivot; Rect selfRect = rectTransform.rect; float outerLx = -selfPiovt.x * selfRect.width; float outerBy = -selfPiovt.y * selfRect.height; float outerRx = (1 - selfPiovt.x) * selfRect.width; float outerTy = (1 - selfPiovt.y) * selfRect.height; // 0 - Outer:LT vert.position = new Vector3(outerLx, outerTy); vh.AddVert(vert); // 1 - Outer:RT vert.position = new Vector3(outerRx, outerTy); vh.AddVert(vert); // 2 - Outer:RB vert.position = new Vector3(outerRx, outerBy); vh.AddVert(vert); // 3 - Outer:LB vert.position = new Vector3(outerLx, outerBy); vh.AddVert(vert); // 4 - Inner:LT vert.position = new Vector3(_targetMin.x, _targetMax.y); vh.AddVert(vert); // 5 - Inner:RT vert.position = new Vector3(_targetMax.x, _targetMax.y); vh.AddVert(vert); // 6 - Inner:RB vert.position = new Vector3(_targetMax.x, _targetMin.y); vh.AddVert(vert); // 7 - Inner:LB vert.position = new Vector3(_targetMin.x, _targetMin.y); vh.AddVert(vert); // 設定三角形 vh.AddTriangle(4, 0, 1); vh.AddTriangle(4, 1, 5); vh.AddTriangle(5, 1, 2); vh.AddTriangle(5, 2, 6); vh.AddTriangle(6, 2, 3); vh.AddTriangle(6, 3, 7); vh.AddTriangle(7, 3, 0); vh.AddTriangle(7, 0, 4); } bool ICanvasRaycastFilter.IsRaycastLocationValid(Vector2 screenPos, Camera eventCamera) { if (null == _target) return true; // 將目標對象范圍內的事件鏤空(使其穿過) return !RectTransformUtility.RectangleContainsScreenPoint(_target, screenPos, eventCamera); } protected override void Awake() { base.Awake(); _cacheTrans = GetComponent<RectTransform>(); } #if UNITY_EDITOR void Update() { _canRefresh = true; _RefreshView(); }#endif}
看完上述內容,你們掌握Unity中怎么實現新手引導鏤空效果的方法了嗎?如果還想學到更多技能或想了解更多相關內容,歡迎關注億速云行業資訊頻道,感謝各位的閱讀!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。