Rect Transform

Transform 表示一个点, Rect Transform 表示一个矩形, UI可以放里面

Properties

Property: Function:
Pos (X, Y, Z) pivot point相对于 anchors的位置.
Width/Height Width and height of the rectangle.
Left, Top, Right, Bottom 矩形边缘相对于其锚点的位置. 这可以看作是由锚定义的矩形内的填充. Shown in place of Pos and Width/Height when the anchors are separated (see below). To access these options click the square Anchor Presets box at the top left of the RectTransform component.
Anchors The anchor points for the lower left corner and the upper right corner of the rectangle.
        Min 0.0表示左下角,1.1表示右上角
        Max 0.0表示左下角,1.1表示右上角
Pivot 矩形旋转的轴心点的位置,定义为矩形本身大小的一部分。0,0对应左下角,1,1对应右上角。
Rotation Angle of rotation (in degrees) of the object around its pivot point along the X, Y and Z axis.
Scale Scale factor applied to the object in the X, Y and Z dimensions.
Blueprint Mode Edit RectTransforms as if they were not rotated and scaled. This enabled snapping too.
Raw Edit Mode 当启用时,编辑轴心和锚点值不会反调整矩形的位置和大小,以使其停留在一个地方。

Details

一些 RectTransform的计算是在帧结束时开始的. 这意味着在 Start 和 Update并没有更新

可以在 Start() callback调用 Canvas.ForceUpdateCanvases() 强制

Canvas

Canvas组件表示UI布局和呈现的抽象空间.

Properties

Property: Function:
Render Mode UI在屏幕上或作为3D空间中的对象呈现的方式(参见下面)。.Screen Space - Overlay, Screen Space - Camera and World Space.
Pixel Perfect (Screen Space modes only) UI应该在没有反锯齿的情况下精确渲染吗?
Render Camera__ (Screen Space - Camera mode only)__ UI应该呈现到的摄像机(参见下面)。
Plane Distance (Screen Space - Camera mode only) UI平面放置在摄像机前面的距离。.
Event Camera (World Space mode only) 将用于处理UI事件的摄像机
Receives Events Are UI events processed by this Canvas?

Details

对于所有UI元素,一个画布就足够了,但是场景中可以有多个画布. 也可以使用嵌套画布,其中一个画布作为另一个画布的子画布放置以达到优化目的。嵌套的画布使用与其父画布相同的呈现模式。

Screen Space - Overlay

这种模式下, Canvas 会根据屏幕的大小缩放, ( UI 即使在场景中没有摄像机也会渲染).如果屏幕的大小或分辨率改变,那么UI将自动缩放以适应。用户界面将被绘制在任何其他图形上,比如摄像头视图。

Note: The Screen Space - Overlay canvas需要在hierarchy的顶层.如果不使用它,UI可能会从视图中消失. 这是一个内置的限制. Keep the Screen Space - Overlay canvas at the top level of the hierarchy to get expected results.

Screen Space - Camera

UI 在屏幕上的大小不会因为与摄像机距离的远近而变化,因为它总是自适应你摄像机的截面体 camera frustum. 如果屏幕的大小或分辨率或相机截屏被改变,那么用户界面将自动缩放以适应. 场景中任何比UI平面更接近摄像机的3D对象都将呈现在UI前面,而平面后面的对象将被遮挡。

World Space

此模式将UI呈现为场景中的一个平面对象 ,和 Screen Space - Camera 不一样然而,面板不需要面对摄像头,可以根据你的喜好调整方向.

Canvas Scaler

Canvas Scaler 组件用于控制画布中UI元素的整体比例和像素密度. T这种缩放会影响画布下的所有内容,包括字体大小和图像边框。

Properties

Property: Function:
UI Scale Mode 确定如何缩放画布中的UI元素。
        Constant Pixel Size 使UI元素保持相同的像素大小,而不管屏幕大小。
        Scale With Screen Size 屏幕越大,UI元素越大。.
        Constant Physical Size 使UI元素保持相同的物理大小,而不管屏幕大小和分辨率。

Settings for Constant Pixel Size:

Property: Function:
Scale Factor 通过这个因素缩放画布中的所有UI元素
Reference Pixels Per Unit 如果精灵有“像素/单位”设置,那么精灵中的一个像素将覆盖UI中的一个单元。

