如何簡單的實現新手引導之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();
    }

    /// <summary>
    /// 第一步引導
    /// </summary>
    void GuidStep1()
    {
        Debug.Log("<color=red>開始第一步引導</color>");

        //創建遮罩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<Canvas>().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);
    }

    /// <summary>
    /// 還原上一個引導
    /// 設置下一個引導
    /// </summary>
    /// <param name="lastBtn">上一個引導按鈕</param>
    /// <param name="nextStep">下一個引導按鈕</param>
    void SetMaskAndBtnHiglight(GameObject lastStep, GameObject nextStep)
    {
        if (lastStep)
        {
            lastStep.GetComponent<Canvas>().overrideSorting = false;
            Destroy(lastStep.GetComponent<GraphicRaycaster>());
        }
        Canvas nextCanvas = nextStep.GetComponent<Canvas>();
        if (nextCanvas)
            nextCanvas.overrideSorting = true;
        else
            nextStep.AddComponent<Canvas>().overrideSorting = true;
        nextStep.AddComponent<GraphicRaycaster>();
    }

    void GuidFinsih()
    {
        Debug.Log("<color=red>引導完成</color>");
        Destroy(mask);
    }
}

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

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