如何分析游戏UI框架设计指的模态窗体管理
游戏UI框架设计
--模态窗体管理
我们在开发UI窗体时，对于“弹出窗体”往往因为需要玩家优先处理弹出小窗体，则要求玩家不能(无法)点击“父窗体”，这种窗体就是典型的“模态窗体”。在此笔者设计了四种模式类型：完全透明、半透明、低透明度、透明且可以穿透。
（透明不能穿透）
(半透明不能穿透)
(低透明度，不能穿透)
对于“模态窗体”的基本实现原理是：
在弹出窗体的后面增加一层“UI遮罩窗体”，当需要弹出特定模态窗体时，脚本自动控制“UI遮罩窗体”的“层级”，把弹出模特窗体与普通窗体之间进行隔离，起到突出显示与遮挡用户点击其他窗体的作用。原理如下图所示：
在上图左边的层级视图中，有一个“_UIMaskPanel”的特殊窗体，这就是“UI遮罩窗体”，在不需要弹出显示的时候，这个窗体是“禁用”状态。 为了更好适用不同开发需求，对于弹出窗体，我们上面定义了关于弹出窗体的不同性质： 完全透明、半透明、低透明度、透明且可以穿透。 这四种类型功能的实现原理是控制“_UIMaskPanel”的颜色数值以及透明度实现的，见下图所示：
说明： 上图右边属性就是“UI遮罩窗体”的属性栏，笔者通过脚本控制Image组件的Color 组件，来实现"模态窗体”的不同显示性质。
原理讲完，贴出控制代码如下：
/***
*
* Title: "SUIFW" UI框架项目
* 主题： UI遮罩管理器
* Description:
* 功能： 负责“弹出窗体”模态显示实现
*
* Date: 2017
* Version: 0.1版本
* Modify Recoder:
*
*
*/
using System.Collections;
using System.Collections.Generic;
using System.Net.Mime;
using UnityEngine;
using UnityEngine.UI;
namespace SUIFW
{
public class UIMaskMgr : MonoBehaviour {
/* 字段 */
//本脚本私有单例
private static UIMaskMgr _Instance = null;
//UI根节点对象
private GameObject _GoCanvasRoot = null;
//UI脚本节点对象
private Transform _TraUIScriptsNode = null;
//顶层面板
private GameObject _GoTopPanel;
//遮罩面板
private GameObject _GoMaskPanel;
//UI摄像机
private Camera _UICamera;
//UI摄像机原始的“层深”
private float _OriginalUICameralDepth;
//得到实例
public static UIMaskMgr GetInstance()
{
if (_Instance==null)
{
_Instance = new GameObject("_UIMaskMgr").AddComponent
}
return _Instance;
}
void Awake()
{
//得到UI根节点对象、脚本节点对象
_GoCanvasRoot = GameObject.FindGameObjectWithTag(SysDefine.SYS_TAG_CANVAS);
_TraUIScriptsNode = UnityHelper.FindTheChildNode(_GoCanvasRoot, SysDefine.SYS_SCRIPTMANAGER_NODE);
//把本脚本实例，作为“脚本节点对象”的子节点。
UnityHelper.AddChildNodeToParentNode(_TraUIScriptsNode,this.gameObject.transform);
//得到“顶层面板”、“遮罩面板”
_GoTopPanel = _GoCanvasRoot;
_GoMaskPanel = UnityHelper.FindTheChildNode(_GoCanvasRoot, "_UIMaskPanel").gameObject;
//得到UI摄像机原始的“层深”
_UICamera = GameObject.FindGameObjectWithTag("_TagUICamera").GetComponent
if (_UICamera != null)
{
//得到UI摄像机原始“层深”
_OriginalUICameralDepth = _UICamera.depth;
}
else
{
Debug.Log(GetType()+"/Start()/UI_Camera is Null!,Please Check! ");
}
}
///
/// 设置遮罩状态
///
/// 需要显示的UI窗体
/// 显示透明度属性
public void SetMaskWindow(GameObject goDisplayUIForms,UIFormLucenyType lucenyType=UIFormLucenyType.Lucency)
{
//顶层窗体下移
_GoTopPanel.transform.SetAsLastSibling();
//启用遮罩窗体以及设置透明度
switch (lucenyType)
{
//完全透明，不能穿透
case UIFormLucenyType.Lucency:
print("完全透明");
_GoMaskPanel.SetActive(true);
Color newColor1=new Color(255/255F,255/255F,255/255F,0F/255F);
_GoMaskPanel.GetComponent
break;
//半透明，不能穿透
case UIFormLucenyType.Translucence:
print("半透明");
_GoMaskPanel.SetActive(true);
Color newColor2 = new Color(220/255F, 220/255F, 220/255F, 50/255F);
_GoMaskPanel.GetComponent
break;
//低透明，不能穿透
case UIFormLucenyType.ImPenetrable:
print("低透明");
_GoMaskPanel.SetActive(true);
Color newColor3=new Color(50/255F,50/255F,50/255F,200F/255F);
_GoMaskPanel.GetComponent
break;
//可以穿透
case UIFormLucenyType.Pentrate:
print("允许穿透");
if (_GoMaskPanel.activeInHierarchy)
{
_GoMaskPanel.SetActive(false);
}
break;
default:
break;
}
//遮罩窗体下移
_GoMaskPanel.transform.SetAsLastSibling();
//显示窗体的下移
goDisplayUIForms.transform.SetAsLastSibling();
//增加当前UI摄像机的层深（保证当前摄像机为最前显示）
if (_UICamera!=null)
{
_UICamera.depth = _UICamera.depth + 100; //增加层深
}
}
///
/// 取消遮罩状态
///
public void CancelMaskWindow()
{
//顶层窗体上移
_GoTopPanel.transform.SetAsFirstSibling();
//禁用遮罩窗体
if (_GoMaskPanel.activeInHierarchy)
{
//隐藏
_GoMaskPanel.SetActive(false);
}
//恢复当前UI摄像机的层深
if (_UICamera != null)
{
_UICamera.depth = _OriginalUICameralDepth; //恢复层深
}
}
}
}
关于上述定义的UIMaskMgr.cs 脚本代码 ，笔者在“BaseUIForm.cs” 中做了封装，使其可以在框架中自动管理，无需框架外客户程序的处理。BaseUIForm.cs 代码如下：
/***
*
* Title: "SUIFW" UI框架项目
* 主题: UI窗体的父类
* Description:
* 功能：定义所有UI窗体的父类。
* 定义四个生命周期
*
* 1：Display 显示状态。
* 2：Hiding 隐藏状态
* 3：ReDisplay 再显示状态。
* 4：Freeze 冻结状态。
*
*
* Date: 2017
* Version: 0.1版本
* Modify Recoder:
*
*
*/
using System.Collections;
using System.Collections.Generic;
using System.ComponentModel.Design;
using UnityEngine;
namespace SUIFW
{
public class BaseUIForm : MonoBehaviour {
/*字段*/
private UIType _CurrentUIType=new UIType();
/* 属性*/
//当前UI窗体类型
public UIType CurrentUIType
{
get { return _CurrentUIType; }
set { _CurrentUIType = value; }
}
#region 窗体的四种(生命周期)状态
///
/// 显示状态
///
public virtual void Display()
{
this.gameObject.SetActive(true);
//设置模态窗体调用(必须是弹出窗体)
if (_CurrentUIType.UIForms_Type==UIFormType.PopUp)
{
UIMaskMgr.GetInstance().SetMaskWindow(this.gameObject,_CurrentUIType.UIForm_LucencyType);
}
}
///
/// 隐藏状态
///
public virtual void Hiding()
{
this.gameObject.SetActive(false);
//取消模态窗体调用
if (_CurrentUIType.UIForms_Type == UIFormType.PopUp)
{
UIMaskMgr.GetInstance().CancelMaskWindow();
}
}
///
/// 重新显示状态
///
public virtual void Redisplay()
{
this.gameObject.SetActive(true);
//设置模态窗体调用(必须是弹出窗体)
if (_CurrentUIType.UIForms_Type == UIFormType.PopUp)
{
UIMaskMgr.GetInstance().SetMaskWindow(this.gameObject, _CurrentUIType.UIForm_LucencyType);
}
}
///
/// 冻结状态
///
public virtual void Freeze()
{
this.gameObject.SetActive(true);
}
#endregion
}
}