3.6.1　UGUI简介

UI是User Interface的简称，也就是用户界面。在Unity中UI主要是指显示在屏幕上的这些界面元素，比如按钮、滑动条、图片等。

UGUI是Unity官方自带的UI系统。常用的UI系统还有NGUI。

在场景资源管理面板Hierarchy中执行“Create”→“UI”→“Button”命令，创建一个基本的UI元素——按钮“Button”。

此时创建出了三个元素，“Canvas”是整个UI界面的范围，也叫作UI画布。“Button”是按钮。“EventSystem”是一个输入模块，UGUI的辅助工具。

画布Canvas是UGUI的标准范围，同时UGUI中的元素都是以Canvas为基准来定位的。

可以把Canvas看作一个贴在摄像机屏幕上的透明玻璃板，在它上面出现的各种UI元素同时等于贴在了摄像机屏幕上。

常用的UGUI元素有：图片“Image”、文本“Text”、按钮“Button”、输入框“InputFile”。

3.6.2　屏幕自适度

屏幕自适度是用来解决由于屏幕分辨率差异而造成显示错误的调节方法。

开发AR时与实际发布后使用时的屏幕分辨率可能是不同的，由于屏幕分辨率不同，可能导致显示出的UI元素位置错乱，长宽比例失调。

开发AR时Unity引擎中所使用的屏幕分辨率在游戏运行面板Game中查看和更改。单击下方的加号可以增加新的分辨率模式。

举例说明一下，当前开发使用800×600分辨率。创建六个按钮“Button”、一张图片“Image”和一个文本“Text”。当前的设计是按钮在左右两边，图片居中，文本显示在上方。

如果使用800×600分辨率的屏幕运行这个程序，则UI显示正常。

如果不做任何屏幕自适度的设置，此时使用500×300分辨率的屏幕，显示效果如下。按钮与文本组件已经无法显示在屏幕中。

如果不做任何屏幕自适度的设置，此时使用1500×1000分辨率的屏幕，显示效果如下。所有内容都堆在了屏幕的中心位置，完全与设计不符。

如果经过恰当的屏幕自适度调整，使用500×300分辨率的屏幕后，运行情况如下。

经过恰当的屏幕自适度调整，使用1500×1000分辨率的屏幕后，运行情况如下。

可以看出，在经过屏幕自适度调整后，无论使用大分辨率还是小分辨率的屏幕，对界面的影响并不大。

3.6.3　调整屏幕自适度

本节内容以UGUI为例，在开始自适度调整前需要先把Canvas属性中的渲染模式“RenderMode”调整为“ScreenSpace”→“Overlay”，保证UI直接渲染覆盖在镜头上。

调整屏幕自适度主要有两个方面：Canvas组件的缩放属性和UGUI元素的锚点位置。

1.Canvas组件的缩放属性，在组件“Canvas Scaler”中。

a.找到UI缩放模式“UIScaleMode”，选择根据屏幕的尺寸进行缩放“Scale With Screen Size”。

b.在默认分辨率“Reference Resolution”中填入开发时所使用的分辨率（Game视图中选择的分辨率）。

c.在屏幕匹配模式“Screen Match Mode”中，根据宽或高进行匹配“Match Width Or Height”。

2.UGUI元素的锚点位置。

UGUI元素的锚点，决定了当屏幕尺寸发生变化时，它们位置移动的标准点。如果不理解的话，只要简单记住锚点一般根据就近原则来确定，例如，按钮在屏幕的左上角，那么就把按钮的锚点定位在左上位置。

选中一个UGUI元素，可以在它的监视面板中看到锚点图标，单击后展开，可以选择锚点位置。

需要注意就近原则中的“就近”，是指选定的UI元素与其父级物体的位置关系。

例如按钮“Button”是一张图片“Image”的子物体。

虽然按钮靠近屏幕的左上角，但是它与父级图片的关系是在右下角，此时根据就近原则应该将按钮的锚点定位在右下角，图片的锚点定位在左上角。

3.6.4　Image与Text

Image用来显示图片，注意图片需要设置为精灵模式，才可以附给Image。

例：将图片拖动到项目资源管理面板Project中，在属性中的纹理类型“Texture Type”中选择精灵模式“Sprite”，单击下方的“Apply”确认更改。

变为精灵格式的图片会出现一个小三角，此时就可以附给Image使用。

新建Image，将精灵图片拖动到属性的图片源“Source Image”中，此时Image显示出了图片内容。

Text用来显示文字，在检视面板中，在“Text”文本框中输入要显示的文字内容。

“Font”是文字的字体

“Font Size”是文字大小

“Alignment”是对齐方式

“Color”是文字的颜色

勾选“Best Fit”文字会根据Text本身的大小来进行缩放，但是最大的尺寸由“Font Size”决定。

3.6.5　按钮（Button）

按钮（Button），单击可以触发一些编辑好的事件。

按钮上的纹理可以通过给按钮组件的“Source Image”指定精灵图片来进行更改。

按钮上的文字在子物体Text上进行修改，如果按钮显示的图片中已有文字，则可以将按钮的Text子物体取消或者删除。

按钮的点击事件在“On Click ()”中进行设置，先在脚本中编辑好功能函数，把这个脚本附给场景中的一个游戏对象。单击“On Click ()”下方的加号“+”，增加一个对象栏，将脚本所依附的物体拖动进去，在后方选择对应的功能函数，这样按钮点击事件就配置完成。运行程序，单击按钮时就会执行相应的功能。 u2iS6mIIRo6RRyARgvBmw5mHqkXL1cm9EVZ+ACirzD2/jl958WyPTL38Wys4X+dn