用UGUI制作手游新手指引

因?yàn)檫@幾天工作上的需要，研究了下用UGUI制作新手指引?？梢詫?shí)現(xiàn)這個(gè)效果的方法有很多，都用了一遍，最后還是感覺這個(gè)方法比較好。我們需要?jiǎng)?chuàng)建一個(gè)畫布，然后在畫布下創(chuàng)建需要新手指引用到的按鈕，

然后在需要新手指引的按鈕上加2個(gè)組件，一個(gè)是 Graphic Raycaster 和Canvas ,Graphic Raycaster是用來(lái)是否接受可以交互的，Canvas是改變顯示的，記得我們這里需要一個(gè)遮罩，就用一個(gè)Image來(lái)做吧

然后我們給這個(gè)4個(gè)按鈕都加上這2個(gè)組件，因?yàn)檫@里我是測(cè)試所以我需要一運(yùn)行游戲就有一個(gè)按鈕是高亮狀態(tài)，所以我這里用代碼控制了下，然后我們這里還需要一個(gè)新手指引里面的手勢(shì)指示，這個(gè)是實(shí)例化出來(lái)的。

綁定腳本UI控制器里面效果圖

下面是測(cè)試代碼：

using UnityEngine;

using UnityEngine.UI;

using System.Collections;

using System.Collections.Generic;

public class NewbieGuideTest : MonoBehaviour

{

    public bool IsGuider = false;

    public Image Instructions;

    public List<Button> GuideBtn;

    void Start()

    {

        Image go = GameObject.Instantiate(Instructions) as Image;

        go.transform.SetParent(GuideBtn[0].transform);

        go.transform.localPosition = Vector3.zero;

        go.transform.localScale = Vector3.one;

        //GuideBtn[0].GetComponent<Canvas>().overrideSorting = true;

        GuideBtn[0].GetComponent<Canvas>().sortingOrder = 4;   

    }

    public void BeginGuide(int value) 

    {

        switch (value)

        { 

            case 0:             

                Destroy(GameObject.Find("InstructionsImage(Clone)"));

                ChangGuideBtn(value);

                GenerateInstructions(value);

                break;

            case 1:

                Destroy(GameObject.Find("InstructionsImage(Clone)"));

                ChangGuideBtn(value);

                GenerateInstructions(value);

                break;

            case 2:

                Destroy(GameObject.Find("InstructionsImage(Clone)"));

                ChangGuideBtn(value);

                GenerateInstructions(value);

                break;

            case 3:

                break;       

        }  

    }

    public void GenerateInstructions(int value)

    {

        Image go = GameObject.Instantiate(Instructions) as Image;

        go.transform.SetParent(GuideBtn[value+1].transform);

        go.transform.localPosition = Vector3.zero;

        go.transform.localScale = Vector3.one;

    }

    public void ChangGuideBtn(int value)

    {

        GuideBtn[value].GetComponent<Canvas>().overrideSorting = false;

        GuideBtn[value].GetComponent<Canvas>().sortingOrder = -1;

        GuideBtn[value + 1].GetComponent<Canvas>().overrideSorting = true;

        GuideBtn[value + 1].GetComponent<Canvas>().sortingOrder = 2;

    }

}

效果圖：                                                

其他做法還有 改變深度，方法是SetSiblingIndex 還有一個(gè)組件也可以Canvas Group,具體大家可以去看下API，這些組件的用法 。