Settings for Scale With Screen Size:

Property: Function:
Reference Resolution UI布局设计的分辨率。如果屏幕分辨率较大,UI将按比例放大;如果屏幕分辨率较小,UI将按比例缩小。
Screen Match Mode 如果当前分辨率的高宽比不适合参考分辨率,则用于缩放画布区域的模式。
        Match Width or Height 以宽度为基准,高度为基准,或者介于两者之间,缩放画布区域。.
        Expand 水平或垂直扩展画布区域,这样画布的大小将永远不会小于Reference Resolution
        Shrink 水平或垂直裁剪画布区域,因此画布的大小将永远不会大于Reference Resolution
Match 确定缩放是使用宽度或高度作为参考,还是两者之间的混合。
Reference Pixels Per Unit If a sprite has this ‘Pixels Per Unit’ setting, then one pixel in the sprite will cover one unit in the UI.

Settings for Constant Physical Size:

Property: Function:
Physical Unit The physical unit to specify positions and sizes in.
Fallback Screen DPI The DPI to assume if the screen DPI is not known.
Default Sprite DPI The pixels per inch to use for sprites that have a ‘Pixels Per Unit’ setting that matches the ‘Reference Pixels Per Unit’ setting.
Reference Pixels Per Unit If a sprite has this ‘Pixels Per Unit’ setting, then its DPI will match the ‘Default Sprite DPI’ setting.

Settings for World Space Canvas (shown when Canvas component is set to World Space):

Property: Function:
Dynamic Pixels Per Unit 用于在UI中动态创建位图(如文本)的每个单元的像素量。
Reference Pixels Per Unit If a sprite has this ‘Pixels Per Unit’ setting, then one pixel in the sprite will cover one unit in the world. If the ‘Reference Pixels Per Unit’ is set to 1, then the ‘Pixels Per Unit’ setting in the sprite will be used as-is.

Constant Pixel Size

Constant Pixel Size模式, 元素的位置和大小以屏幕上的像素为单位指定.这也是在没有Canvas Scaler时画布的默认功能 但是,通过在Canvas Scaler中设置缩放因子,可以对画布中的所有UI元素应用常量缩放。

Scale With Screen Size

根据屏幕分辨率大小改变ui的位置和大小. 如果当前屏幕分辨率和reference resolution不一样,它会根据Match的比例来确定UI缩放的元素,比如Match是0.5,则先比交当前分辨率和reference分辨率的宽的比例,比如reference resolution是600*800,当前是800*600,800/600是UI元素宽需要缩放的大小,600/800是高需要缩放的大小

如果当前屏幕分辨率与参考分辨率具有不同的宽高比,则将每个轴分别缩放以适应屏幕将导致不均匀缩放,这通常是不可取的. 与此相反,ReferenceResolution组件将使画布分辨率偏离参考分辨率,以尊重屏幕的宽高比.可以使用Screen Match Mode来控制这种偏差的行为。

World Space

For a Canvas set to ‘World Space’ the Canvas Scaler can be used to control the pixel density of UI elements in the Canvas.

Canvas Group

Canvas Group控制多个UI元素,而不是单独控制它.  Canvas Group 影响正在运行的GameObject(游戏物体)以及它所有的子物体

Properties

Property: Function:
Alpha 该组中UI元素的不透明度,请注意,元素也保留它们自己的透明性,因此画布组alpha和各个UI元素的alpha值相乘。
Interactable 确定此组件是否接受输入。当它被设置为false时,交互将被禁用。
Block Raycasts ui元素不支持 Physics.Raycast.,是否接收事件
Ignore Parent Groups 挂在该组件的物体时候收到父物体group的影响

Details

Canvas组的典型用途是:

  • 通过在窗口的GameObject(游戏对象)上添加一个画布组并控制它的Alpha属性来淡入或淡出整个窗口。
  • 通过将画布组添加到父游戏对象并将其可交互属性设置为false,使得整个控件不可交互(“变灰”)。
  • 通过在元素或其父元素上放置画布组组件并将其block raycast属性设置为false,使一个或多个UI元素不接收鼠标事件。

Raw Image

Image需要Texture 转换成 Sprite
 Raw Image可以接受任何贴图Texture.

Properties

