开启辅助访问
 找回密码
 注册帐号

扫一扫,访问微社区

开发者专栏

关注:1702

当前位置:游戏蛮牛 技术专区 开发者专栏

__________________________________________________________________________________
开发者干货区版块规则:

  1、文章必须是图文形式。(至少2幅图)
      2、文章字数必须保持在1500字节以上。(编辑器右下角有字数检查)
      3、本版块只支持在游戏蛮牛原创首发,不支持转载。
      4、本版块回复不得无意义,如:顶、呵呵、不错......【真的会扣分的哦】
      5、......
__________________________________________________________________________________
查看: 1131|回复: 13

[刘国柱] 游戏UI框架设计(四): 模态窗体管理

[复制链接]  [移动端链接]

7

主题

15

帖子

343

积分

Rank: 9Rank: 9Rank: 9

UID
34511
好友
10
蛮牛币
320
威望
0
注册时间
2014-7-15
在线时间
114 小时
最后登录
2017-5-24

专栏作家

发表于 2017-4-21 11:59:23 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?注册帐号

x
本帖最后由 liu_guozhu 于 2017-4-21 12:01 编辑

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



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

图1.png
             (透明不能穿透)

图2.png
             (半透明不能穿透)

图3.png
               (低透明度,不能穿透)

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

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

    说明: 上图右边属性就是“UI遮罩窗体”的属性栏,笔者通过脚本控制Image组件的Color 组件,来实现"模态窗体”的不同显示性质。

   原理讲完,贴出控制代码如下:
[C#] 纯文本查看 复制代码
/***
 * 
 *    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 代码如下:

[C#] 纯文本查看 复制代码
/***
*
*    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.manew.com/course/228


先讲解到这,我们下次讲解: 游戏UI框架设计(五):配置管理与日志系统   





评分

参与人数 3鲜花 +54 收起 理由
anonymouss + 2 很给力!
Ben小浩 + 2 很给力!
朱迪 + 50 很给力!

查看全部评分


回复

使用道具 举报

排名
115
昨日变化

2

主题

1486

帖子

4387

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
47709
好友
0
蛮牛币
2994
威望
0
注册时间
2014-10-5
在线时间
1075 小时
最后登录
2017-5-29
发表于 2017-4-21 12:04:32 | 显示全部楼层
哎...今天够累的,签到来了游戏源码下载...

回复 支持 反对

使用道具 举报

5熟悉之中
526/1000
排名
4990
昨日变化
52

5

主题

193

帖子

526

积分

Rank: 5Rank: 5

UID
187870
好友
0
蛮牛币
846
威望
0
注册时间
2016-11-29
在线时间
134 小时
最后登录
2017-5-29
发表于 2017-4-21 14:54:22 | 显示全部楼层
好人一生平安!

回复

使用道具 举报

5熟悉之中
505/1000
排名
4421
昨日变化
2

1

主题

117

帖子

505

积分

Rank: 5Rank: 5

UID
194381
好友
0
蛮牛币
1099
威望
0
注册时间
2016-12-31
在线时间
163 小时
最后登录
2017-5-28
发表于 2017-4-21 15:38:43 | 显示全部楼层

回复

使用道具 举报

6蛮牛粉丝
1340/1500
排名
17818
昨日变化
3

2

主题

1140

帖子

1340

积分

Rank: 6Rank: 6Rank: 6

UID
185807
好友
0
蛮牛币
1533
威望
0
注册时间
2016-11-22
在线时间
180 小时
最后登录
2017-5-27
发表于 2017-4-21 15:39:07 | 显示全部楼层
赞,不错不错,学习了,谢谢分享

回复 支持 反对

使用道具 举报

2初来乍到
127/150
排名
12349
昨日变化
2

2

主题

56

帖子

127

积分

Rank: 2Rank: 2

UID
206008
好友
0
蛮牛币
207
威望
0
注册时间
2017-2-10
在线时间
27 小时
最后登录
2017-5-13
发表于 2017-4-21 15:43:56 | 显示全部楼层
支持支持!!!

回复

使用道具 举报

6蛮牛粉丝
1340/1500
排名
17818
昨日变化
3

2

主题

1140

帖子

1340

积分

Rank: 6Rank: 6Rank: 6

UID
185807
好友
0
蛮牛币
1533
威望
0
注册时间
2016-11-22
在线时间
180 小时
最后登录
2017-5-27
发表于 2017-4-21 17:52:10 | 显示全部楼层
赞,不错不错,谢谢分享
[发帖际遇]: 东坡肘子2010 乐于助人,奖励 1 蛮牛币. 幸运榜 / 衰神榜

回复 支持 反对

使用道具 举报

3偶尔光临
232/300
排名
6417
昨日变化
4

0

主题

17

帖子

232

积分

Rank: 3Rank: 3Rank: 3

UID
202886
好友
0
蛮牛币
386
威望
0
注册时间
2017-1-18
在线时间
79 小时
最后登录
2017-5-27
发表于 2017-4-21 20:06:02 | 显示全部楼层
大赞,对新手来说了解这些帮助极大!

回复 支持 反对

使用道具 举报

5熟悉之中
869/1000
排名
2738
昨日变化

0

主题

172

帖子

869

积分

Rank: 5Rank: 5

UID
138112
好友
0
蛮牛币
750
威望
0
注册时间
2016-3-2
在线时间
323 小时
最后登录
2017-5-29
发表于 2017-4-22 08:48:38 | 显示全部楼层
66666666666

回复

使用道具 举报

排名
46663
昨日变化
22

0

主题

2

帖子

4

积分

Rank: 1

UID
218916
好友
0
蛮牛币
41
威望
0
注册时间
2017-4-22
在线时间
2 小时
最后登录
2017-4-24
发表于 2017-4-22 17:13:16 | 显示全部楼层
感谢分享,帮助很大,谢谢!

回复 支持 反对

使用道具 举报

5熟悉之中
666/1000
排名
4484
昨日变化

0

主题

67

帖子

666

积分

Rank: 5Rank: 5

UID
26409
好友
2
蛮牛币
1803
威望
0
注册时间
2014-5-23
在线时间
378 小时
最后登录
2017-5-14

VIP

发表于 2017-4-22 18:02:59 | 显示全部楼层
支持~ 支持~

回复

使用道具 举报

4四处流浪
318/500
排名
4451
昨日变化

0

主题

19

帖子

318

积分

Rank: 4

UID
181034
好友
0
蛮牛币
696
威望
0
注册时间
2016-11-12
在线时间
75 小时
最后登录
2017-5-25
发表于 2017-4-24 08:11:54 | 显示全部楼层
谢谢分享,给力

回复

使用道具 举报

排名
11629
昨日变化
5

0

主题

8

帖子

88

积分

Rank: 2Rank: 2

UID
211352
好友
0
蛮牛币
183
威望
0
注册时间
2017-3-11
在线时间
32 小时
最后登录
2017-5-27
发表于 2017-4-28 11:45:25 | 显示全部楼层

赞,不错不错,学习了,谢谢分享

回复 支持 反对

使用道具 举报

2初来乍到
135/150
排名
14819
昨日变化
3

0

主题

82

帖子

135

积分

Rank: 2Rank: 2

UID
109592
好友
0
蛮牛币
13
威望
0
注册时间
2015-6-21
在线时间
25 小时
最后登录
2017-5-19
发表于 2017-5-3 19:18:35 | 显示全部楼层
多謝分享

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册帐号

本版积分规则

快速回复 返回顶部 返回列表