游戏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
原文地址:http://liuguozhu.blog.51cto.com/9142031/1904187