用UGUI制作手游新手指引
更新:HHH   时间:2023-1-7


因为这几天工作上的需要,研究了下用UGUI制作新手指引。可以实现这个效果的方法有很多,都用了一遍,最后还是感觉这个方法比较好。我们需要创建一个画布,然后在画布下创建需要新手指引用到的按钮,

  






然后在需要新手指引的按钮上加2个组件,一个是 Graphic Raycaster 和Canvas ,Graphic Raycaster是用来是否接受可以交互的,Canvas是改变显示的,记得我们这里需要一个遮罩,就用一个Image来做吧

然后我们给这个4个按钮都加上这2个组件,因为这里我是测试所以我需要一运行游戏就有一个按钮是高亮状态,所以我这里用代码控制了下,然后我们这里还需要一个新手指引里面的手势指示,这个是实例化出来的。

绑定脚本UI控制器里面效果图














下面是测试代码:

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 还有一个组件也可以Canvas Group,具体大家可以去看下API,这些组件的用法 。






返回开发技术教程...