Shulou(Shulou.com)06/02 Report--

The editor today takes you to understand how to analyze the modal form management of the game UI framework design. The knowledge points in the article are introduced in great detail. Friends who feel helpful can browse the content of the article together with the editor, hoping to help more friends who want to solve this problem to find the answer to the problem. The following is the editor's in-depth study of "how to analyze the modal form management of game UI framework design".

Game UI Framework Design

-- modal form management

When we develop UI forms, for "pop-up forms" often because players need to give priority to small pop-up forms, players are required to not (cannot) click on "parent form", which is a typical "modal form". Here, the author designs four modes: completely transparent, translucent, low transparent, transparent and translucent.

(transparent and impenetrable)

(translucent impenetrable)

(low transparency, impenetrable)

The basic implementation principles for "modal forms" are:

Add a layer of "UI Mask form" to the back of the pop-up form. When you need to pop up a specific modal form, the script automatically controls the "level" of the "UI Mask form" and isolates the pop-up model form from the ordinary form, thus highlighting and blocking the user from clicking on other forms. The principle is shown in the following figure:

In the hierarchical view on the left side of the image above, there is a special form of "_ UIMaskPanel". This is the "UI Mask form", which is "disabled" when the pop-up display is not needed. In order to better adapt to different development needs, for pop-up forms, we have defined different properties of pop-up forms: completely transparent, translucent, low-transparent, transparent and translucent. These four types of functions are implemented by controlling the color value and transparency of "_ UIMaskPanel", as shown in the following figure:

Description: the right property of the above picture is the property bar of "UI Mask form". The author uses the script to control the Color component of the Image component to achieve the different display properties of the "modal form".

After talking about the principle, the control code is posted as follows:

/ *

*

* Title: "SUIFW" UI framework project

* topic: UI Mask Manager

* Description:

* function: responsible for the implementation of "pop-up form" mode display

*

* Date: 2017

* Version: 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 {

/ * Field * /

/ / Private singleton of this script

Private static UIMaskMgr _ Instance = null

/ / UI root node object

Private GameObject _ GoCanvasRoot = null

/ / UI script node object

Private Transform _ TraUIScriptsNode = null

/ / Top-level panel

Private GameObject _ GoTopPanel

/ / Mask panel

Private GameObject _ GoMaskPanel

/ / UI camera

Private Camera _ UICamera

/ / the original "layer depth" of UI camera

Private float _ OriginalUICameralDepth

/ / get an example

Public static UIMaskMgr GetInstance ()

{

If (_ Instance==null)

{

_ Instance = new GameObject ("_ UIMaskMgr") .AddComponent ()

}

Return _ Instance

}

Void Awake ()

{

/ / get UI root node object and script node object

_ GoCanvasRoot = GameObject.FindGameObjectWithTag (SysDefine.SYS_TAG_CANVAS)

_ TraUIScriptsNode = UnityHelper.FindTheChildNode (_ GoCanvasRoot, SysDefine.SYS_SCRIPTMANAGER_NODE)

/ / take this script instance as a child node of the script node object.

UnityHelper.AddChildNodeToParentNode (_ TraUIScriptsNode,this.gameObject.transform)

/ / get "Top Panel" and "Mask Panel"

_ GoTopPanel = _ GoCanvasRoot

_ GoMaskPanel = UnityHelper.FindTheChildNode (_ GoCanvasRoot, "_ UIMaskPanel") .gameObject

/ / get the original "layer depth" of the UI camera

_ UICamera = GameObject.FindGameObjectWithTag ("_ TagUICamera") .GetComponent ()

If (_ UICamera! = null)

{

/ / get the original "layer depth" of UI camera

_ OriginalUICameralDepth = _ UICamera.depth

}

Else

{

Debug.Log (GetType () + "/ Start () / UI_Camera is Nullhorse Magna Check!")

}

}

/ / /

/ set the mask status

/ / /

/ / UI forms to be displayed

/ / display transparency attributes

Public void SetMaskWindow (GameObject goDisplayUIForms,UIFormLucenyType lucenyType=UIFormLucenyType.Lucency)

{

/ / move the top-level form down

_ GoTopPanel.transform.SetAsLastSibling ()

/ / enable masking form and set transparency

Switch (lucenyType)

{

/ / completely transparent and impenetrable

Case UIFormLucenyType.Lucency:

Print ("completely transparent")

_ GoMaskPanel.SetActive (true)

Color newColor1=new Color (255x 255F, 255F, 255F, 255F, 255F, 0F, and 255F)

_ GoMaskPanel.GetComponent () .color = newColor1

Break

/ / translucent, impenetrable

Case UIFormLucenyType.Translucence:

Print ("translucent")

_ GoMaskPanel.SetActive (true)

Color newColor2 = newColor (220amp 255F, 220amp 255F, 220amp 255F, 50amp 255F)

_ GoMaskPanel.GetComponent () .color = newColor2

Break

/ / low transparency, impenetrable

Case UIFormLucenyType.ImPenetrable:

Print ("low transparency")

_ GoMaskPanel.SetActive (true)

Color newColor3=new Color (50Universe 255F, 50max 255F, 50max 255F, 50max 255F, 200Fhandle 255F)

_ GoMaskPanel.GetComponent () .color = newColor3

Break

/ / can penetrate

Case UIFormLucenyType.Pentrate:

Print ("allow penetration")

If (_ GoMaskPanel.activeInHierarchy)

{

_ GoMaskPanel.SetActive (false)

}

Break

Default:

Break

}

/ / Mask form move down

_ GoMaskPanel.transform.SetAsLastSibling ()

/ / display the downward movement of the form

GoDisplayUIForms.transform.SetAsLastSibling ()

/ / increase the layer depth of the current UI camera (ensure that the current camera is displayed at the front)

If (_ UICameraNull)

{

_ UICamera.depth = _ UICamera.depth + 100; / / increase layer depth

}

}

/ / /

/ / Unmasking statu

/ / /

Public void CancelMaskWindow ()

{

/ / move the top-level form up

_ GoTopPanel.transform.SetAsFirstSibling ()

/ / disable the mask form

If (_ GoMaskPanel.activeInHierarchy)

{

/ / hide

_ GoMaskPanel.SetActive (false)

}

/ / restore the layer depth of the current UI camera

If (_ UICamera! = null)

{

_ UICamera.depth = _ OriginalUICameralDepth; / / restore layer depth

}

}

}

}

