Unity数字孪生开发笔记——GUI控件篇

一、常见OnGUI控件
二、UGUI
三、Draw Calls优化

一、常见OnGUI控件

在这里插入图片描述

二、UGUI

在这里插入图片描述

1、简介

Unity图形用户界面 Unity Graphical User InterFace 是Unity4.6以上版本新加入的界面显示系统
与OnGUI对比
----全新的布局系统
Rect Transform Layout Group
----强大的事件机制
鼠标指针类拖拽类点选类输入类
----最佳的执行效能
减少了GPU负担
与NGUI对比
----由NGUI创始人参与开发
----自适应系统更完善
----更方便的深度处理
----淡化了Atlas（图集），直接使用Sprite Packer
----UGUI没有Tween组件
----开发效率暂时低于NGUI

2、控件

1>Canvas画布

在这里插入图片描述

简介
----画布，绘制UI元素的载体，所有UI元素必须在Canvas之下。UI元素的绘制顺序依赖于层次面板中的顺序。
1、创建UI对象：在Hierarchy面板右键–>UI，在UI界面中选择的对象都是UGUI对象。在操作这些对象时，建议按如下所示：

此时，左键是移动物体，右键是移动场景，点顶点可进行方法缩小，而改变的宽度和高度对象对应于Inspector的像素。
属性
----Render Mode 渲染模式
1、Screen Space-Overlay 覆盖模式：UI元素将会在其他元素之前，而且绘制过程独立于场景元素和摄像机设置，画布尺寸由屏幕大小和分辨率决定，屏幕坐标系与世界坐标系等价
Pixel Perfect 完美像素：若勾选，则会锐化屏幕显示效果
Sort Order 渲染顺序：在多个Canvas中，值越大越渲染到最上层
2、Screen Space-Camera 摄像机模式：需要提供一个UICamera（如果不提供，将等价于覆盖模式），Canvas对象被绘制在一个与摄像机固定距离的平面上，且绘制效果受摄像机参数的影响
Rander Camera 渲染摄像机
Plane Distance 平面与摄像机的距离
Sorting Layer 排序层：通过Edit–》Project Settings–》Tags and Layers–》Sorting Layers 调整Canvas渲染顺序
3、World Space 世界空间模式：画布渲染于世界空间，与场景中其他3D物体性质相同
适用性：
---- UI覆盖物体，使用Overlay
---- 物体覆盖UI，使用Camera
---- UI与物体性质相同，使用World Space
UI摄像机与主摄像机的配合使用：当想使用3D物体盖住UI对象时，通常会采用摄像机模式，渲染相机采用主摄像机，但这样会使得屏幕的渲染量过大，消耗性能增加，但可以通过以下步骤进行改善
1、创建新的UI摄像机，并将其拖入Rander Camera

2、将UI摄像机的Clear Flags改为 Depth Only，Culling Mask设置为仅UI，为了避免出现多个摄像机的覆盖问题，将UI摄像机的Depth 改为大于Main Camera的值（比如主相机设为-1，UI相机设为0）

3、将主相机的Culling Mask 中的UI项取消勾选，变为Mixed

4、将想要覆盖住UI的物体的Layer层改为UI层

5、保险起见，还可以将UI相机放在世界的某个角落（可忽略）

6、经过以上步骤，就可以实现将3D物体挡在UI界面前，而且性能消耗都比直接拖动Main Camera好

2>Rect Transform 矩阵变换

在这里插入图片描述

简介
派生自Transform，在UGUI控件上替代原有变换组件，标识一个可容纳UI元素的矩阵
属性
----Pos ：控件轴心点相对于自身锚点的位置
----Anchor 锚点：UI元素的4各顶点与锚点的间距保持不变，锚点总是相对于父级，不能超越父物体范围；
表示点 -->PosX PosY Width Hight
表示拉伸 --> Left Right Top Bottom
----Pivot 轴心点：移动、旋转与缩放都围绕轴心点发生变化，（0，0）为左下顶点，（1，1）为右上顶点

3>Image 图片

在这里插入图片描述

属性
----Image Type贴图类型
1、Simple 简单
Preserve Aspect 保持贴图原始比例
Set Native Size 将贴图设置为原始尺寸
2、Sliced 切割
File Center 填充中部区域，如果取消中部区域为透明
3、Tiled 平铺
保持图片原始尺寸，从左下角重复多次填充空白
4、Filed 填充
可以呈现出从空白到完整填充的过程

4>Text 文本标签

