如何簡單的實現新手引導之UGUI篇

一個完整的遊戲項目肯定是要做新手引導的， 而引導做的好壞可能會影響玩家的留存。 那麼怎麼簡單的實現個簡有效的引導呢！先不說廢話， 先看看效果， 這是一個基於UGUI做的一個簡單的引導！

怎麼樣， 看著是那麼回事吧？看起來確實有點醜， 如果給按鈕邊緣加上縮放或者流光特效， 那麼逼格瞬間就上去了， 可惜， 沒找到資源。 最重要的是實現起來灰常簡單， 就一個函數搞定。

1， 如何實現引導：

1， 首先創建一個Mask遮罩， 保證任意地方接受不到點擊， 適當的調整下Alpha。

2， 將要點擊的按鈕高亮， 保證引導按鈕可以回應到點擊事件。

3， 引導類型判斷：如果是強制引導， 沒辦法， 那就老老實實的點高亮的引導按鈕吧！如果是非強制引導， 觸發引導事件後開始計時， 如果計時超過5秒自動解除引導。

4， 引導回掉處理， 如果該步引導是本引導組的最後一步， 那麼回掉事件處理正常遊戲邏輯。

5， 引導存檔。 前天我們遊戲在測試時發現， 玩家在85級開啟交易行功能了， 引導完成後下線再上線該引導又來了一邊， 這是非常討厭的， 很有可能因為這個導致玩家流失。 所 以存檔是必不可少的， 無論是單機還是網遊。

2， 引導如何流程化：

在我們這個遊戲中引導我們走的是配表， 程式做好引導機制， 策劃直接配置Excel表格即可。 引導按照功能劃分， 也就有了所謂的引導組。 一個功能內部原子化細分這樣每個功能有多少步引導就非常詳細了。 這裡就體現出了所謂的軟體的工藝流程！

3， 引導如何自動化：

自動引導這個到底有沒有必要呢？當一個遊戲的功能和複雜度極高時， 這個是十分必要的。 就拿我們遊戲來說吧，

翅膀功能200級開啟， 翅膀強化遇到一個bug， 用GM命令setlevel 200， 好了等級到了， 1-200級的引導要一個一個去點開， 簡直是要命啊！所以引導的自動化是十分必要的， 自動完成引導節省了很多時間。 如何實現自動化引導， 那麼引導組加上引導步驟id使用強制引導的方式很簡單就實現了！

4， 具體實現

這裡使用的是Canvas + Graphic Raycaster的方式。

using UnityEngine; using System.Collections; using UnityEngine.UI; using System; public class LoginGuid : MonoBehaviour { public GameObject prb_mask; public GameObject btn_menue1; public GameObject btn_menue2; private GameObject mask; public LoginPanelView loginPanel; public static Action GuidCallback; // Use this for initialization void Start { GuidCallback += GuidFinsih; EventTriggerListener.GetListener(btn_menue1).onPointerClick += go => { if (loginPanel != null) { loginPanel.gameObject.SetActive(true); GuidStep2; } else Debug.LogError("panel_login is not found!"); }; EventTriggerListener.GetListener(btn_menue2).onPointerClick += go => { GuidStep3; }; GuidStep1; } /// /// 第一步引導 /// void GuidStep1 { Debug.Log("開始第一步引導"); //創建遮罩Mask mask = Instantiate(prb_mask) as GameObject; mask.transform.parent = this.gameObject.transform; mask.transform.localPosition = Vector3.zero; mask.transform.localScale = Vector3.one; mask.transform.SetAsLastSibling; btn_menue1.AddComponent.overrideSorting = true; SetMaskAndBtnHiglight(null, btn_menue1); } void GuidStep2 { Debug.Log("第二步引導"); SetMaskAndBtnHiglight(btn_menue1, btn_menue2); } void GuidStep3 { Debug.Log("第三步引導"); SetMaskAndBtnHiglight(btn_menue2, loginPanel.btn_login); } /// /// 還原上一個引導 /// 設置下一個引導 /// /// 上一個引導按鈕 /// 下一個引導按鈕 void SetMaskAndBtnHiglight(GameObject lastStep, GameObject nextStep) { if (lastStep) { lastStep.GetComponent.overrideSorting = false; Destroy(lastStep.GetComponent); } Canvas nextCanvas = nextStep.GetComponent; if (nextCanvas) nextCanvas.overrideSorting = true; else nextStep.AddComponent.overrideSorting = true; nextStep.AddComponent; } void GuidFinsih { Debug.Log("引導完成"); Destroy(mask); } }

一個簡單而實用的引導就實現了， 下一篇研究下NGUI的引導實現！如有問題或者建議， 歡迎交流！

項目位址：https://git.oschina.net/wuzhang/uguinewguid.git