首页 > 代码库 > 游戏UI框架设计(四) : 模态窗体管理
游戏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<UIMaskMgr>();
}
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<Camera>();
if (_UICamera != null)
{
//得到UI摄像机原始“层深”
_OriginalUICameralDepth = _UICamera.depth;
}
else
{
Debug.Log(GetType()+"/Start()/UI_Camera is Null!,Please Check! ");
}
}
/// <summary>
/// 设置遮罩状态
/// </summary>
/// <param name="goDisplayUIForms">需要显示的UI窗体</param>
/// <param name="lucenyType">显示透明度属性</param>
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<Image>().color = newColor1;
break;
//半透明，不能穿透
case UIFormLucenyType.Translucence:
print("半透明");
_GoMaskPanel.SetActive(true);
Color newColor2 = new Color(220/255F, 220/255F, 220/255F, 50/255F);
_GoMaskPanel.GetComponent<Image>().color = newColor2;
break;
//低透明，不能穿透
case UIFormLucenyType.ImPenetrable:
print("低透明");
_GoMaskPanel.SetActive(true);
Color newColor3=new Color(50/255F,50/255F,50/255F,200F/255F);
_GoMaskPanel.GetComponent<Image>().color = newColor3;
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; //增加层深
}
}
/// <summary>
/// 取消遮罩状态
/// </summary>
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 窗体的四种(生命周期)状态
/// <summary>
/// 显示状态
/// </summary>
public virtual void Display()
{
this.gameObject.SetActive(true);
//设置模态窗体调用(必须是弹出窗体)
if (_CurrentUIType.UIForms_Type==UIFormType.PopUp)
{
UIMaskMgr.GetInstance().SetMaskWindow(this.gameObject,_CurrentUIType.UIForm_LucencyType);
}
}
/// <summary>
/// 隐藏状态
/// </summary>
public virtual void Hiding()
{
this.gameObject.SetActive(false);
//取消模态窗体调用
if (_CurrentUIType.UIForms_Type == UIFormType.PopUp)
{
UIMaskMgr.GetInstance().CancelMaskWindow();
}
}
/// <summary>
/// 重新显示状态
/// </summary>
public virtual void Redisplay()
{
this.gameObject.SetActive(true);
//设置模态窗体调用(必须是弹出窗体)
if (_CurrentUIType.UIForms_Type == UIFormType.PopUp)
{
UIMaskMgr.GetInstance().SetMaskWindow(this.gameObject, _CurrentUIType.UIForm_LucencyType);
}
}
/// <summary>
/// 冻结状态
/// </summary>
public virtual void Freeze()
{
this.gameObject.SetActive(true);
}
#endregion
}
}
以上所讲解的是大体实现思路，还有很多的小细节由于时间关系没有披露，所以特提供下载链接，供感兴趣的开发者研究讨论。欢迎大家提供进一步完善的思路与建议。
本游戏UI框架（截止到以上部分）下载参考链接： 链接：http://pan.baidu.com/s/1nv4plFV 密码：6o0n
说明： 如果有想进一步查看笔者更加详细的视频讲解，请围观以下地址：
链接： http://edu.51cto.com/course/course_id-8411.html
先讲解到这，我们下次讲解： 游戏UI框架设计(五)：配置管理与日志系统
本文出自 “刘老师讲Unity” 博客，请务必保留此出处http://liuguozhu.blog.51cto.com/9142031/1904187
游戏UI框架设计(四) : 模态窗体管理