虚拟现实开发基础及实例 课件 第5章 虚拟现实开发工具5

第五章虚拟现实开发工具5

UGUI系统是从Unity4.6版本以后提供的新的UI系统，相较之前GUI系统，使用起来方便快捷，可视化效果好。UGUI系统提供了很多常用的组件，可以使用户在不使用任何代码的前提下，就可以简单快速的建立其一套UI界面。5.4.4UGUI每一个ui控件都需要放到Canvas（画布），当创建或没有Canvas（画布）系统会默认或自动创建一个Canvas（画布）。Canvas（画布）下有3个组件分别是：Canvas、CanvasScaler、GraphicRaycaster。Canvas组件下的RenderMode（渲染模式）一共有三种模式。1.CanvasScaleWithScreenSize模式（1）ConstantPixelSize模式使UI元素保持相同的像素大小，无论屏幕大小如何。（2）ScaleWithScreenSize模式，可以根据屏幕的大小进行缩放，在此模式下有三种不同的缩放方式。（3）ConstantPhysicalSize模式使UI元素保持相同的物理大小，而不考虑屏幕大小和分辨率。1.Canvas

RectTransform组件是可以看看成Transform的2D版，物体上的Transform组件是不可以删除的，但是RectTransform组件是可以删除的，删除之前，需要将该物体上所有UGUI相关的组件都删掉，之后就可以删除RectTransform，删掉之后，会发现RectTransform变成了Transform。从这里可以看出RectTransform只是Transform在2D情况的一个变种。2.RectTransformPos(X,Y,Z)：相对于锚点点的位置。Width/Height：UI元素宽度和高度。Left,Top,Right,Bottom：Anchors：锚点矩形。Min：锚点矩形左下角位置，按屏幕的比例设置。Max：锚点矩形右上角位置，按屏幕的比例设置。Pivot:UI的中心点的位置，按自身UI的比例设置。Rotation:U旋转，单位是角度。Scale:缩放。2.RectTransform非交互式文本框，主要用来显现文本内容。Text：文本。Font：字体。FontStyle：文本样式。FontSize：显示文本的大小。LineSpacing：行距。AlignbyGeometry是否使用字形大小的方式对齐。BestFit是否根据文本框大小来自适应文字Color文本的颜色。3.Text(文本控制)简介Image(图像)非交互式图像。主要用于制作图标、背景等。SourceImage显示的图像，必须是Sprite（精灵）Color修改图像的颜色。Material渲染图像的材料。RaycastTarget是否可以进行射线检测;ImageType显示图像的类型，选项包括Simple(标准图片)、Sliced(九宫格切片)、Tille(背景平铺)和Filled(旋转)。SetNativeSize将图像的尺寸设置为图像本身的像素;4.Image(图像)如何将图片变成精灵由于Image所支持的图像格式都是Sprite格式，所有要将普通图片转换成精灵，找到要转换的图片文件并鼠标单击，然后找Inspector（属性面板）下的TextureType里的Sprite,最后鼠标单击Apple完成。4.Image(图像)

原始图像和图像很像它们都是向用户显示非交互式图像。您可以将其用于装饰或图标等目的，还可以将图像从类更改为反映其他控件中的更改。控件类似于图像控件，但提供了更多的选项来动画图像和精确填充控制矩形。然而，图像控件要求其纹理为精灵，而原始图像可以接受任何纹理。Texture显示的图像纹理。5.RawImage(原始图像)

Button按钮控件是在UGUI中最常用的一个组件之一，主要用来响应用户的鼠标单击，用于发起或确认操作。Interactable（是否可用）：勾选，按钮可用，取消勾选，按钮不可用，并进入Disabled状态。该属性在所有可交互组件中都有，之后不再描述。6.Button(按钮)

Transition（过渡方式）：按钮在状态改变时自身的过渡方式：主要分为赛中状态的变化，默认状态，高亮状态（鼠标悬停在Button上的状态），点击状体（鼠标点击或选中后的状态），不可点击状态（当按钮不可点击的时候的状态）。（1）ColorTint（颜色过度）（2）SpriteSwap（精灵过渡）（3）Animation（执行动画）6.Button(按钮)

Toggle大部分属性等同于Button组件，同为按钮，不同的只是他自带了组合切换功能，当然这些用Button也是可以实现的。IsOn（选中状态）：此Toggle的选中状态，设置或返回为一个bool。Group（所属组合）：这里指向一个带有ToggleGroup组件的任意目标，将此Toggle加入该组合，之后此Toggle便会处于该组合的控制下，同一组合内只能有一个Toggle可处于选中状态，即便是初始时将所有Toggle都开启IsOn，之后的选择也会自动保持单一模式。OnValueChanged（状态改变触发消息）：当此Toggle选中状态改变时，触发一次此消息。7.Toggle(单选)

带有此组件的物体，可以同时管理多个Toggle，将需要被管理的Toggle的Group参数指向此ToggleGroup便可。AllowSwitchOff（是否允许关闭）：ToggleGroup组默认有且仅有一个Toggle可处于选中状态（其管辖的所有Toggle中），如果勾选此属性，则ToggleGroup组的所有Toggle都可同时处于未选中状态。8.ToggleGroup(单选管理器)