Property: Function:
Texture The texture that represents the image to display.
Color The color to apply to the image.
Material The Material to use for rendering
the image.
Raycast Target Enable Raycast Target if you want Unity to consider the image a target for raycasting.
UV Rectangle 图像在控制矩形内的偏移量和大小,以归一化坐标表示(范围0.0到1.0)。图像的边缘被拉伸以填充UV矩形周围的空间。XY控制偏移,也就是上下左右的位置,WH控制图片的平铺,这就可以制作动画

Details

由于原始图像不需要精灵纹理,你可以使用它来显示Unity播放器可用的任何纹理。例如,您可能会在游戏中显示使用WWW类从URL下载的图像或来自对象的纹理。

UV矩形属性允许您显示较大图像的一小部分。XY控制偏移,也就是上下左右的位置,WH控制图片的平铺,这就可以制作动画

Mask

子UI按照遮罩的形状显示,使用灰度图表示遮罩,白色的显示,黑色的不显示

RectMask2D

RectMask2D和 Mask一样. 它有一些限制,性能好

Description

限制就是:

  • 它只适用于二维空间,不使用透明度遮罩,而是使用图形遮罩,就是只显示RectMask2D图形内的图像
  • 它将不能正确地遮罩非共面元素

优点是:

  • It does not use the stencil buffer
  • No extra draw calls
  • No material changes
  • Fast performance

Transition Options

Color Tint

Property: Function:
Target Graphic The graphic used for the interaction component.
Normal Color The normal color of the control
Highlighted Color The color of the control when it is highlighted
Pressed Color The color of the control when it is pressed
Disabled Color The color of the control when it is disabled
Color Multiplier 这将把每个过渡的着色颜色乘以它的值。使用这种方法,您可以创建大于1的颜色,以使基础颜色小于白色(或小于全alpha)的图形元素的颜色(或alpha通道)更加明亮。
Fade Duration 从一种状态消失到另一种状态所花费的时间,以秒为单位

Toggle Group

属于同一组的开关是受限制的,因此一次只能打开其中一个开关—按其中一个开关会自动关闭其他的开关。

A Toggle Group

Properties

Property: Function:
Allow Switch Off 不允许打开开关吗?如果启用了此设置,则按下当前打开的切换按钮将关闭该设置,以便不打开任何切换按钮。如果禁用此设置,则按下当前打开的toggle将不会更改其状态

Description

切换组在用户必须从一组互斥选项中进行选择的任何地方都是有用的。常见的例子包括选择玩家角色类型,速度设置(慢,中,快等),预设的颜色和星期.

与其他UI元素不同,带有Toggle Group组件的对象不需要是画布对象的子对象,尽管切换的toggle仍然需要。

 注意Toggle Group如果组中的多个toggle被打开,那么它的约束不会立即生效.只有当一个新的切换开关打开时,其他的开关才会关闭. 这意味着由您来确保从一开始就只有一个切换是打开的。

Dropdown

Dropdown 下拉菜单可以让用户从选项列表中选择一个选项。

Properties

Property: Function:
Interactable Will this component will accept input? See Interactable.
Transition Properties that determine the way the control responds visually to user actions. See Transition Options.
Navigation Properties that determine the sequence of controls. See Navigation Options.
Template 就是一个scroll rect view
Caption Text 文本组件,用于保存当前选择项的文本。(可选)
Caption Image 用于保存当前选择项的图像的图像组件。(可选)
Item Text 用于保存项的文本的文本组件。(可选)
Item Image 用于保存项的图像的图像组件。(可选)
Value 当前选择项的索引。0是第一个选项,1是第二个选项,依此类推。
Options 可能选项的列表。可以为每个选项指定文本字符串和图像。

Events

Property: Function:
On Value Changed A UnityEvent that is invoked when a user has clicked one of the options in the dropdown list.

Details

选项列表在检查器中指定,或者可以从代码中分配。对于每个选项,可以指定一个文本字符串,也可以指定一个图像(如果设置下拉菜单支持该选项),如果需要添加图片需要你自己添加两个image作为选项图片,就像上图中显示的那样

On Value Changed当用户点击列表中的一个选项时,这个事件会做出响应,0代表第一个选项

The template system

通过Dropdown 组件的Template 属性来访问template

Setup of text and image support

dropdown支持文字和图片内容 text content 和 image content. 文本和图像都是可选的。只有在下拉菜单设置为支持时才能使用。