在这里插入图片描述

富文本语法
< b>粗体< /b>
< i>斜体< /i>
< size=14>字号< /size>
< color=red>颜色< /color>

5>Button 按钮

在这里插入图片描述

属性
---- Interactable 是否启用交互
---- Transition 过渡方式
None 没有过渡方式
Color Tint 颜色过渡
Sprite Swap 精灵交换，需要使用相同功能、不同状态的贴图
Animation 动画过渡

----Navigation 导航
Horizontal 水平导航
Vertical 垂直导航
Automatic 自动导航
Explicit 显示导航
----Visualize 可视化–显示导航路径

6>Input Fieid 输入框

在这里插入图片描述

属性
---- Interactable 设置是否启用组件，勾选表示输入字段可以交互，否则表示不可以交互
---- Transition 设置正常显示、突出显示、按下或者禁用时输入字段的转换效果
---- Navigation 设置导航功能
---- Text Component 设置此输入域的文本显示组件，用于显示用户输入的文本框
---- Text 设置此输入域的初始值
---- Character Limit 设置此输入域最大的输入字符数，0为不限制输入字符数
---- Placeholder 设置此输入域的输入位控制符，对于任何带有Text组件的物体均可设置此项

---- Context Type 输入此输入域的内容类型，包括数字、密码等
standard ：允许输入任何字符，只要是当前字体支持的即可
Autocorrected ：自动校正输入的未知单词，并建议更合适的替换候选对象，除非用户明确地覆盖改操作，否则将自动替换输入的文本
Integer Number ：只允许输入整数
Decimal Number ：允许输入整数或小数
Alpha numeric ：允许输入数字和字母
Name ：允许输入英文及其他文字，当输入英文时能自动提示姓名拼写
Email Address ：允许输入一个由最多一个@ 符号组成的字母数字字符串
Password ：输入的字符被隐藏，只显示星号
Pin ：只允许输入整数。输入的字符被隐藏，只显示星号
Custom ：允许用户自定义行类型、输入类型、键盘类型和字符验证

---- Line Type 行类型
Single Line 单行
Multi Line Submit 多行文本，回车提交
Multi Line Newline 多行文本，回车换行
---- Caret Blink Rate 光标闪烁速度
---- Selection Color 选择的字符颜色

7>Silder 滑块

在这里插入图片描述

属性
---- Fill Rect 填充矩形区域
---- Handle Rect 手柄矩形区域
---- Direction 滑块的摆放方向
---- Min/Max Value 最小/最大值
---- Whole Numbers 整数数值
---- Value 数值

8>Panel 面板容器

在这里插入图片描述
当面板创建时，默认包含一个Image（Script组件）

属性
----Source Image 用来设置面板的图像
注意： 图片要放入Source Image中必须将图片转换成精灵格式
转换方法： 在Project面板选择图片，将Inspector面板将Texture Type改为Sprite（2D and UI），单击Apply即可。
----Color 用来改变图片的颜色
----Material 改变用在图片上的材质
----Image Type 设置贴图类型

9>Raw Image 非交互式图片

在这里插入图片描述
Raw Image：用于装饰、图标等，类似于Image控件，但是Raw Image 可以显示任何纹理，而Image只能显示一个精灵

属性
---- Texture 设置要显示的图片纹理
---- Color 设置应用在图片上的颜色
---- Material 设置应用再图片上的材质
---- UV Rect 设置图像在控件矩阵中的偏移和大小，范围为0~1

10>Toggle 复选框

在这里插入图片描述

属性
---- Is On 设置复选框默认是开还是关
---- ToggleTransition 设置渐变效果
---- Graphic 用于切换背景，更改为一个更合适的图像
---- Group 设置多选组

11> Scrollbar 滚动条

在这里插入图片描述

属性
---- Handle Rect 设置最小值与最大值之间的范围，也就是整个滑条的最大可控制范围
---- Direction 设置滚动条的方向为从左到右、从上到下或者其他方向
---- Value 设置当前滚动条对应的值
---- Size 设置操作条矩阵对应的缩放长度，即Handel部分的大小，取值为0~1
---- Number of Step 设置滚动条可滚动的位置数目
---- On Value Change 设置值改变时触发消息

12> DropDown 下拉框

在这里插入图片描述

