游戏UI框架设计(四) : 模态窗体管理

时间:2021-12-08 07:33:05

游戏UI框架设计(四)

--模态窗体管理

  我们在开发UI窗体时,对于“弹出窗体”往往因为需要玩家优先处理弹出小窗体,则要求玩家不能(无法)点击“父窗体”,这种窗体就是典型的“模态窗体”。在此笔者设计了四种模式类型:完全透明、半透明、低透明度、透明且可以穿透。

游戏UI框架设计(四) : 模态窗体管理


(透明不能穿透)

游戏UI框架设计(四) : 模态窗体管理


(半透明不能穿透)


游戏UI框架设计(四) : 模态窗体管理

(低透明度,不能穿透)

对于“模态窗体”的基本实现原理是:

    在弹出窗体的后面增加一层“UI遮罩窗体”,当需要弹出特定模态窗体时,脚本自动控制“UI遮罩窗体”的“层级”,把弹出模特窗体与普通窗体之间进行隔离,起到突出显示与遮挡用户点击其他窗体的作用。原理如下图所示:

游戏UI框架设计(四) : 模态窗体管理


在上图左边的层级视图中,有一个“_UIMaskPanel”的特殊窗体,这就是“UI遮罩窗体”,在不需要弹出显示的时候,这个窗体是“禁用”状态。 为了更好适用不同开发需求,对于弹出窗体,我们上面定义了关于弹出窗体的不同性质: 完全透明、半透明、低透明度、透明且可以穿透。 这四种类型功能的实现原理是控制“_UIMaskPanel”的颜色数值以及透明度实现的,见下图所示:

游戏UI框架设计(四) : 模态窗体管理



说明: 上图右边属性就是“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>需要显示的UI窗体</param>
        /// <param>显示透明度属性</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;  //恢复层深
            }
        }


    }
}