设置 dropdown的 Caption Text and Item Text 属性,就可以支持显示文字,这是默认的

  • Caption 用来显示当前选择的文本
  • The Item Text 用来保存每一个选项的文本. 它是Item 的子物体.

设置 dropdown的 Caption Image and Item Image 属性,能显示图片. 这不是默认的.

  • The Caption Image 显示当前选择的图片,他是Dropdown 的子物体
  • The Item Image保存每一个选项的图片. 他是 Item 的子物体.

这些也可以从脚本中设置

Placement of the dropdown list

dropdown 的位置是由Template.的锚点和中心点控制的 anchoring and pivot of the Rect Transform of the Template.

下拉控件有简单的逻辑来防止下拉显示在画布的边界之外,因为这将使得不可能选择某些选项。如果位于其默认位置的下拉菜单未完全位于画布矩形内,则其相对于控件的位置将反转。例如,默认情况下显示在控件下方的列表将显示在控件上方。

逻辑很简单,有一定的局限性。下拉模板需要不大于画布大小的一半减去下拉控件的大小,否则,如果下拉控件放置在画布的中间,列表的任何位置都可能没有空间。

Input Field

An empty Input Field.

Text entered into the Input Field.

Properties

Character Limit 可以输入的最大字符数的值。.
Content Type Define the type(s) of characters that your input field accepts
Standard 可以输入任何字符
Autocorrected 自动更正功能可以跟踪输入的单词,如果该字体没有这个单词,则为用户提供更合适的替代选项,自动替换输入的文本,除非用户显式地重写操作。
Alphanumeric 字母和数字都允许。无法输入符号。
Name 自动将每个单词的第一个字母大写。注意,用户可以使用Delete键规避大小写规则。
Email Address 允许您输入一个由一个@符号组成的字母数字字符串。周期/基线点不能相邻输入
Password* 用星号隐藏输入的字符。允许符号
Pin 用星号隐藏输入的字符。只允许输入整数。
Custom 允许您自定义行类型、输入类型、键盘类型和字符验证。
Line Type Defines how text is formatted inside the text field.
Single Line 只允许文本在一行上。
Multi Line Submit 允许文本使用多行。只在需要时使用新行。
Multi Line Newline 允许文本使用多行。用户可以通过按回车键来使用换行。
Placeholder This is an optional ‘empty’ Graphic to show that the Input Field is empty of text. Note that this ‘empty’ graphic still displays even when the Input Field is selected (that is; when there is focus on it). eg; “Enter text…”.
Caret Blink Rate 定义放置在行的标记的闪烁速度,以指示建议的文本插入。
Selection Color 文本中选定部分的背景颜色。
Hide Mobile Input (iOS only) 隐藏连接到移动设备屏幕键盘的本机输入字段。注意,这只适用于iOS设备。

Events

Property: Function:
On Value Change 当输入字段的文本内容更改时调用的UnityEvent。事件可以将当前文本内容作为字符串类型的动态参数发送。
End Edit 一个UnityEvent,当用户完成对文本内容的编辑时调用,方法是点击回车键或单击其它地方,不聚焦当前输入框时,事件可以将当前文本内容作为字符串类型的动态参数发送。

Details

Note  不支持Rich Text

Hints

  • 通过 Input Field的 text 属性来访问它,而不是通过它的子物体的text组件来访问它,但是可以通过子物体的text组件来更改text的样式

Scroll Rect

Properties

Property: Function:
Movement Type Unrestricted, Elastic or Clamped. Use Elastic or Clamped 让内容限制在Scroll Rect的边界内. Elastic 会反弹当到边界的时候
        Elasticity This is the amount of bounce used in the elasticity mode.
Inertia 当设置惯性时,内容将继续移动,当指针释放后,拖动。当不设置惯性时,内容只会在拖动时移动。
        Deceleration Rate 设置惯性时,减速率决定内容停止移动的速度。速率为0将立即停止移动。值1表示移动将永远不会减速。
Scroll Sensitivity 滚动轮和轨迹板滚动事件的灵敏度。

Horizontal Layout Group

The Horizontal Layout Group component places its child layout elements next to each other, side by side.将其子布局元素并排放在一起。它们的宽度由各自的最小宽度、首选宽度和灵活宽度根据以下模型确定:

通常和content  size fitter一起使用

Properties

Property: Function:
Control Child Size Whether the Layout Group controls the width and height of its child layout elements.
Use Child Scale Whether the Layout Group considers the scale of its child layout elements when sizing and laying out elements.

Width and Height correspond to the Scale > X and Scale > Y values in each child layout element’s Rect Transform component.

Child Force Expand Whether to force the child layout elements to expand to fill additional available space.

Grid Layout Group

Properties

Start Axis 放置元素的主轴。在开始新行之前,水平线将填充整个行。在新列开始之前,Vertical将填充整个列。
Child Alignment The alignment to use for the layout elements if they don’t fill out all the available space.
Constraint 自定义先网格的行数或者列数,默认时行数加1后列数加1,自己定义之后行数或者列数固定不变

Making UI elements fit the size of their content

自动调整矩形的大小以适应UI元素的内容。这可以通过添加Content Size Fitter.组件

Fit to size of Text

为了使带有文本组件的Rect Transform适合文本内容,给该text 添加Content Size Fitter组件. 设置Horizontal Fit and Vertical Fit 为 Preferred setting.

Remember the pivot

当UI元素自动扩展的时候,需要注意 pivot 的位置. 当元素被调整大小时,轴心将保持不变,因此通过设置轴心位置,您可以控制元素将在哪个方向扩展或收缩。例如,如果主元在中心,那么元素将在各个方向上均匀地扩展,如果主元在左上角,那么元素将向右向下扩展。

Fit to size of UI element with child Text

如果你有一个UI元素,比如一个按钮,它有一个背景图像和一个带有文本组件的子游戏对象,你可能想让整个UI元素适合文本的大小——也许加上一些填充。

添加Horizontal Layout Group 和 Content Size Fitter ,设置Horizontal Fit, the Vertical Fit为Preferred setting.

Make children of a Layout Group fit their respective sizes

如果您有一个布局组(水平或垂直),并且希望组中的每个UI元素都适合它们各自的内容,就是每个按钮都有自己的大小,该怎么办?

不能为每一个子物体添加Content Size Fitter ,  Content Size Fitter想要控制它们自己的 Rect Transform, 但是父物体的 Layout Group 也想控制它们子物体的 Rect Transform. 就矛盾了

父布局组已经可以使每个子布局适合内容的大小,你需要做的就是关闭Layout Group中的 Child Force Expand 按钮.如果子物体也是 Layout Groups ,你也需要关闭子物体的Child Force Expand按钮

如果你想要一些子物体扩展,一些子物体不扩展,给那些扩展的子物体添加 Layout Element 组件,并打开Flexible Width or Flexible Height 属性按钮, 父物体的Layout Group 的 Child Force Expand 按钮仍然关闭,这样就好了

Creating Screen Transitions

在多个UI屏幕之间进行转换的需求相当普遍。在这个页面中,我们将探索一种简单的方法来创建和管理这些转换,使用动画和状态机来驱动和控制每个屏幕。

Overview

高层次的想法是每个屏幕都有一个 Animator Controller,和两个状态 (Open and Closed) 和一个bool变量 Parameter (Open). 要在屏幕之间进行转换,只需关闭当前打开的屏幕并打开所需的屏幕. 创建一个ScreenManager类,保持跟踪,并负责关闭任何已打开的屏幕. 触发转换的按钮只需要求ScreenManager打开所需的屏幕。

Thinking about Navigation

要避免在屏幕外有可选择的元素,因为这将使玩家能够选择屏幕外的元素, 关闭任何屏幕外 hierarchy.我们还需要确保当一个新屏幕显示时,我们将元素设置为已选择,否则玩家将无法导航到新屏幕。我们将在下面的ScreenManager类中处理所有这些。

Setting up the Animator Controller