With regard to the UIMaskMgr.cs script code defined above, the author encapsulates it in "BaseUIForm.cs" so that it can be managed automatically in the framework without the processing of client programs outside the framework. The BaseUIForm.cs code is as follows:

/ *

*

* Title: "SUIFW" UI framework project

* theme: parent class of UI form

* Description:

* function: define the parent class of all UI forms.

* define four life cycles

*

* 1:Display display status.

* 2:Hiding Hidden status

* 3:ReDisplay redisplays the status.

* 4:Freeze is frozen.

*

*

* Date: 2017

* Version: version 0.1

* Modify Recoder:

*

*

, /

Using System.Collections

Using System.Collections.Generic

Using System.ComponentModel.Design

Using UnityEngine

Namespace SUIFW

{

Public class BaseUIForm: MonoBehaviour {

/ * Field * /

Private UIType _ CurrentUIType=new UIType ()

/ * attribute * /

/ / current UI form type

Public UIType CurrentUIType

{

Get {return _ CurrentUIType;}

Set {_ CurrentUIType = value;}

}

# four (lifecycle) states of region forms

/ / /

/ / display status

/ / /

Public virtual void Display ()

{

This.gameObject.SetActive (true)

/ / set the modal form call (must be a pop-up form)

If (_ CurrentUIType.UIForms_Type==UIFormType.PopUp)

{

UIMaskMgr.GetInstance () SetMaskWindow (this.gameObject,_CurrentUIType.UIForm_LucencyType)

}

}

/ / /

/ / hide status

/ / /

Public virtual void Hiding ()

{

This.gameObject.SetActive (false)

/ / cancel the modal form call

If (_ CurrentUIType.UIForms_Type = = UIFormType.PopUp)

{

UIMaskMgr.GetInstance () .CancelMaskWindow ()

}

}

/ / /

/ / redisplay status

/ / /

Public virtual void Redisplay ()

{

This.gameObject.SetActive (true)

/ / set the modal form call (must be a pop-up form)

If (_ CurrentUIType.UIForms_Type = = UIFormType.PopUp)

{

UIMaskMgr.GetInstance () .SetMaskWindow (this.gameObject _ CurrentUIType.UIForm_LucencyType)

}

}

/ / /

/ / frozen state

/ / /

Public virtual void Freeze ()

{

This.gameObject.SetActive (true)

}

# endregion

}

}

Thank you for your reading, the above is "how to analyze the game UI framework design refers to the modal form management" all the content, learn friends hurry up to operate it. I believe that the editor will certainly bring you better quality articles. Thank you for your support to the website!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.