属性
---- Transition 过渡
---- Navigation 导航
---- Template 下拉使用的模板
---- CaptionText 当前选择的显示文本
---- Caption Image 当前选择的显示图片
---- Item Text 下拉框选项模板里的文字，不填会导致选项列表的每个选项不会修改模板里面的文字
---- Item Iamge 下拉框选项模板里的图片，不填会导致选项列表的每个选项不会修改模板里面的图片
---- Value 当前选择的值（0开始）
---- Options 可选择项
---- On Value Changed 值调整时触发的事件

13> Scroll View

在这里插入图片描述

属性

更多关于Scroll View的属性演示，可以点击这里: 传送门

3、事件

1>事件注册

a、通过编辑器绑定方法

在这里插入图片描述

b、AddListener

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

/// <summary>
/// 
/// </summary>
public class EventDemo : MonoBehaviour
{
    
    
    public void Fun1()
    {
    
    
        print("Fun1:");
    }

    public void Fun2(string str)
    {
    
    
        print("Fun2:" + str);
    }

    private void Start()
    {
    
    
        Button btn = this.transform.Find("Button").GetComponent<Button>();
        //public delegate void UnityAction();
        //返回值？  参数列表？
        btn.onClick.AddListener(Fun1);

        InputField inf = this.transform.Find("InputField").GetComponent<InputField>();
        //public delegate void UnityAction<T0>(T0 arg0);
        inf.onValueChanged.AddListener(Fun2);
    }
}

c、实现接口

1>鼠标指针类

IPointerEnterHandler：进入
IPointerExitHandler：离开
IPointerDownHandler：按下
IPointerUpHandler：抬起
PointerClinkHandler：点击（按下、抬起）

2>拖拽类

IBeginDragHandler：第一帧
IDragHandler：每一帧
IEndDragHandler：结束的那一帧
IDropHandler：拖拽后放开的那一帧

3>点选类

IUpdateSelectedHandler：点了选中的每一帧
IselectHandler：点了选中的那一帧
IDeselectHandler：不选了那一帧

4>输入类（建立在点选之上）

IScrollHandler：选中UI并滑动滚轮
IMoveHandler：选中UI后移动（如按上下左右/WASD）
ISubmitHandler：选中UI后按回车
ICancelhandler：选中后按ESC

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;

/// <summary>
/// 拖拽图片
/// </summary>
public class DialogDrag : MonoBehaviour, IPointerDownHandler,IDragHandler
{
    
    

    private Vector3 offset;
    private RectTransform parentRTF;

    private void Start()
    {
    
    
        parentRTF = this.transform.parent as RectTransform;
    }

    //当拖拽时执行
    public void OnDrag(PointerEventData eventData)
    {
    
    
        Vector3 worldPos;
        //屏幕坐标转世界坐标
        RectTransformUtility.ScreenPointToWorldPointInRectangle(parentRTF, eventData.position, eventData.enterEventCamera, out worldPos);
        this.transform.position = worldPos + offset;
    }

    //当按下当前物体时执行
    public void OnPointerDown(PointerEventData eventData)
    {
    
    
        //记录从按下点到中心点偏移量(坐标)

        Vector3 worldPos;
        //屏幕坐标转世界坐标
        RectTransformUtility.ScreenPointToWorldPointInRectangle(parentRTF, eventData.position, eventData.enterEventCamera,out worldPos);
        offset = this.transform.position - worldPos;

    }
}

d、自定义框架

4、ITween（动画库）

目的：以最小的投入实现最大的产出，轻松实现各种动画，晃动，旋转，移动以及褪色等等。
1、物体移动 MoveTo 2、颜色渐变 ColorTo
3、物体淡入淡出 FadeTo
4、摄像机淡入淡出 CameraFadeAdd CameraFadeTo
5、注视旋转 LookTo 6、物体旋转 RotateTo
7、物体缩放 ScaleTo
8、晃动 PunchPosition PunchRotation PunchScale
9、振动 ShakePosition ShakeRotation ShakeScale

using System.Collections;
using System.Collections.Generic;
using UnityEngine;


/// <summary>
/// 
/// </summary>
public class ItweenDemo : MonoBehaviour
{
    
    
    public Transform imgTF, btnTF;
    public float moveSpeed = 100;
    public iTween.EaseType type;
    public void Domovement()
    {
    
    
        //让图片移动到按钮位置

        //以前的做法，需要每帧执行
        //imgTF.position = Vector3.MoveTowards(imgTF.position, btnTF.position, Time.deltaTime * moveSpeed);

        //调用1次
        //UI缓动 ITwen  DoTween...
        //iTween.MoveTo(imgTF.gameObject, btnTF.position, 2);
        iTween.MoveTo(imgTF.gameObject, iTween.Hash(
            "position", btnTF.position,
            "speed", moveSpeed,
            "easetype", type
            ));
    }
}