unity 之UGUI Recttransform相关推荐

  1. Unity 之 UGUI RectTransform矩形变换组件详解

    Unity 之 UGUI RectTransform矩形变换组件详解 1,属性面板 2,详细信息 3,代码操作 4,使用实例 4.1 传说中的自适应 4.2 锚点的另一种使用方式: 4.3 蓝图和原始 ...

  2. Unity 之 UGUI代码生成UI设置为相对位置问题

    什么是RectTransform? 创建一个UGUI组件时,查看其Inspector面板,原来Transform已经被替换成RectTransform,面板属性也不一样了,如下图: Unity官方对R ...

  3. 零基础入门 Unity 之 UGUI 详解专栏 | 寻找C站宝藏

    零基础入门 Unity 之 UGUI 详解专栏 | 寻找C站宝藏 六大推荐理由 理由一:系统 理由二:详细 理由三:专业 理由四:图解 理由五:深度 理由六:实例 一键直达:<UGUI 控件详解 ...

  4. Unity中ugui如何制作不规则按键的两种方法

    Unity中ugui如何制作不规则按键的两种方法 两种不同的方案 目前,关于这个问题如何,解决通过搜索引擎我们能找到两种不同的方案: 多边形碰撞器: 该方法是指给精灵(Sprite)添加一个多边形碰撞 ...

  5. Unity 之 UGUI Dropdown下拉控件展开方向控制

    Unity 之 UGUI Dropdown下拉控件展开方向控制 有个需要控制下拉控件展开方向的需求,不得探索一下这个下拉方向是由那些属性控制的. 其实我们正常使用的时候你可以发现,下拉控件默认向下展开 ...

  6. Unity 之 UGUI Dropdown组件使用简析

    Unity 之 UGUI Dropdown组件使用简析 官方释义 示例展示 代码操作 官方源码 官方释义 官方文档:https://docs.unity3d.com/Manual/script-Dro ...

  7. Unity GUI(uGUI)使用心得与性能总结

    Unity GUI(uGUI)使用心得与性能总结 作者 kingshijie 关注 2015.09.26 15:35 字数 3686 阅读 28031评论 10喜欢 49 背景和目的 小哈接触Unit ...

  8. Unity的UGUI用TexturePacker全自动打图集,包括九宫格切图信息

    Unity的UGUI用TexturePacker全自动打图集,包括九宫格切图信息 前言 环境准备 实现过程 注意 总结 版权声明 前言 最近在学习UGUI的打图集,之前一直在用SpritePacker ...

  9. 【Unity使用UGUI实现王者荣耀UI界面(四)】游戏开始界面

    文章目录 [Unity使用UGUI实现王者荣耀UI界面(四)]游戏开始界面 1. 把一些重复的UI添加 2. 开始游戏按钮 3. 注销按钮 4. 完成 5. 打包 6. 打包完成 内 容 简 介 章节 ...

最新文章

  1. solidworks activator未响应_SolidWorks之初识工程图
  2. php 执行命令屏幕输出捕捉,在php执行linux命令时显示所有输出
  3. php不支持定时器么,PHP没有定时器?
  4. C# 去除所有的html标签
  5. Tensorflow快餐教程(4) - 矩阵
  6. cuSPARSE库:(一)函数的异步执行
  7. Hexo为文章设置目录与标签的方法
  8. GhostExp 2010特别版安装方法
  9. 【Git项目管理工具推荐】Sourcetree、Sourcegear-DiffMerge
  10. 北京航空航天大学计算机考研难度,北京航空航天大学考研难吗?一般要什么水平才可以进入?...
  11. 编写MTK6737平台的GPIO驱动例程(三)
  12. 什么是知识,什么是知识图谱,有什么作用,有哪些应用领域?
  13. 关于‘\0’,‘0’,“0”,0的区别
  14. 微信小程序日期选择器控件xxxx-xx-xx格式
  15. form表单中的onSubmit
  16. CPU四核八线程和四核四线程的区别
  17. el 表达式 判断字符串是否相等
  18. Objective C定义私有方法
  19. 如何快速打包SOLIDWORKS工程文件
  20. Google Earth Engine(GEE) ——统一的全球关键基础设施和指数(CISI)数据集

热门文章

  1. 新概念 Lesson 3 Nice to meet you
  2. power oj 1038: Lucy的新难题
  3. html打开图片流,图片网格瀑布流布局和打开图片动画特效
  4. 【经验分享】【态度:积极的力量】
  5. 详解python中的用法_详解python中@的用法
  6. SAP_MB5B历史库存查询
  7. MOT-CTracker
  8. python下载完了之后怎么用_pc软件下载平台注册哪个好
  9. 2022电工(初级)操作证考试题库及在线模拟考试
  10. 利用VisualVM监测Azure云服务中的Java应用