UGUI实现简单的新手引导功能

发表于2018-09-30
评论0 7k浏览
几乎所有的游戏项目肯定都会做新手引导功能,引导的好方便玩家熟悉游戏,进而成为自己的忠实玩家,那如何实现一个简而有效的引导呢,下面就来看看本篇文章给大家介绍的基于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);
    }
}
这样一个简单完整的新手引导就实现了,希望可以帮到大家。

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引