ugui_ugui 列表 - CSDN
精华内容
参与话题
  • Unity3D的UI系统(UGUI)初级入门

    千人学习 2018-10-22 21:38:13
    本课程主要介绍Unity3d的UI系统(UGUI),先对UGUI做一个总体概述,之后对每个UI控件逐一进行详细讲述,内容包括控件的作用、设置方法、使用场景及属性细节,帮助大家熟练使用UGUI设计游戏的交互界面。
  • UGUI基础 在学习和使用UGUI之前,首先理解UGUI的各个组成部分非常重要,UGUI是由多个类和组件构成的系统。本章主要介绍一些相关术语,这些术语将贯穿整个系统,然后还会涉及到一些UGUI底层的知识。 术语 ...

    UGUI基础

    在学习和使用UGUI之前,首先理解UGUI的各个组成部分非常重要,UGUI是由多个类和组件构成的系统。本章主要介绍一些相关术语,这些术语将贯穿整个系统,然后还会涉及到一些UGUI底层的知识。

    术语

    Canvas - 画布组件

    Canvas组件是将其下的各个排序好的图形提供给渲染系统,然后再由渲染系统将之显示到屏幕或者三维世界中。

    Canvas需要对它下面的网格进行批处理,然后生成适当的渲染指令,最后将指令发送到Unity的图形渲染系统。所有这些工作都是在C++代码中完成的,这个过程称为rebatch或者batch build。当Canvas包含的网格需要重新进行批处理时,那么认为这个Canvas是脏的(dirty)。

    嵌套在其他Canvas下的Canvas称为子画布(Sub-Canvas),子画布将它的子物体与父画布隔离开来,一个脏的子物体不会强制父画布进行重构,反之也一样。当然存在一些例外情况,比如:父画布尺寸变化引起子画布尺寸变化,这个时候父画布和子画布都需要进行重构。

    Canvas Renderer 组件

    上面提到画布对网格进行批处理,Unity利用 Canvas Renderer 组件将网格信息提供给Canvas。

    Graphic 组件

    Graphic 组件是 UGUI 的 C# 库提供的,不涉及本机代码导入,它是所有 UGUI 可绘制网格的基类,大部分内置UI图形都是通过继承 MaskableGraphic 基类来实现的,该基类允许通过 IMaskable 接口实现遮罩功能,主要的子类包括 Image、Text,两者都有同名的组件。

    Layout 组件

    Layout 组件控制 RectTransform 的尺寸和位置,通常用于创建需要相对布局的复杂界面,Layout 组件仅依赖和影响 RectTransform 组件,而并不依赖于 Graphic 对象,可以单独使用。

    GraphicLayout 组件都依赖于 CanvasUpdateRegistry 类。该类跟踪需要更新的 Layout 组件和 Graphic 组件,当与它们相关的 Canvas 组件调用 willRenderCanvases 事件时,CanvasUpdateRegistry 类会根据需要触发更新。

    Layout 和 Graphic 组件的这种更新过程称为重构(rebuild),后面将会详细介绍这一过程。

    渲染细节

    当搭建UI界面的时候,必须牢记一点,画布下的所有几何图形将在透明渲染队列(Transparent Queue)被绘制,这意味着,所有的图形总是从后向前进行 Alpha 混合。从性能的角度来看,有一点比较重要的需要知道,所有的栅格化之后的像素(图元)都会被采样计算,即使它被不透明的物体完全遮挡。在手机上,很高的 overdraw 将会超过 GPU 的填充率。

    什么是overdraw?overdraw也就是过度绘制,是指在每个渲染周期内,屏幕上每个像素最理想只渲染一次,但是由于UI元素的重叠会导致像素会被渲染多次,每次渲染从CPU阶段到GPU阶段会消耗大量资源,如果这种情况比较严重,就会造成卡顿。


    什么是填充率(fill rate)?填充率是指 GPU 没秒内能够渲染的像素的个数,单位是MPixel/S、GPixel/S,当每个渲染周期内需要渲染的像素过多超过GPU处理能力时(可能是场景太复杂、也可能是 overdraw 严重),就会造成丢帧。

    批处理过程

    批处理是通过 Canvas 组件将所有 UI 元素的网格进行合并,然后生成并发送渲染指令给 Unity图形渲染管线。批处理的结果将被缓存起来并重复利用,直到 Canvas 组件被标记为 dirty,这种情况一般发生在 Canvas 下的UI元素的网格发生了变化。

    批处理过程中的网格来自其下的 CanvasRenderer 组件,但是不包括子画布下的子物体。

    网格合并过程中需要将网格按照深度进行排序、进行交叉测试、共享材质等计算。这个操作是多线程的,所以性能在不同的 CPU 上存在一定差异,这种差异在手机 CPU 和桌面 CPU 上尤其明显。

    Rebuild 过程

    在介绍Layout组件时,提过LayoutGraphic重新计算时,这个过程称为重构(Rebuild)。这个过程发生在 CanvasUpdateRegistry 类中,这是一个C#类,源码可以在 这里 找到。

    在 CanvasUpdateRegistry 类中,比较核心的方法是 PerformUpdate,当 Canvas 组件调用 willRenderCanvases 事件时,PerformUpdate 就会被调用,willRenderCanvases 事件每帧都会调用一次。

    PerformUpdate 方法的执行主要包括三个步骤:
    1. 脏的Layout组件必须进行重构(rebuild),通过调用 ICanvasElement.Rebuild 接口完成。
    2. 裁剪组件(如 Masks 组件)进行裁剪操作,通过调用 ClippingRegistry.Cull 方法完成。
    3. 脏的Graphic组件必须进行重构,也是通过 ICanvasElement.Rebuild 接口完成。

    对于 Layout 和 Graphic 组件的重构过程,它被处理成多个阶段,Layout rebuild 过程包括 PreLayout、Layout、PostLayout;Graphic 的 rebuild 过程包括 PreRender、LatePreRender

    Layout 组件重构

    为了重新计算包含一个或者多个Layout组件的位置和尺寸,需要对 Layout 组件进行适当的层次排序,父物体的Layout组件可能会影响子物体的Layout组件的尺寸和位置,所以需要先计算父物体的 Layout 组件,要做到这一点,Unity会将Layout组件按照层次深度进行排序,高层级的(越接近根物体)会被排序到最前面进行优先计算。排序完成的Layout组件将会进行重构,这个过程完成了UI元素位置和大小的控制。如果需要了解Layout组件是如何影响各个UI元素的,可以用户手册的UI自动布局章节。

    Graphic 组件重构

    Graphic组件重构时,Unity 将处理方法(PreRender)传递给 ICanvasElement.Rebuild 接口,Graphic 实现了ICanvasElement 接口,在重构的 PreRender 阶段执行下面两个步骤:
    1. 如果顶点数据(vertex data)被标记为脏的(例如组件的 RectTransform 尺寸发生变化),重新生成mesh 对象。
    2. 如果材质信息被标记为脏的(例如组件的材质或者贴图发生变化),就会更新 CanvasRenderer 的材质。

    与Layout rebuild不同的是,Graphic rebuild 不需要按照特定顺序进行,因此不需要进行任何的排序。

    展开全文
  • 基于Unity~UGUI的简单UI框架(附UIFramework源码)

    万次阅读 多人点赞 2020-10-20 15:37:34
    此博客跟随siki老师的课程笔记生成,感谢siki老师的辛勤付出! 框架源码地址: UIFramework litjson.dll下载地址: litjson UI框架总揽: ...将面板以Prefab形式放入Resources文件夹下面,便于框架加载面板 ...

    此博客跟随siki老师的课程笔记生成,感谢siki老师的辛勤付出!
    此框架功能较简单,适用于学习,可以很好的锻炼我们的设计思想
    框架源码地址: UIFramework
    litjson.dll下载地址: litjson


    ###不使用UI框架存在的一些问题

    1.随着游戏系统的复杂,UI控件越来越多,各个UI直接的通讯,以及UI与GameObject之间的通讯形成一张复杂的蜘蛛网,
    拖着拖着,有时候我都忘了哪个对象跟哪个对象关联了。如果是别人要看我的程序,我估计他找半天都找不到UI逻辑的入口。
    2.耦合性非常严重,如果要改变需求,更改某个UI或者更改某个游戏对象,那么你需要再手动全部与该对象关联的物件重新更改一次。
    3.作为强迫症的程序员,最受不了程序代码的混乱。这种组织方式十分“不优雅”,看着很乱。
    鉴于以上各种情况,我们需要寻找一种新的,科学的,高效的UI管理方式


    ###UI框架总揽:

    这里写图片描述


    ###创建测试面板(非框架部分)

    将面板以Prefab形式放入Resources文件夹下面,便于框架加载面板
    UIPanel


    ###创建json文件和UIPanelType类来保存所有的面板信息

    UIPanelType.json:

    {
    	"panelInfoList":
    	[
    		{"panelType":"MainMenu","path":"UIPanel/MainMenuPanel"},
    		{"panelType":"ItemMessage","path":"UIPanel/ItemMessagePanel"},
    		{"panelType":"Knapsack","path":"UIPanel/KnapsackPanel"},
    		{"panelType":"Shop","path":"UIPanel/ShopPanel"},
    		{"panelType":"Skill","path":"UIPanel/SkillPanel"},
    		{"panelType":"System","path":"UIPanel/SystemPanel"},
    		{"panelType":"Task","path":"UIPanel/TaskPanel"}
    	]
    }
    

    UIPanelType.cs:

    public class UIPanelType {
        public const string MainMenu = "MainMenu";
        public const string Knapsack = "Knapsack";
        public const string ItemMessage = "ItemMessage";
        public const string Shop = "Shop";
        public const string Skill = "Skill";
        public const string System = "System";
        public const string Task = "Task";
    }
    
    

    ###开发UIManger来解析面板信息json文件(框架核心:UIManager)

    UIManager为框架的核心,全局只有一个UIManager,因此UIManager要使用单例模式
    现阶段的完整的UIManager.cs(后续还会继续完善):

    using System.Collections.Generic;
    using System.Collections;
    using System;
    using UnityEngine;
    using LitJson;
    public class UIPanelManager
    {
        private static UIPanelManager _instance;
    
        public static UIPanelManager Instance
        {
            get
            {
                if (_instance == null)
                {
                    _instance = new UIPanelManager();
                }
                return _instance;
            }
        }
    
        private Dictionary<string, string> panelPathDict;
        //private Dictionary<UIPanelType,>
        //private Stack<>
    
        private UIPanelManager()
        {
            ParseUIPanelTypeJson();
        }
    
        private void ParseUIPanelTypeJson()
        {
            panelPathDict = new Dictionary<string, string>();
            TextAsset textUIPanelType = Resources.Load<TextAsset>("UIPanelTypeJson");
            UIPanelInfoList panelInfoList = JsonMapper.ToObject<UIPanelInfoList>(textUIPanelType.text);
    
            foreach (UIPanelInfo panelInfo in panelInfoList.panelInfoList)
            {
                panelPathDict.Add(panelInfo.panelType, panelInfo.path);
                Debug.Log(panelInfo.panelType + ":" + panelInfo.path);
            }
        }
    }
    

    ###开发BasePanel抽象类(各个UIPanel的基类)

    BasePanel给每个Panel定义了四个事件:
    OnEnter:面板进入时调用
    OnPause:面板停止时调用(鼠标与面板的交互停止)
    OnResume:面板恢复使用时调用(鼠标与面板的交互恢复)
    OnExit:面板退出时调用

    using UnityEngine;
    
    public abstract class BasePanel : MonoBehaviour
    {
        public abstract void OnEnter();
    
        public abstract void OnPause();
    
        public abstract void OnResume();
    
        public abstract void OnExit();
    
    }
    

    给各个面板添加UIPanel类(非框架部分)
    这里写图片描述

    using UnityEngine;
    
    public class MainMenuPanel : BasePanel
    {
    
        public override void OnEnter()
        {
        }
    
        public override void OnPause()
        {
        }
    
        public override void OnResume()
        {
        }
    
        public override void OnExit()
        {
        }
    }
    
    

    ###对UI面板Prefab实例化的创建与管理

    获取Panel(如果panel没有被实例化,进行实例化,并且存储到已经实例化好的panel字典中)

    private BasePanel GetPanel(string panelType)
        {
            BasePanel panel = panelDict.GetValue(panelType);
    
            //如果没有实例化面板,寻找路径进行实例化,并且存储到已经实例化好的字典面板中
            if (panel == null)
            {
                string path = panelPathDict.GetValue(panelType);
                Transform panelTransform = GameObject.Instantiate(Resources.Load<GameObject>(path), canvasTransform).transform;
                panel = panelTransform.GetComponent<BasePanel>();
                panelDict.Add(panelType, panel);
            }
            return panel;
        }
    

    字典的扩展:

    using System.Collections.Generic;
    
    public static class DictTool
    {
        public static Tvalue GetValue<Tkey, Tvalue>(this Dictionary<Tkey, Tvalue> dict, Tkey key)
        {
            Tvalue value = default(Tvalue);
            dict.TryGetValue(key, out value);
            return value;
        }
    }
    
    

    现阶段的完整的UIManager.cs(后续还会继续完善):

    using System.Collections.Generic;
    using System.Collections;
    using System;
    using UnityEngine;
    using LitJson;
    public class UIPanelManager
    {
        private static UIPanelManager _instance;
        private Transform canvasTransform;
        private Transform CanvasTransform
        {
            get
            {
                if (canvasTransform == null)
                {
                    canvasTransform = GameObject.Find("Canvas").transform;
                }
                return canvasTransform;
            }
        }
        public static UIPanelManager Instance
        {
            get
            {
                if (_instance == null)
                {
                    _instance = new UIPanelManager();
                }
    
    
                return _instance;
            }
        }
    
        private Dictionary<string, string> panelPathDict;
        private Dictionary<string, BasePanel> panelDict;
        //private Stack<>
    
        private UIPanelManager()
        {
            ParseUIPanelTypeJson();
        }
    
        private BasePanel GetPanel(string panelType)
        {
    
            if (panelDict == null)
            {
                panelDict = new Dictionary<string, BasePanel>();
            }
    
            BasePanel panel = panelDict.GetValue(panelType);
    
            //如果没有实例化面板,寻找路径进行实例化,并且存储到已经实例化好的字典面板中
            if (panel == null)
            {
                string path = panelPathDict.GetValue(panelType);
                GameObject panelGo = GameObject.Instantiate(Resources.Load<GameObject>(path), CanvasTransform, false);
                panel = panelGo.GetComponent<BasePanel>();
                panelDict.Add(panelType, panel);
            }
            return panel;
        }
    
        //解析json文件
        private void ParseUIPanelTypeJson()
        {
            panelPathDict = new Dictionary<string, string>();
            TextAsset textUIPanelType = Resources.Load<TextAsset>("UIPanelTypeJson");
            UIPanelInfoList panelInfoList = JsonMapper.ToObject<UIPanelInfoList>(textUIPanelType.text);
    
            foreach (UIPanelInfo panelInfo in panelInfoList.panelInfoList)
            {
                panelPathDict.Add(panelInfo.panelType, panelInfo.path);
                //Debug.Log(panelInfo.panelType + ":" + panelInfo.path);
            }
        }
    }
    
    

    ###开发界面存储栈,并进行出栈和入栈操作

    【设计理念】
    1.鼠标只允许和一个界面进行交互,当一个界面显示后,上一个界面要停止和鼠标的交互
    2.界面显示,进行入栈操作(Push,OnEnter),停止上一个界面(OnPause)
    3.界面隐藏,进行出栈操作(Pop,OnExit),恢复上一个界面(OnResume)

     private Stack<BasePanel> panelStack;
        public void PushPanel(string panelType)
        {
            if (panelStack == null)
            {
                panelStack = new Stack<BasePanel>();
            }
    
            //停止上一个界面
            if (panelStack.Count > 0)
            {
                BasePanel topPanel = panelStack.Peek();
                topPanel.OnPause();
            }
    
            BasePanel panel = GetPanel(panelType);
            panelStack.Push(panel);
            panel.OnEnter();
        }
    
        public void PopPanel()
        {
            if (panelStack == null)
            {
                panelStack = new Stack<BasePanel>();
            }
            if (panelStack.Count <= 0)
            {
                return;
            }
    
            //退出栈顶面板
            BasePanel topPanel = panelStack.Pop();
            topPanel.OnExit();
    
            //恢复上一个面板
            if (panelStack.Count > 0)
            {
                BasePanel panel = panelStack.Peek();
                panel.OnResume();
            }
    
        }
    

    ###控制Panel之间的跳转(非框架部分)

    完善面板中的一些操作,实现面板之间的跳转,此部分不是框架部分,省略!
    MainMenuPanel.cs:

    using UnityEngine;
    using UnityEngine.UI;
    
    public class MainMenuPanel : BasePanel
    {
        private Button TaskButton;
        private Button KnapsackButton;
        private Button SkillButton;
        private Button ShopButton;
        private Button SystemButton;
        private CanvasGroup canvasGroup;
        void Awake()
        {
            TaskButton = transform.Find("IconPanel/TaskButton").GetComponent<Button>();
            KnapsackButton = transform.Find("IconPanel/KnapsackButton").GetComponent<Button>();
            SkillButton = transform.Find("IconPanel/SkillButton").GetComponent<Button>();
            ShopButton = transform.Find("IconPanel/ShopButton").GetComponent<Button>();
            SystemButton = transform.Find("IconPanel/SystemButton").GetComponent<Button>();
            canvasGroup = transform.GetComponent<CanvasGroup>();
    
            TaskButton.onClick.AddListener(OnTaskButtonClick);
            KnapsackButton.onClick.AddListener(OnKnapsackButtonClick);
            SkillButton.onClick.AddListener(OnSkillButtonClick);
            ShopButton.onClick.AddListener(OnShopButtonClick);
            SystemButton.onClick.AddListener(OnSystemButtonClick);
        }
    
        void OnDestory()
        {
            TaskButton.onClick.RemoveListener(OnTaskButtonClick);
            KnapsackButton.onClick.RemoveListener(OnKnapsackButtonClick);
            SkillButton.onClick.RemoveListener(OnSkillButtonClick);
            ShopButton.onClick.RemoveListener(OnShopButtonClick);
            SystemButton.onClick.RemoveListener(OnSystemButtonClick);
        }
        public override void OnEnter()
        {
        }
    
        public override void OnPause()
        {
            canvasGroup.blocksRaycasts = false;
        }
    
        public override void OnResume()
        {
            canvasGroup.blocksRaycasts = true;
        }
    
        public override void OnExit()
        {
        }
    
        private void OnTaskButtonClick()
        {
            UIPanelManager.Instance.PushPanel(UIPanelType.Task);
        }
        private void OnKnapsackButtonClick()
        {
            UIPanelManager.Instance.PushPanel(UIPanelType.Knapsack);
        }
        private void OnSkillButtonClick()
        {
            UIPanelManager.Instance.PushPanel(UIPanelType.Skill);
        }
        private void OnShopButtonClick()
        {
            UIPanelManager.Instance.PushPanel(UIPanelType.Shop);
        }
        private void OnSystemButtonClick()
        {
            UIPanelManager.Instance.PushPanel(UIPanelType.System);
        }
    }
    
    

    ###UI框架(完结)

    UI框架
    【BasePanel(基类):所有面板继承自BasePanel】
    定义了四个事件:
    OnEnter:面板进入时调用
    OnPause:面板停止时调用(鼠标与面板的交互停止)
    OnResume:面板恢复使用时调用(鼠标与面板的交互恢复)
    OnExit:面板退出时调用

    using UnityEngine;
    
    public abstract class BasePanel : MonoBehaviour
    {
        public abstract void OnEnter();
        public abstract void OnPause();
        public abstract void OnResume();
        public abstract void OnExit();
    
    }
    
    

    【GameRoot】
    实例化游戏中的主面板

    using System.Collections;
    using System.Collections.Generic;
    using UnityEngine;
    using System;
    
    public class GameRoot : MonoBehaviour {
    	void Start () {
            UIPanelManager panelManager = UIPanelManager.Instance;
            panelManager.PushPanel(UIPanelType.MainMenu);
    	}
    }
    
    

    【UIPanelManager(框架的核心,单例)】
    进行解析面板信息json文件,实例化面板Prefab,面板的入栈和出栈等等一系列操作

    using System.Collections.Generic;
    using System.Collections;
    using System;
    using UnityEngine;
    using LitJson;
    public class UIPanelManager
    {
        private static UIPanelManager _instance;
        private Transform canvasTransform;
        private Transform CanvasTransform
        {
            get
            {
                if (canvasTransform == null)
                {
                    canvasTransform = GameObject.Find("Canvas").transform;
                }
                return canvasTransform;
            }
        }
        public static UIPanelManager Instance
        {
            get
            {
                if (_instance == null)
                {
                    _instance = new UIPanelManager();
                }
    
    
                return _instance;
            }
        }
    
        private Dictionary<string, string> panelPathDict;
        private Dictionary<string, BasePanel> panelDict;
        private Stack<BasePanel> panelStack;
    
        private UIPanelManager()
        {
            ParseUIPanelTypeJson();
        }
    
        public void PushPanel(string panelType)
        {
            if (panelStack == null)
            {
                panelStack = new Stack<BasePanel>();
            }
    
            //停止上一个界面
            if (panelStack.Count > 0)
            {
                BasePanel topPanel = panelStack.Peek();
                topPanel.OnPause();
            }
    
            BasePanel panel = GetPanel(panelType);
            panelStack.Push(panel);
            panel.OnEnter();
        }
    
        public void PopPanel()
        {
            if (panelStack == null)
            {
                panelStack = new Stack<BasePanel>();
            }
            if (panelStack.Count <= 0)
            {
                return;
            }
    
            //退出栈顶面板
            BasePanel topPanel = panelStack.Pop();
            topPanel.OnExit();
    
            //恢复上一个面板
            if (panelStack.Count > 0)
            {
                BasePanel panel = panelStack.Peek();
                panel.OnResume();
            }
    
        }
    
        private BasePanel GetPanel(string panelType)
        {
    
            if (panelDict == null)
            {
                panelDict = new Dictionary<string, BasePanel>();
            }
    
            BasePanel panel = panelDict.GetValue(panelType);
    
            //如果没有实例化面板,寻找路径进行实例化,并且存储到已经实例化好的字典面板中
            if (panel == null)
            {
                string path = panelPathDict.GetValue(panelType);
                GameObject panelGo = GameObject.Instantiate(Resources.Load<GameObject>(path), CanvasTransform, false);
                panel = panelGo.GetComponent<BasePanel>();
                panelDict.Add(panelType, panel);
            }
            return panel;
        }
    
        //解析json文件
        private void ParseUIPanelTypeJson()
        {
            panelPathDict = new Dictionary<string, string>();
            TextAsset textUIPanelType = Resources.Load<TextAsset>("UIPanelTypeJson");
            UIPanelInfoList panelInfoList = JsonMapper.ToObject<UIPanelInfoList>(textUIPanelType.text);
    
            foreach (UIPanelInfo panelInfo in panelInfoList.panelInfoList)
            {
                panelPathDict.Add(panelInfo.panelType, panelInfo.path);
                //Debug.Log(panelInfo.panelType + ":" + panelInfo.path);
            }
        }
    }
    
    

    【litjson】
    json文件解析的工具

    【UIPanelTypeJson(保存面板信息的json文件)】
    1.此文件需要加载,保存到Resources文件下
    2.保存了面板的类型(相当于名称)和面板Prefab的路径(实例化面板时要用到)
    3.每添加一个面板,都要在此文件添加该面板对应的信息

    {
    	"panelInfoList":
    	[
    		{"panelType":"MainMenu","path":"UIPanel/MainMenuPanel"},
    		{"panelType":"ItemMessage","path":"UIPanel/ItemMessagePanel"},
    		{"panelType":"Knapsack","path":"UIPanel/KnapsackPanel"},
    		{"panelType":"Shop","path":"UIPanel/ShopPanel"},
    		{"panelType":"Skill","path":"UIPanel/SkillPanel"},
    		{"panelType":"System","path":"UIPanel/SystemPanel"},
    		{"panelType":"Task","path":"UIPanel/TaskPanel"}
    	]
    }
    

    【DictTool】
    Dictionnary的拓展工具类

    using System.Collections.Generic;
    
    public static class DictTool
    {
        public static Tvalue GetValue<Tkey, Tvalue>(this Dictionary<Tkey, Tvalue> dict, Tkey key)
        {
            Tvalue value = default(Tvalue);
            dict.TryGetValue(key, out value);
            return value;
        }
    }
    
    

    【UIPanelInfo(面板的信息类)】
    包括面板的名称和面板Prefab的路径
    用于和json文件进行映射

    using System;
    [Serializable]
    public class UIPanelInfo
    {
        public string panelType;
        public string path;
    
        public UIPanelInfo()
        {
    
        }
    }
    
    

    【UIPanelInfoList(面板信息集合类)】
    用于和json文件进行映射

    using System;
    using System.Collections.Generic;
    
    [Serializable]
    public class UIPanelInfoList
    {
        public List<UIPanelInfo> panelInfoList;
    
        public UIPanelInfoList() { }
    }
    
    

    【UIPanelType(面板的类型)】
    用来记录面板的类型(名称)
    每添加一个面板都要在此类里面添加对应面板的类型

    public class UIPanelType {
        public const string MainMenu = "MainMenu";
        public const string Knapsack = "Knapsack";
        public const string ItemMessage = "ItemMessage";
        public const string Shop = "Shop";
        public const string Skill = "Skill";
        public const string System = "System";
        public const string Task = "Task";
    }
    
    

    (完)

    展开全文
  • Unity3D_UGUI入门

    万次阅读 2018-03-08 14:37:57
    什么是UIUI即User Interface(用户界面)的简称 好的UI设计不仅是让软件变得有个性有品味,还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。 什么是UGUIUGUI 是Unity 官方推出的最新UI系统。...

    什么是UI

    UI即User Interface(用户界面)的简称 
    好的UI设计不仅是让软件变得有个性有品味,还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。 
    这里写图片描述 
    这里写图片描述


    什么是UGUI

    UGUI 是Unity 官方推出的最新UI系统。它从 Unity 4.6 开始,被集成到 Unity 的编辑器中。相较于旧的 UI 系统,它绝对属于一个巨大的飞跃!因为只要有过旧 UI 系统使用体验的开发者,大部分都对它没有任何好感,以至于在过去的很长一段时间里,大家都在使用资源商店(Asset Store)里,由第三方开发者开发的付费插件 NGUI,实现游戏中与 UI 相关的功能部分。


    UGUI的优点

    新的 UI 系统,有以下三个优点: 
    灵活 
    快速 
    可视化

    这对于开发者而言,带来的好处是: 
    运行效率高, 
    执行效果好易于使用, 
    方便扩展(新 UI 系统代码开源)与 Unity 的兼容性高


    UGUI基础

    • 画布Canvas 
      Canvas就类似我们的作画的画布,而在Canvas上的控件,则类似画布上的图画,画布是画的载体,同时我们也可以Canvas也是控件的载体 
      所有的UI都应该放在Canvas里面(子层)。Canvas是一个带有Canvas组件的Game Object。 
      所有的UI都应该是Canvas的孩子(子层;子节点)
    • 设置自适应

    • UI控件的绘制顺序 
      UI元素绘制顺序和在Hierarchy(层级视图)中的顺序。后面的将在更早的上面绘制。改变元素的层级关系(绘制顺序,上下关系),可以通过拖拽,进行简单的排序。也可以通过脚本:使用使用Transform组件上的方法:SetAsFirstSibing,SetAsLastSibing和SetSiblingIndex。

    • 绘制模式 
      1.在screen空间中渲染 
      2.在world空间中渲染

      Screen Space-Overlay 
      在这个渲染模式中,UI元素将在场景的上面。如果场景改变大小或改变分辨率,Canvas将自动改变大小去适配。

      Screen Space-Camera 
      这和Screen Space-Overlay类似,但是在这个模式中,这个Canvas放置在了给定距离的摄像机的前面。这些UI元素都是通过摄像机绘制的。这意味着摄像机影响UI的外观。如果摄像机设置为Perspective(透视视角),UI元素将会通过透明视角渲染,通过摄像机可视区域控制。 
      如果屏幕改变大小或改变分辨率,或摄像机frustrum改变,Canvas将自动改变大小去适配。

      World Space 
      在这个绘制模式中,Canvas将和场景中的其他对象一样显示。Scene可以通过手动设置Rect Transform 来控制大小。在场景中,UI元素将绘制在其他基于3D放置的对象的钱前面或后面。对于UI作为世界的一部分是有用的。也被称为”diegetic interface”。

    • UI控件的布局 
      在“画布”上“绘制”的 UI 控件,除了要考虑上一节介绍到的 绘制顺序以外,还需要考虑它们的布局问题,以及当布局不符合开发者预期时的处理方法。接下来我们介绍一个工具Rect Tool,让开发者有了直接操作 UI 控件的能力。另外还要介绍一个组件——RectTransform,让 UI 控件有了“自适应”的本事!

    • Rect Tool小工具 
      Rect Tool是新版本 Unity 编辑器(Unity 4.6)在工具栏上添加的一个新按钮,位于界面左上角,如图 
      这里写图片描述 
      提示: 
      Rect Tool 不单单专用于操作 UI 控件,实际上它可以被用于操作任何游戏对象。只不过这个工具是在 UI 系统加入的时候一并被添加进来的。Rect Tool 可以对 UI 控件展开下列操作: 
      改变位置:将鼠标置于 UI 控件矩形框的内部,按下鼠标左键任意拖动,即可改变UI 控件的位置,如图所示。 
      这里写图片描述 
      改变大小:将鼠标置于 UI 控件矩形框上,待鼠标变成双向的箭头,按下鼠标左键拖动,即可改变 UI 控件的大小这里写图片描述 
      旋转:将鼠标移动到 UI 控件矩形框靠近 4 个角的外部,待鼠标出现一个旋转的标志,按下鼠标左键拖动,即可令 UI 控件旋转 
      这里写图片描述
    • RectTransform组件 
      Rect Transform组件是新版Unity为UI控件提供的新组件。它只在UI控件上取代Transform组件,而后者是其它任何游戏对象所必须的组件。如图所示,对比了Transform和 Rect Transform 组件。 
      这里写图片描述 
      Rect Transform 组件除了拥有 Transform 组件的位置(Position)、朝向(Rotation)和缩放(Scale)属性外,还纳入了更多的属性: Width、 Height、 Anchors、 Pivot 和 Anchor Presets。 
      Width 和 Height 用于表示 UI 控件的长和宽 
      Pivot 用于表示 UI 控件的轴心点,在 Scene 视图中用蓝色的空心小圆圈表示;当开发者对 UI 控件做旋转处理的时候, UI 控件旋转时所围绕的点就是轴心点。 
      这里写图片描述
    • Anchors属性 
      Rect Transform是专为UI元素准备的,它的一个重要属性就是锚点Anchors,用于指定自身相对父级的布局。对于这个UI元素,它的父级就是Canvas。锚点一共有四个,分别对应自身矩形的四个顶点。在父级元素形状发生变化时,四个锚点到四个顶点的偏移offset不变。

      Anchors 属性是重点,因此拿出来单独介绍。它本身在 Scene 视图中有专门的图标来表示,同时它还有自己的子属性,最后它还会影响除 Anchor 属性以外的其它属性。 
      Anchors 用于表示 UI 控件的锚点,在 Scene 视图中使用 4 个小三角表示。当 UI 控件的父对象也拥有 Rect Transform 组件的时候,锚点才会出现。锚点的 4 个小三角依次与 UI 控件四边形边框的四个角对应,且在父对象的大小发生改变时,锚点会令子对象自动完成自适应操作。例如,Button 的锚点位于 Canvas 的中央、两角和一边上时,那么当 Canvas 的大小发生改变的时候, Button 的自适应效果如图 
      这里写图片描述 
      锚点位于Canvas的中央,锚点的四个三角形与UI边框的四个角距离固定 
      这里写图片描述 
      Button 的锚点位于 Canvas 的两角(锚点的 4 个三角形,与 UI 控件边框的 4 个角的距离固定) 
      这里写图片描述 
      Button 的锚点位于 Canvas 的一边(锚点的 4 个三角形,与 UI 控件边框的 4 个角的距离固定)

      【注意】注意:从锚点的位置所导致 UI 控件自适应的效果上来看,应该发现一个不变的真理,就是表示锚点的 4 个三角形,始终与 UI 控件边框 4 个角的距离是固定的。 
      单击 Rect Transform 组件里的 Anchors 属性左侧的小三角,可以展开此属性的子属性 Min 和 Max。 Min 记录的是 Anchors 左下角小三角的位置, Max 记录的是 Anchors右上角小三角的位置。 
      当表示 Anchors 的 4 个小三角处于同一位置的时候,Rect Transform 组件里就会出现我们前面一直在介绍的 Pos X、Pos Y、Width 和 Height 属性。Width 和 Height 我们前面介绍过了,而 Pos X 和 Pos Y 的值表示以 Anchors 为原点的 Pivot 的坐标 
      这里写图片描述

      当表示 Anchors 的 4 个小三角不在一起的时候,这 4 个属性名就变成了 Left、 Top、Right 和 Bottom。它们分别表示 UI 控件的 4 条边,到 4 个三角形所构成矩形对应边的距离 
      这里写图片描述

      Anchor Presets 属性是一个“样子特殊的下拉列表”,一般容易被忽略。但是如果灵活的使用它,可以为 UI 控件的布局提供大大的便利,因为它提前预置了常见的布局方式 
      Anchor Presets,此属性位于 Rect Transform 组件的左上角,使用鼠标单击那个正方形即可打开 Anchor Presets 属性,如图 2-24 所示。此属性中预先定义了锚点的位置,开发者可以直接从预定义的锚点中选择。例如,将 Button 的锚点设置到左上角,效果如图 
      这里写图片描述 
      这里写图片描述 
      使用 Anchor Presets 属性为 Button 设置锚点

      使用 Anchor Presets 属性也可以一并设置 UI 控件的 Pivot 和 Position 属性,只需要按下 Shift 和 Alt 键盘即可 
      这里写图片描述


    可视功能的UI组件

    在介绍 UI 系统的 UI 控件之前,同学们首先应该有一个这样的认识:UI 控件之所以在游戏场景中是可见的,是因为 UI 控件上有一些特定功能的 UI 组件! 
    接下来就来介绍这些为UI控件提供了可视功能的UI 组件。

    • Text控件 
      Text(Script)组件的文字显示效果,如图所示。该组件用于向玩家显示不可交互的文本信息。玩家无法修改、删除其中的文本,只能从中了解信息。 
      这里写图片描述 
      注意:Text(Script)组件只包括可见的文字,它的背景是透明的。 
      这里写图片描述 
      Text:此属性中的内容,就是 Text(Script)组件要显示的文本信息 
      Color:用于设置文字的颜色 
      Material:用于设置文字的材质。注意:游戏场景中的文字控件本身就是一个游戏对象,当前就可以设置它的材质属性了。

      Character 表示接下来的属性负责设置字符的格式: 
      Font:用于设置文本信息的字体格式; 
      Font Style:用于设置文本信息的样式,可选择的样式有:Normal(正常)、Bold(加粗)、Italic(倾斜)和 Bold And Italic(倾斜并加粗),如图所示 
      这里写图片描述 
      Line Spacing:用于设置文字的行间距 
      这里写图片描述 
      Rich Text:决定文本中的标记元素是否可用 
      这里写图片描述 
      提示:Text 属性中的< b>和< /b>就是“标记元素” 
      Paragraph 表示接下来的属性负责设置字符构成的段落的格式: 
      Alignment:用于设置段落的对齐方式 
      这里写图片描述 
      Horizontal Overflow:当段落内容的宽度大于 Text(Script)组件本身的宽度时,处理段落内容有两种可选的方式,分别为 Wrap(换行)和 Overflow(溢出)。效果如图 
      这里写图片描述 
      Horizontal Overflow:Wrap 
      这里写图片描述 
      Horizontal Overflow:Overflow 
      Vertical Overflow:当段落内容的高度大于 Text(Script)组件本身的高度时,处理段落内容有两种可选的方式,分别为 Truncate(截断)和 Overflow(溢出)。 
      这里写图片描述

      Best Fit:是否应该忽略对文字大小的设置,让字体的大小自动改变到能让段落的内容全部显示出来的状态,效果如图 
      这里写图片描述

    • Image控件 
      Image(Script)组件的图片显示效果,所示。它用于向玩家显示不可交互的图片信息,常作为游戏场景的装饰。 
      这里写图片描述 
      这里写图片描述 
      Source Image:指定 Image(Script)组件要显示的图片; 
      注意:Image(Script)组件显示的图片必须是 Sprite 类型的。这就要求开发者在将这个图片导入到 Unity 中的时候,设置此图片的 Texture Type 属性为 Sprite(2D and UI)。 
      Color:设置图片的颜色;提示:对此属性的设置会改变图片显示的主色调,就像是在用有颜色的光照射图片。 
      Material:设置图片控件的材质; 
      Image Type 用于设置图片的显示类型,可选的属性值有 Simple、 Sliced、 Tiled 和 Filled。不同的图片显示类型,导致了 Sprite“填充”图片控件的不同方式。 
      Simple: Sprite 将直接显示在图片控件中。默认情况下,如果图片控件的大小与 Sprite不一致时,后者将经过拉伸处理来符合前者的大小,如图所示。但如果此时复选了Preserve Aspect属性,那么图片在经过缩放处理时,长宽的比例将保持恒定。 
      这里写图片描述 
      图片的显示类型:Simple(Sprite 长宽比例固定) 
      这里写图片描述 
      图片的显示类型:Simple(Sprite 长宽比例固定) 
      Sliced:Sprite 将被看作是由 9 个切片组成的,如图 1所示。而图片控件将只显示中间切片的边缘,如图 2 所示,若此时选中了 Fill Center 属性,那么将显示完整的中间切片,如下图所示。 
      这里写图片描述 
      这里写图片描述 
      Tiled:此种类型的 Sprite 一般尺寸较小,如图 1 所示。为使此 Sprite 填满整个图片控件,就会在保持 Sprite 尺寸不变的前提下不断重复,就像是在铺地板砖一样,如下图所示。 
      这里写图片描述 
      Filled:此种类型的 Sprite 与 Simple 相似,但是它可以表现出一种“从无到有”的呈现过程,如图所示。 
      这里写图片描述 
      “呈现方式”也叫“填充方式”,由 Fill Method 属性决定,可选项有 Horizontal、Vertical、Radial 90、Radial 180 和 Radial 360, Fill Origin 决定了填充操作的起点,Fill Amount 决定了填充的进度。 
      这里写图片描述 
      Set Native Size:单击此按钮,将使得图片控件的大小主动调节到与 Sprite 原始大小 一致,如图所示。 
      这里写图片描述
    • RawImage控件 
      Raw Image(Script)组件与 Image(Script)组件的功能类似,如下图所示,用于向玩家显示不可交互的图片信息,常作为游戏场景的装饰。但 Raw Image(Script)组件与 Image(Script) 组件上的属性并不完全一致,Raw Image(Script)组件如图 
      这里写图片描述

      Raw Image(Script)组件各属性作用的说明如下: 
      Texture:指定 Raw Image(Script)组件要显示的图片; 
      注意:Raw Image(Script)组件所显示的图片,可以是任何类型,而不单单只是 Sprite 类型。 
      Color:设置图片的颜色; 
      提示:对此属性的设置,会改变图片显示的主色调,就像是在用有颜色的光照射图片。 
      Material:设置图片控件的材质; 
      UV Rect:令图片中的一部分显示在 Raw Image(Script)组件里。X 和 Y 属性指定图片左下角的位置,W 和 H 属性指定图片右上角的位置,如图所示。 
      这里写图片描述

    • Mask组件 
      拥有Mask(Script)组件的 UI 控件,可以限制其子对象的显示范围,即当子对象的显示范围明显大于父对象的显示范围时,游戏视图就只显示父对象范围内的子对象,其它部分自动隐藏。父对象是 Panel,子对象是 Image,为前者添加 Mask(Script)组件,作用效果如图 
      这里写图片描述
      注意:添加了 Mask(Script)组件的游戏对象,要想发挥出此组件的效果,要求此对象上必须包含 Image(Script)组件。如图所示,查看 Panel 上的所有组件,可以看到它默认就有 Image(Script)组件,所以才能发挥出 Mask(Script)组件的遮罩效果。 
      这里写图片描述 
      Show Mask Graphic:此属性决定是否显示父对象上的图片,效果如图所示 
      这里写图片描述


    展开全文
  • UGUI组件详解

    2018-08-30 10:23:04
    一、Image   Source Image(图像源):纹理格式为Sprite(2D and UI)的图片资源(导入图片后选择Texture Type为Sprite(2D and UI))。 Color(颜色):图片叠加色。...Material(材质):图片叠加材质。...

    一、Image

     

    Source Image(图像源):纹理格式为Sprite(2D and UI)的图片资源(导入图片后选择Texture Type为Sprite(2D and UI))。

    Color(颜色):图片叠加色。

    Material(材质):图片叠加材质。

    Raycast Target(射线投射目标):是否作为射线投射目标。

    Image Type(图片显示类型):Simple(基本的),图片整张全显示,不裁切,不叠加,根据边框大小会有拉伸。

    Preserve Aspect(锁定比例):针对Simple模式,勾选之后,无论图片的外形放大还是缩小,都会一直保持初始的长宽比例。

     

    Image Type(图片显示类型):Sliced(切片的),图片切片显示,在Project页面选中图片,切换为Sprite(2D and UI)模式后,点击Sprite Editor进入图片裁切模式,将图片裁切为上图的形状,使用Sliced模式后,根据图片边框拉伸,图片的四个角会保持原状,而1和4部分会随着图片的横向拉伸而拉伸,2和3部分会随着图片的纵向拉伸而拉伸,图片的中间部分会拉伸5进行填充。

    Fill Center(填充中心):勾选后,5显示,反之,5不可见。

    Image Type(图片显示类型):Tiled(平铺的),若图片已经过裁切,则使用Tiled模式后,根据图片边框拉伸,图片的四个角会保持原状,而1和4部分会随着图片的横向拉伸而拉伸,2和3部分会随着图片的纵向拉伸而拉伸,图片的中间部分会用5进行平铺填充。若图片未裁切,则使用Tiled模式后,根据图片边框拉伸,图片保持原大小不做变化,只是用自身平铺填充。

    Fill Center(填充中心):(已裁切的图像源才有此选项)勾选后,5显示,反之,5不可见。

    Image Type(图片显示类型):Filled(填充的),根据填充方式、填充起点、填充比例决定图片显示哪一部分。

    Fill Method(填充方式):分为水平、垂直、90度圆、180度圆、360度圆。

    Fill Origin(填充起点):根据填充方式不同有所变化。

    Fill Amount(填充比例):0是完全不显示,1是完全显示。

    二、Button

    Interactable(是否可用):勾选,按钮可用,取消勾选,按钮不可用,并进入Disabled状态。

    Transition(过渡方式):按钮在状态改变时自身的过渡方式:

    Color Tint(颜色改变) 

    Sprite Swap(图片切换) 

    Animation(执行动画)(后面有详细介绍)

    Target Graphic(过渡效果作用目标):可以是任一Graphic对象。

     

    Navigation(按钮导航):假如你现在有四个按钮,当你点击第一个时,第一个会保持选中状态,然后通过按键盘方向键,会导航将选中状态切换到下一个按钮上,例如你的第一个按钮下方存在第二个按钮,当你选中第一个按方向键下时,第一个按钮的选中状态取消,第二个按钮进入选中状态,前提是这些按钮都开启了导航功能。

     

    None(关闭):关闭导航。

    Automatic(自动导航):自动识别并导航到下一个控件。

    Horizontal(水平导航):水平方向导航到下一个控件。

    Vertical(垂直导航):垂直方向导航到下一个控件。

    Explicit(指定导航):特别指定在按下特定方向键时从此按钮导航到哪一个控件。

     

     

    Color Tint(颜色改变过渡模式):

    Normal Color(默认颜色):初始状态的颜色。

    Highlighted Color(高亮颜色):选中状态或是鼠标靠近会进入高亮状态。

    Pressed Color(按下颜色):鼠标点击或是按钮处于选中状态时按下enter键。

    Disabled Color(禁用颜色):禁用时颜色。

    Color Multiplier(颜色切换系数):颜色切换速度,越大则颜色在几种状态间变化速度越快。

    Fade Duration(衰落延时):颜色变化的延时时间,越大则变化越不明显。

     

    Sprite Swap(图片切换过渡模式):

    Highlighted Sprite(高亮图片):选中状态或是鼠标靠近会进入高亮状态。

    Pressed Sprite(按下图片):鼠标点击或是按钮处于选中状态时按下enter键。

    Disabled Sprite(禁用图片):禁用时图片。

     

    Animation(播放动画过渡模式):

    Normal Trigger(默认触发器):默认状态触发。

    Highlighted Trigger(高亮触发器):选中状态或是鼠标靠近会进入高亮状态。

    Pressed Trigger(按下触发器):鼠标点击或是按钮处于选中状态时按下enter键。

    Disabled Trigger(禁用触发器):禁用时触发。

    三、Text

     

    这里写图片描述

    Character: 
    1、Font:字体 
    2、Font Style: 
    (1)Normal:正常 
    (2)Bold:粗体 
    (3)Italic:斜体 
    (4)Bold And Italic:粗体+斜体 
    3、Font Size:字体大小 
    4、Line Spacing:行间距(注:Text组件没有提供修改字间距的属性,在前面写过修改字间距的脚本) 
    5、Rich Text:富文本 
    这里写图片描述

    Paragraph: 
    1、Alignment:这里写图片描述 
    前面三个按钮是水平方向(分别为左对齐、居中、右对齐),后面三个按钮是垂直方向(分别为顶对齐,居中,底对齐)

    2、Align By Geometry: 
    官方解释: 
    Use the extents of glyph geometry to perform horizontal alignment rather than glyph metrics. 
    This can result in better fitting left and right alignment, but may result in incorrect positioning when attempting to overlay multiple fonts (such as a specialized outline font) on top of each other. 
    使用区段的字形几何执行水平对齐,而不是字形指标。 
    这可以导致更好的拟合左和右对齐,但可能会导致不正确的定位当试图覆盖多个字体(如专业轮廓字体)上。

    3、Horizontal Overflow:水平溢出 
    (1)Wrap:文本将自动换行,当达到水平边界 
    (2)Overflow:文本可以超出水平边界,继续显示 
    4、Vertical Overflow:垂直溢出 
    (1)Truncate:文本不显示超出垂直边界的部分 
    (2)Overflow:文本可以超出垂直边界,继续显示 
    5、Best Fit:勾选之后,编辑器发生变化,显示Min Size和Max Size 
    (1)Min Size:最小大小 
    (2)Max Size:最大大小 
    当边框很大时,文字最大显示Max Size字体大小;当边框很小时,文字最小显示Min Size字体大小,边框显示不了MinSize字体大小就不再显示文字了。

    Color:颜色

    Material:材质

    Raycast Target:来自类Graphic,当该项为false时,消息会透传

    四、InputField

    Text Component(文本组件):此输入域的文本显示组件,任何带有Text组件的物体。

    Text(文本):此输入域的初始值。

    Character Limit(字符数量限制):限定此输入域最大输入的字符数,0为不限制。

    Content Type(内容类型):限定此输入域的内容类型,包括数字、密码等,常用的类型如下:

    Standard(标准类型):什么字符都能输入,只要是当前字体支持的。

    Integer Number(整数类型):只能输入一个整数。

    Decimal Number(十进制数):能输入整数或小数。

    Alpha numeric(文字和数字):能输入数字和字母。

    Name(姓名类型):能输入英文及其他文字,当输入英文时自动姓名化(首字母大写)。

    Password(密码类型):输入的字符隐藏为星号。

    Line Type(换行方式):当输入的内容超过输入域边界时:

                    single Line(单一行):超过边界也不换行,继续延伸此行,输入域中的内容只有一行;

                    multi Line Submit(多行):超过边界则换行,输入域中内容有多行;

                    multi Line Newline(多行):超过边界则新建换行,输入域中内容有多行。

    Placeholder(位置标示):此输入域的输入位控制符,任何带有Text组件的物体。

     

    注意:Placeholder对应的Text也为此输入框的提示语显示:(例如Enter text...为提示语,当输入框内容为空时,提示语可见,内容不为空时,提示语不可见)

    Caret blink rate(光标闪烁速度):标示输入光标的闪烁速度。

    Hide mobile input(手机端隐藏输入):这个没测试过有什么效果。

    On Value Changed:值改变时触发消息。

    End Edit:结束编辑时触发消息。

    五、Toggle

    Toggle大部分属性等同于Button组件,同为按钮,不同的只是他自带了组合切换功能,当然这些用Button也是可以实现的。

     

    Is On(选中状态):此Toggle的选中状态,设置或返回为一个bool。

    Toggle Transition(切换过渡):None为无切换过渡,Fade为切换时Graphic所指目标渐隐渐显。

    Group(所属组合):这里指向一个带有Toggle Group组件的任意目标,将此Toggle加入该组合,之后此Toggle便会处于该组合的控制下,同一组合内只能有一个Toggle可处于选中状态,即便是初始时将所有Toggle都开启Is On,之后的选择也会自动保持单一模式。

     

    Toggle Group

    带有此组件的物体,可以同时管理多个Toggle,将需要被管理的Toggle的Group参数指向此Toggle Group便可。

     

    Allow Switch Off(是否允许关闭):Toggle Group组默认有且仅有一个Toggle可处于选中状态(其管辖的所有Toggle中),如果勾选此属性,则Toggle Group组的所有Toggle都可同时处于未选中状态。

    On Value Changed(状态改变触发消息):当此Toggle选中状态改变时,触发一次此消息。

    六、scrollview

     

     

    内容很少,也非常简单。
     

    Content:就是我们上面装载所有滚动内容的父节点。

     

    Horizontal:水平滚动开关

     

    Vertical:垂直滚动开关

     

    Movement Type:滚动类型,默认是Elastic,即有弹性的滚动

     

    Elasticty:弹性系数

     

    Inertia:惯性开关

     

    Deceleration Rate:惯性减速系数

     

    Scroll Sensitivity:滚动的灵敏度

     

    Viewport:视口

     

    Horizontal/Vertical ScrollBar:分别是水平和垂直的滚动条

    On Value Changed(状态改变触发消息):当此Toggle选中状态改变时,触发一次此消息。

    七、Grid

    脚本属性截图如下: 
    这里写图片描述

    1、Padding:RectOffset类型,矩形偏移,详解请戳UGUI之Horizontal Layout Group组件介绍

    2、Cell Size:Vector2类型,默认值为(100,100),网格中的每个单元格的大小

    
     
    1. [SerializeField] protected Vector2 m_CellSize = new Vector2(100, 100);

    2. public Vector2 cellSize { get { return m_CellSize; } set { SetProperty(ref m_CellSize, value); } }

    • 1
    • 2

    3、Spacing:这里的Spacing不同于水平布局、垂直布局,是Vector2类型,既然是网格布局,当然存在水平方向的间隔和垂直方向的间隔,这里也不做过多的介绍。

    3、Start Corner:Corner枚举类型

    
     
    1. public enum Corner

    2. {

    3. UpperLeft = 0, //左上角

    4. UpperRight = 1, //右上角

    5. LowerLeft = 2, //左下角

    6. LowerRight = 3 //右下角

    7. }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    第一个单元格放在哪个角落,默认为UpperLeft左上角

    4、Start Axis:Axis枚举类型

    
     
    1. public enum Axis

    2. {

    3. Horizontal = 0, //水平

    4. Vertical = 1 //垂直

    5. }

    • 1
    • 2
    • 3
    • 4
    • 5

    (1)Horizontal:水平 
    优先水平排列单元格 
    (2)Vertical:垂直 
    优先垂直排列单元格

    5、Child Alignment:TextAnchor枚举类型,文本锚点,详解请戳UGUI之Horizontal Layout Group组件介绍

    6、Constraint:Constraint枚举类型

    
     
    1. public enum Constraint

    2. {

    3. Flexible = 0, //不限制行数和列数

    4. FixedColumnCount = 1, //约束指定数量的列数

    5. FixedRowCount = 2 //约束指定数量的行数

    6. }

    展开全文
  • UGUI

    千次阅读 2017-09-13 15:51:19
    什么是 UGUI UGUI 是 Unity 自带的一套 GUI 系统,含有基本的一些 UI 控件。 UGUI 控件有哪些? 我们常用的有 Canvas,Text,Image,Button,Toggle,Slider,Scroll Bar,Scroll View,Input Field。 ...
  • UGUI 官方资源包

    2020-07-30 23:30:05
    官方uguidemo,新手入门很好的资源,免费推荐给大家。
  • UGUI的列表

    千次阅读 2018-01-17 10:02:49
    UGUI的列表   Unity3D提供的UGUI系统非常适合于制作基本的用户图形操作界面,也就是常说的GUI。在标准的UGUI组件包里有很多常用的UI组件,只需要将它们进行组合便能制作出合乎要求又好用的图形界面。   但是...
  • UGUIUGUI入门

    万次阅读 2019-05-10 09:01:20
    Unity 2017.1.0f3 常用的UI控件 添加UI控件 创建UI控件时,如果没有Canvas和EventSystem系统会自动创建。 ...Canvas是画布,是所有UI控件的根类,所有UI控件都必须在Canvas上绘制。如果UI控件不在Canvas下,将无法...
  • UGUI性能优化

    千次阅读 2018-06-02 19:15:38
    ①Cavas的Render Mode是Overlay模式时,永远覆盖在其他物体之上,不受摄像机depth影响 ②Cavas的Render Mode都是Screen Space-Camera时的渲染顺序: 依次由选取的摄像机Render Camera的Depth值、Cavas的Sorting ...
  • UI框架—基于UGUI 一、需求分析 (一)、需求分析UML图 1、通过UIManger来自作解析json文件。 2、UML各种关系 二、知识点 (一)、原理知识 1、单例模式 定义一个静态的对象 在外界访问 在内部构造。 构造方法...
  • UGUI与NGUI的区别与优缺点

    万次阅读 2015-09-25 15:45:39
    1. NGUI与UGUI的区别  1) uGUI的Canvas 有世界坐标和屏幕坐标  2) uGUI的Image可以使用material  3) UGUI通过Mask来裁剪,而NGUI通过Panel的Clip   4) NGUI的渲染前后顺序是通过Widget的Depth,而UGUI渲染...
  • UGUI之布局实战——聊天系统

    千次阅读 热门讨论 2020-05-04 15:55:18
    UGUI之布局实战——聊天系统
  • UGUI内核大探究(零)

    千次阅读 多人点赞 2017-05-11 19:53:27
    UGUI是Unity3D官方推出的UI系统,为了更好的使用UGUI,我们就需要去了解它。 UGUI代码开源,我们可以从bitbucket下载到源码。
  • Unity3D种UGUI与NGUI的对比差别(1)

    万次阅读 2017-03-09 16:52:07
    先来段小八卦,听说UGUI的主创人员是从NGUI招过去的,所以,UGUI中有很多概念,对于用过NGUI的童鞋来说,看起来都似曾相识。 先来个概念对比: NGUI UGUI 锚点 Anchor RectTransform Anchor ...
  • 分别介绍了NGUI和UGUI的概念,区别,优缺点,未来使用方向。
  • NGUI和UGUI优缺点和性能比较

    千次阅读 2017-06-17 19:52:48
  • UGUI和fairyGUI的区别

    千次阅读 2019-09-06 17:28:01
    https://blog.csdn.net/yangxun983323204/article/details/78490097
  • Unity UGUI 完整系列教程-Chinar中文图解

    万次阅读 多人点赞 2019-08-05 00:06:45
    助力系统性完成 Unity UGUI 的开发、学习、使用 为初学者节省宝贵的时间,避免采坑! 1 Intro —— 简介 2 Text —— 文本 3 Image —— 图片 4 Button —— 按钮 5 Toggle —— 开关 5.1 Toggle Group —— 开关组 ...
  • UGUI 设置Text控件文本颜色

    万次阅读 2015-02-26 13:07:08
    UGUI的text组件中,没有直接设置颜色的接口,我们可以通过直接在Text内容中指定Color项来设置颜色。 例如我们添加一个Button到游戏中,然后选择Text,输入内容: Idle 返回游戏查看,颜色是不是变为红色了呢! ...
1 2 3 4 5 ... 20
收藏数 13,533
精华内容 5,413
关键字:

ugui