本文链接： https://blog.csdn.net/wangjiangrong/article/details/90172602

前言

做游戏的话必定少不了新手引导，一般的新手引导的展示基本都是在UI场景下，添加一个灰色的遮罩层，然后高亮显示引导玩家的内容（比如需要点击的按钮），并显示一写提示语（比如 "点击此处"）。

思路

根据上述的表现形式，我们大致可以将一个新手引导的UI分为简单的三个部分，遮罩层，按钮，提示。其中遮罩层和提示都可以事先设定好，但是按钮部分，由于一般引导都有好多步骤，跳跃过多个UI，因此引导玩家点击的按钮都不尽相同。因此，这个按钮需要我们动态来生成。

其中一种方法便是，因为所有的引导基本都是一条逻辑走到结束，中途基本不存在分岔。所以我们可以清楚的知道这个引导第一步会是哪个UI界面，并要点击哪个按钮，然后后面第二步，第三步。。。到最后一步，都了如指掌。因此拆分到每一步，我们都知道当前显示的UI是什么，以及其内部结构。所以我们可以把每一步需要引导点击的那个按钮的名称路径通过配置事先配置好。然后开始引导的时候根据步骤，用GameObject.Find(按钮路径名称)找到需要点击的那个按钮，用GameObject.Instantiate(按钮)将其copy一份，显示在遮罩层上。然后通过点击copy的按钮，去触发原按钮的点击事件，执行到下一步操作。

简单实现

首先我们搭建一个简单的UI界面，如下

并为其添加一个实现UI逻辑的脚本UIController

using UnityEngine;
using UnityEngine.UI;

public class UIController : MonoBehaviour {

    [SerializeField] Button m_btn;//开始按钮

    void Start () {
        m_btn.onClick.AddListener(OnClick);
    }

    void OnClick() {
        Debug.Log("OnClick");
    }
}

接着，我们来做我们新手引导的UI，即一个简单的遮罩层和提示语，如图

并未遮罩层添加一个逻辑脚本GuideController，主要功能就是复制需要点击的按钮，并放置好位置，同时修改提示语的位置。

using UnityEngine;
using UnityEngine.UI;

public class GuideController : MonoBehaviour {

    [SerializeField] GameObject m_guideMask;//新手引导遮罩
    [SerializeField] GameObject m_guideHint;//新手引导提示

    string m_guideBtnName = "Canvas/Button";//新手引导需要引导玩家点击的按钮名称，事先配置
    Button m_guideBtn;
    Button m_guideBtnCopy;

    void Start() {
        
        m_guideBtn = GameObject.Find(m_guideBtnName).GetComponent<Button>();
        if(m_guideBtn == null) {
            Debug.LogError("Not Find GuideBtn");
        }

        //复制引导按钮，设置位置，使其在遮罩层上
        m_guideBtnCopy = GameObject.Instantiate(m_guideBtn).GetComponent<Button>();
        m_guideBtnCopy.onClick.AddListener(GuideBtnClick);
        m_guideBtnCopy.transform.SetParent(m_guideMask.transform);
        m_guideBtnCopy.transform.position = m_guideBtn.transform.position;
        m_guideBtnCopy.transform.localScale = m_guideBtn.transform.localScale;

        //修改提示语位置
        m_guideHint.transform.localPosition = m_guideBtnCopy.transform.localPosition + Vector3.left * 150;

        //显示引导遮罩
        m_guideMask.SetActive(true);
    }

    void GuideBtnClick() {
        //触发原按钮的点击方法
        m_guideBtn.OnSubmit(null);

        //关闭新手引导
        m_guideMask.SetActive(false);
        Destroy(m_guideBtnCopy);
        m_guideBtnCopy = null;
    }
}

最终效果如下：

运行后，显示遮罩和引导按钮：

点击开始按钮后，打印OnClick，遮罩消失。上述是一个最简化的demo，实际开发中还需小伙伴们自行优化。

UGUI 新手引导的简单实现

前言

思路

简单实现

猜你喜欢