Slider（滑动条）是一个主要用于形象的拖动以改变目标值的控件，他的最恰当应用是用来改变一个数值，最大值和最小值自定义，拖动滑块可在此之间改变，例如改变声音大小。Direction（方向）：滑动条的方向，从左至右，从上至下还是其他的。MinValue(最小值)：滑动条的可变化最小值。MaxValue（最大值）：滑动条的可变化最大值。WholeNumbers（变化值为整型）：勾选此项，拖动滑动条将按整型数（最小为1）进行改变指定值。Value（值）：当前滑动条对应的值。OnValueChanged：值改变时触发消息。9.Slider(滑动条)

Scrollbar（滚动条）:是一个主要用于形象的拖动以改变目标比例的控件，他的最恰当应用是用来改变一个整体值变为他的指定百分比例最大值1(100%)，最小值0（0%），拖动滑块可在此之间改变，例如改变滚动视野的显示区域。Direction（方向）：滚动条的方向，从左至右，从上至下还是其他的。Value(值)：当前滚动条对应的值。Size（操作条矩形长度）：操作条矩形对应的缩放长度。NumbersOfSteps（指定可滚动的位置数量）：滚动条可滚动的位置数目，为0和1时不生效。OnValueChanged：值改变时触发消息。10.Scrollbar(滚动条)Dropdown(下拉菜单)可以让用户从选项列表中选择一个选项。CaptionText：保存当前选中选项的文本。(可选)CaptionImage：保存当前选中选项的图像。(可选)ItemText：下拉框选项里的文字。ItemImage：下拉框选项里的图片。Value：当前选中选项下标。0代表第一个选项，1表示第二个，以此类推。Options：可选的选项的列表。每个选项可以指定text和imageOnValueChanged：当用户鼠标选中的一个选项时，一个事件会被调用。11.Dropdown(下拉菜单)Text（文本）：文本初始内容。CharacterLimit（字符数量限制）：文本输入字数限制。Standard（标准类型）：什么字符都能输入，默认设置。IntegerNumber（整数类型）：只能输入整数。 DecimalNumber（十进制数）：能输入整数或小数。 Alphanumeric（文字和数字）：能输入数字和字母。 Name（姓名类型）：能输入英文及其他文字，（首字母大写）。 Password（密码类型）：输入的字符隐藏为星号。Placeholder（位置标示)：文字提示框，OnValueChanged：当数值改变时调用方法。EndEdit：结束编辑时调用方法。12.InputField(输入文本框)

当需要在一个小区域中显示占用大量的内容时，可以使用滚动矩形。滚动矩形提供了在此内容上滚动的功能。通常，滚动矩形要和蒙版组件配合，为了创建滚动视图，其中只有滚动矩形内的可滚动内容是可见的。Horizontal：是否可以左右滚动Vertical：是否可以上下滚动MovementType：拖动的约束。分别有无限制的，弹性的或限制的。Unrestricted：无限制的，可以任意滚动。Elasticity：当内容到达滚动矩形的边缘时，将对内容进行反弹Clamped：强制内容保持在滚动矩形的范围内。13.ScrollRect(滚动界面)

Mask(遮罩)不是一个可见的UI控件，而是一种修改控件子元素外观的方法。因此，如果子元素比父元素图像大，那么只能看到子元素中适合父元素的部分。该组件，我们在讲解RawImage时，曾经用过。用于显示圆形的画面，这里的遮罩和我们日常生活中遮挡意思正好相反，这里的遮罩是遮住什么地方就显示什么地方。ShowGraphicMask：是否显示遮罩层的图像。14.Mask(遮罩)

布局组件是UGUI的一个特色组件，用来调整UGUI在自动布局时的UI的大小。IgnoreLayout当启用时，忽略此布局。MinWidth应有的最小宽度。MinHeight应有的最小高度。PreferredWidth首选宽度。PreferredHeight首选高度。FlexibleWidth瓜分剩余横向空间的比例。FlexibleHeight瓜分剩余纵向空间的比例。LayoutPriority布局优先级。15.LayoutElement(布局)

ContentSizeFitter组件主要是用来设置自身UI的长宽（这个自身时包含子UI的宽、高）。HorizontalFit:宽度的控制Unconstrained：不根布局组件调整，可手动修改宽度值。 MinSize：按布局组件最小值来调整，不能手动修改宽度值。PreferredSize：按布局组件首选值来调整，不能手动修改宽度值。VerticalFit：高度的控制和宽度的类似，不再描述。这个组件的应用一定要配合LayoutElement组件，否则无效。16.ContentSizeFitter根据比例自动调整自身UI的大小;None：不使用适合的纵横比。WidthControlsHeight：让Height随着Width自动调节。HeightControlsWidth：让Width随着Height自动调节。FitInParent：宽度、高度、位置和锚点都会被自动调整，以使得该矩形拟合父物体的矩形内，同时保持宽高比例。EnvelopeParent：宽度、高度、位置和锚点都会被自动调整，以使得该矩形覆盖父物体的整个区域，同时保持宽高比。17.AspectRatioFitter

水平布局组件通常和LayoutElement配合使用，将其子UI横向并依次放在一起。子UI的大小根据自身的LayoutElement组件的值进行设置。Padding：布局的边界大小。Spacing：行距。ChildAlignment：对齐方式.ControlChildSize：是否控制其子布局元素的宽度和高度。ChildForceExpand：是否填充额外的可用空间。18.HorizontalLayoutGroup

垂直布局与水平布局除了方向都是一样的。19.VerticalLayoutGroupGridLayoutG