先声明一下,UNITY新手,如果说的有不对的地方,欢迎各位大神指正。
最近在项目需要实现新手引导,最基础的需求就是需要一个带黑色遮罩的引导UI,类似下图这种:
对,就是这么敷衍的UI,因为是我随手做的。
这里有两个关键点:
1. 黑色的遮罩要怎么做,才能挡住其他部分而留出目标的按钮
2.点击事件要怎么处理
我找到过一种解决方案: 添加一个顶层UI,添加一个黑色半透明的UIWidget,然后COPY一份要引导的空间的GameObject, 然后加到这个引导的UI上,只要这个COPY的GAMEOBJECT的深度比半透明黑的要高就行了。然后收到点击时间后,再去模拟点击原来的控件。这个方案应该是可行的,但是我没有采纳,主要是不想要这个拷贝的步骤,点击事件的模拟也不是一件开心的事情。我决定用另外一个方案,上层的遮罩的黑色半透明区域和boxcolider都只覆盖目标以外的部分,点击事件的话直接添加原来的事件监听里,来省下GameObject的拷贝的过程。
实现我想要的黑色的遮罩的效果,最早我是想用一个笨办法:加4个UIWidget和4个BoxColider,就能彻底围住目标控件。这么做也不是不行,实在是有些丑陋,所幸我发现已经有人分享这样的控件: http://blog.csdn.net/lzdidiv/article/details/72293727
感谢这位作者,我测试过,效果完全没问题。
接下来是点击事件的问题。我添加了一个脚本NavControl,用来定位目标控件和做点击事件的添加的:
using System;
using System.Collections.Generic;
using UnityEngine;
public class NavControl : MonoBehaviour
{
public static List<NavControl> activeControlList = new List<NavControl>();
public string nodeId;
public UIWidget targetWidget;
private UIEventListener.VoidDelegate clickCallback;
public bool AddOnClickEvent(UIEventListener.VoidDelegate callback)
{
if (callback == null)
return false;
UIEventListener listener = this.gameObject.GetComponent<UIEventListener>();
if (listener == null)
{
UIToggle toggle = this.gameObject.GetComponent<UIToggle>();
if (toggle)
{
EventDelegate.Add(toggle.onChange, onClick2);
}
else
{
Debug.LogError(string.Format("onAddClickEvent Can't not find event listener:{0}", this.nodeId));
return false;
}
}
else
{
listener.onClick += onClick;
}
clickCallback = callback;
return true;
}
public void RemoveOnClickEvent()
{
UIEventListener listener = this.gameObject.GetComponent<UIEventListener>();
if (listener == null)
{
UIToggle toggle = this.gameObject.GetComponent<UIToggle>();
if (toggle)
{
EventDelegate.Remove(toggle.onChange, onClick2);
}
else
{
Debug.LogError(string.Format("onRemoveClickEvent Can't not find event listener:{0}", this.nodeId));
}
return;
}
else
{
listener.onClick -= onClick;
}
}
public static NavControl getNavControl(string key)
{
for(int i = 0; i < activeControlList.Count; ++i)
{
if (activeControlList[i].nodeId == key)
{
return activeControlList[i];
}
}
return null;
}
private void onClick(GameObject go1)
{
if (clickCallback == null || targetWidget == null)
return;
clickCallback(targetWidget.gameObject);
}
private void onClick2()
{
if (clickCallback == null || targetWidget == null)
return;
clickCallback(targetWidget.gameObject);
}
void Awake()
{
if (targetWidget == null)
{
targetWidget = this.gameObject.GetComponent<UIWidget>();
}
}
void OnEnable()
{
activeControlList.Add(this);
}
void OnDisable()
{
activeControlList.Remove(this);
}
}
在AddOnClickEvent函数里面,可以看到我支持了两种情况的点击事件的插入: UIEventListener和UIToggle, 在我的项目里,这两种已经足够覆盖新手引导的需求,如果有其他的需求,扩展这里的逻辑就是。
在这个脚本里面,有一个nodeId的变量,nodeId必须是全局唯一的,这个是用到标记新手引导对应的控件。而另外一个成员targetWidget, 是用来做遮罩的对位的,如果没有设置,会默认从当前的GameObject上获取UIWidget
接下来我写了个贼简单的demo,提供我的思路给大家参考。
如第一个敷衍的图,上面有三个按钮, 现在我需要引导玩家依次点击按钮111,按钮222和按钮Close, prefabe结构如下:
在btn1,btn2和btn3上,我都添加NavControl的脚本
这里的NodeId我设置成和GameObject的名字一样,以示区分。
在nav的gameObject下我添加UIMaskWidget的脚本。
TestUI挂上了一个简单的测试脚本,代码如下:
using UnityEngine;
using System.Collections;
using System.Collections.Generic;
public class TestNav : MonoBehaviour {
private GameObject btn1;
private GameObject btn2;
private GameObject btn3;
private GameObject btnStart;
private UIMaskWidget maskWidget;
private Queue<string> navQueue = new Queue<string>();
// Use this for initialization
void Start () {
navQueue.Enqueue("btn1");
navQueue.Enqueue("btn2");
navQueue.Enqueue("btn3");
btn1 = gameObject.transform.FindChild("btn1").gameObject;
btn2 = gameObject.transform.FindChild("btn2").gameObject;
btn3 = gameObject.transform.FindChild("btn3").gameObject;
btnStart = gameObject.transform.FindChild("btnStart").gameObject;
maskWidget = gameObject.transform.FindChild("nav").GetComponent<UIMaskWidget>();
UIEventListener.Get(btnStart).onClick += (GameObject go1) =>
{
btn1.SetActive(true);
btn2.SetActive(true);
btn3.SetActive(true);
maskWidget.gameObject.SetActive(true);
btnStart.SetActive(false);
showNextNav();
};
UIEventListener.Get(btn1).onClick += (GameObject go) =>
{
};
UIEventListener.Get(btn2).onClick += (GameObject go) =>
{
};
UIEventListener.Get(btn3).onClick += (GameObject go) =>
{
};
}
void showNextNav()
{
if (navQueue.Count == 0)
{
maskWidget.gameObject.SetActive(false);
return;
}
string key = navQueue.Dequeue();
NavControl control = NavControl.getNavControl(key);
if (control != null)
{
if (control.targetWidget != null)
{
this.maskWidget.transform.position = control.targetWidget.transform.position;
this.maskWidget.width = control.targetWidget.width;
this.maskWidget.height = control.targetWidget.height;
control.AddOnClickEvent((GameObject btnGo) => {
showNextNav();
}
);
}
}
}
// Update is called once per frame
void Update () {
}
}
关键的逻辑就在showNextNav这个函数里面, 调用NavControl的静态函数获取目标控件,然后设置UIMaskWidget的位置和遮罩的区域。
代码比较简单,只是演示我的思路,有疑问或者异议,欢迎讨论。
我的代码是基于unity5.3.4, ngui 3.8.2, 测试工程链接: https://files.cnblogs.com/files/lyrers/NavControl.zip。