Unity16 UI

Posted 2023-04-08 郝穹

一、UI

在资源商店下载一些图片：Fantasy Free GUI

1.画布

如果要显示UI，先创建UI-画布，如果要支持事件交互，必须创建一个事件系统。
创建画布Canvas，会自动创建一个EventSystem事件系统。
一般做UI时，会切换成2d模式。
渲染模式
覆盖：摄像机最前面渲染的内容，会覆盖后面的物体。
摄像机：被摄像机渲染，会被离摄像机近的物体覆盖。
世界空间：摄像机渲染，但是他可以进行3d旋转，把画布作为了一个3d物体，可以用来做3d按钮等。
排序次序：多个画布的渲染优先级。
画布缩放Canvas Scaler：
恒定像素大小：
屏幕大小缩放：设置分辨率后，无论游戏窗口改变成什么分辨率，这个画布都不会改变。

2.锚点和轴心

1.图像
图像的位置是依据锚点和轴心的。
image的锚点就固定在canvas上。

锚点的位置就是0,0,0。图像的位置就是相对于锚点的偏移。

一般会把锚点分开用来适配各种分辨率，此时图片会以百分比进行适配。
轴心：图片的轴心点。图片的位置、旋转、缩放等都是依靠轴心进行的。轴心才是图片真正的位置。

3.文本组件

旧版文本：
富文本：可以使用标签对一个文本其中的部分文本进行修改比如加粗标签b等。
最佳适应：可以适应文本框进行缩小。
新版文本：
需要导入TextMesh Pro
Style和html相似。

4.按钮

新版旧版按钮的区别只是包含的文本不同。
Interactable：是否开启交互。
导航：如果按钮多时，按方向键可以切换选中的按钮。
可以将脚本挂载在任何组件上，如canvas，然后button中的事件可将canvas拖拽，再选择需要执行的方法。

5.文本输入框

所有旧版新版UI组件的使用都需要引入命名空间。

新版：

占位文本：在InputField下的Placeholder中设置。
事件的使用和Button相似。

6.选择框和下拉框

多个选项多选一：添加组件Toggle Group，在Group拖入它。
下拉列表中Options可修改选择项。
代码中添加：

如果要为下拉框添加图像，需要在Template模板下添加image

再将该image关联到项图像中。标题图像也是类似，在Dropdown下添加Image。

7.滑动条与滚动条

滑动条由背景、填充区域、小圆按钮组成。可以做血条或者音量设置等。
滚动视图：由区域窗口、竖直、水平方向的滚动条组成。
可以对一个显示不完的物体进行滚动条拖拽显示。ViewPort是可视区域，Content是所有内容区域，当拖动滚动条时，会显示Content的部分区域作为可视区域，其实是用Mask对超出区域进行了遮罩。

8.面板

为了解决各种屏幕的适配问题，可以用锚点进行拖动适配，但是如果物体过多，可以用面板Panel进行适配。可以将面板的锚点放到相应的位置，将所有物体放到面板中就可以实现各个设备的适配。

9.其他组件

图片遮罩：Mask
文本框对文字的适配：

面板自动按比例分配子物体：包括水平布局、垂直布局、网格布局等。

Unity UI on hololens

http://heliosinteractive.com/scaling-ui-hololens/ 

https://forum.unity3d.com/threads/unity-ui-on-the-hololens.394629/

 

1.Create a World Space Canvas attached to the Camera (or using a Tagalong, etc)
2.Set its width to 126.8 and its height to 72 (mirroring the 1268×720 resolution)
3.Set the Dynamic Pixels Per Unit to 10 on the Canvas Scaler
​4.Magic Time​: to make the canvas the full size of the viewable area, set its scale to its z-distance from the camera * 0.00415f.