5、自动布局组控件

1>Grid Layout Group

网格布局组，将子元素以表格形式自动排列
属性
1、Start Corner 开始角度
2、Start Axis 开始轴向
3、Constraint 约束
---- Flexible 灵活的
---- Fixed Column Count 固定列数
---- Fixed Row Count 固定行数

2>Horizontal Layout Group

水平布局组，将子元素按照水平方向自动排列
属性
1、Padding 填充
---- Left 左边距 Right 右边距
---- Top 上边距 Bottom 下边距
2、Spacing 间隔
3、Child Alignment 元素的对齐方式
4、Child Force Expand 元素展开

3>Vertical Layout Group

垂直布局组，将子元素按照垂直方向自动排列
属性
1、Padding 填充
---- Left 左边距 Right 右边距
---- Top 上边距 Bottom 下边距
2、Spacing 间隔
3、Child Alignment 元素的对齐方式
4、Child Force Expand 元素展开

三、Draw Calls优化

1、优化原理

在界面中默认一张图片一个Draw Calls。
在同一张图片多次显示仍然为一个Draw Calls。

2、精灵打包

将要显示的图片打包成一个大图，这样每次要显示的时候即使是使用单个图片，但图片其实已经被打包的图片包含在内了，这样的话就只要渲染1个Draw Calls，减少GPU渲染物体次数。
打包步骤如下：
1、选择要打包的图片，并将其类型改为Sprite，并添加你定义的标签

2、菜单栏依次点击Edit -->Project Settings，进入后点击Editor项，将Sprite Packer启用即可（推荐在项目中使用Enabled For Builds，在项目结束后检验时采用Always Enabled）

3、运行程序即可开始打包，关闭程序后在菜单栏点击Window–>2D–>Sprite packer，即可看到打包好的图片

4、注意：
----打包时，并不是所有的图片都能合并在一起，如果图片过多，Unity会根据性能需求，将其分为几个包，并且，打包时需要注意图片的格式（RGB、ARGB…），如果格式不同，打包会存在问题。
----如果一个图片需要在多个界面使用时，建议不要将其打包，因为每次显示时，调用的就不只是小图，而是大图，这样反而会牺牲性能。

3、图集

美工制作图片时，尽量将需要在同一界面显示的小图做到一张大图中。
在Unity中切割精灵
----选中图集，在Inspector面板中将Sprite Mode 设置为Multiple
----编辑精灵 Sprite Editor
具体操作步骤如下：
1、选中大图，将其Texture Type改为Sprite，并将其Sprite Mode改为Multiple，然后点击Apply

2、在菜单栏中依次选择Window–>2D–>Sprite Editor

3、划分有多种分为自定划分和手动划分，自动划分时，直接在图片上框选就行，右下角会出现框的宽高，也可对此图片进行命名
4、自动化分可分为3种，点击左上角Slice，选择Type中的Automatic、Grid By Cell Size、Grid By Cell Count；
----Automatic，该模式下，会自动划分图片，即使不规则也没有关系，但是必须保证每张图片之间要存在一定的像素间隙（α通道），否则无法分割。

----Grid By Cell Count，该模式下，按照你图片的长宽平均划分为几行几列来得到小图

----Grid By Cell Size，该模式下，根据输入的每个小图的像素来划分

5、以下就是由大图划分出来的结果

Unity数字孪生开发笔记——UGUI控件篇

Unity数字孪生开发笔记——GUI控件篇

一、常见OnGUI控件

二、UGUI

1、简介

2、控件

1>Canvas画布

2>Rect Transform 矩阵变换

3>Image 图片

4>Text 文本标签

5>Button 按钮

6>Input Fieid 输入框

7>Silder 滑块

8>Panel 面板容器

9>Raw Image 非交互式图片

10>Toggle 复选框

11> Scrollbar 滚动条

12> DropDown 下拉框

13> Scroll View

3、事件

1>事件注册

a、通过编辑器绑定方法

b、AddListener

c、实现接口

1>鼠标指针类

2>拖拽类

3>点选类

4>输入类（建立在点选之上）

d、自定义框架

4、ITween（动画库）

5、自动布局组控件

1>Grid Layout Group

2>Horizontal Layout Group

3>Vertical Layout Group

三、Draw Calls优化

1、优化原理

2、精灵打包

3、图集

猜你喜欢