如何简单的实现新手引导之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