扫一扫，访问微社区
后使用快捷导航没有帐号？
签到成功!您今天第{todayrank}个签到，签到排名竞争激烈，记得每天都来签到哦！已连续签到:{constant}天，累计签到:{days}天
当前位置： &
查看: 3260|回复: 11
Unity UGUI 原理篇（五）：Auto Layout 自动布局
7排名<font color="#FF昨日变化1主题帖子积分
在线时间125 小时
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
才可以下载或查看，没有帐号？
UGUI 原理篇（五）：Auto Layout 自动布局
<font color="#.Auto Layout System 架构
<font color="#.Layout Element 元素大小
<font color="#.Horizontal丶Vertical丶Grid Layout Group 元素排列
<font color="#.Content Size 与 Aspect Ratio Fitter 大小控制
本系列其他文章
Unity UGUI 原理篇(一)：Canvas 渲染模式
Unity UGUI 原理篇(二)：Canvas Scaler 缩放核心
Unity UGUI 原理篇(三)：Rect Transform
Unity UGUI 原理篇(四)：Event System Manager 事件与触发
Unity UGUI 原理篇(五)：Auto Layout 自动佈局
使用环境 与 版本
Unity 5.2.4
Auto Layout System
Auto Layout System 是基于 Rect Transform Layout System 之上的系统，自动调整一个或多个的元素大小、位置、间格，又分为 Layout Controllers(父物件) 与 Layout Elements(子物件) 两部分，一个简单的 Auto Layout 架构如下 (此处介绍理论，实作留到后面)
1.png (73.77 KB, 下载次数: 3)
22:52 上传
Layout Element (子物件)
2.png (21.26 KB, 下载次数: 4)
22:52 上传
3.png (28.08 KB, 下载次数: 11)
22:52 上传
点选UI后，可以在 Inspector 最下方切换为 Layout Properties 看到资讯
5.png (19.96 KB, 下载次数: 3)
22:52 上传
4.png (17.2 KB, 下载次数: 6)
22:52 上传
Layout Controllers 透过不同的佈局方式，取得 Layout Element size 分配子物件，基本原则如下
首先分配 Minimum Size
如果还有足够空间，分配 Preferred Size
如果还有额外空间，分配 Flexible Size
从以下图片可以看出图片宽度的增长方式 (此处介绍理论，实作留到后面)
6.png (21.26 KB, 下载次数: 3)
22:52 上传
7.png (33.84 KB, 下载次数: 2)
22:52 上传
首先分配 Minimum Size (300，红色部分)
如果还有足够空间，分配 Preferred Size (300~500，绿色部分)
如果还有额外空间，分配 Flexible Size：1 (500~700，蓝色部分)
比较特别的是 Flexible，他是代表著整个大小的比例，如果 Layout 下有2个物体，分别给 Flexible 设定为 0.3 与 0.7，那比例就会变成下图 (3:7)
8.png (16.31 KB, 下载次数: 3)
22:52 上传
另外要注意的是，Text、Image Component 会根据内容大小自动分配 Preferred Size
Layout Controllers (父物件)
Layout Group
不会控制 Layout Controllers (父物件)自身大小，而是控制子物件大小与位置，在大多数情况下，根据每个元素的 minimum、preferred、flexible 大小分配适当的空间，layout group 之间也可以嵌套，又分为 Horizontal(水平)、Vertical(垂直)、Grid(格状) 3种
Horizontal Layout Group
9.png (21.73 KB, 下载次数: 11)
22:52 上传
水平方向(Width) 排列子物件
组件位置：Unity Menu Item → Component → Layout → Horizontal Layout Group
Padding：填充内部空间
Spacing：每个元素间格
Child Alignment：当没有填满全部空间时，子物件对齐位置
Child Force Expand：强制控制子物件填满空间
透过实例理解各参数：
A.开新 SceneUnity Menu Item → File → New Scene
B.新增一个 CanvasUnity Menu Item → GameObject → UI → Canvas
C.Canvas 下新增空物件，做为 Layout Controllers (以下简称父物件)
D.父物件增加 Horizontal Layout Group ComponentUnity Menu Item → Component → Layout → Horizontal Layout Group
E.父物件下建立5个 Button(子物件)，完成后如下，当大小改变时会自动分配子物件大小
10.gif (750.29 KB, 下载次数: 4)
22:52 上传
F.此时在 Button 的 Rect Transform Component 就不能进行调整，因为我们已经透过 Horizontal Layout Group 进行分配空间，在 Rect Transform 会显示目前被哪个 Layout Group 控制
11.png (21.74 KB, 下载次数: 2)
22:52 上传
G.将 Padding 数值调整如图，可以看出填充区域
12.png (44.97 KB, 下载次数: 13)
22:52 上传
H.将 Spacing 数值调整如图，可以看出元素区间
13.png (47.08 KB, 下载次数: 5)
22:52 上传
I.接下来我们将5个 Button 增加 Layout Element Component 覆盖预设大小，用于手动设定每个元素的大小组件位置：Unity Menu Item → Component → Layout → Layout Element
J.此时将 Horizontal Layout Group 的 Child Force Expand Width 取消勾选，不强制子物件填满额外空间，而是透过 Layout Element 手动设定
K.这裡使用几种不同的设定，来理解 Horizontal Layout Group 是怎麽取得 Layout Element size 分配子物件
■ 复习一下子物件大小分配方式，如果不清楚请回去上面 Layout Elements 部分
首先分配 Minimum Size
如果还有足够空间，分配 Preferred Size
如果还有额外空间，分配 Flexible Size
■ 将5个 Button 的 Layout Element Min Width 分别改为 20、30、40、50、60，此时可以看出每个 Button 宽度分佈，改变父物件大小时子物件大小并不会改变，因为只有分配 Min Width，并不会分配额外有效空间
14.gif (505.14 KB, 下载次数: 2)
22:52 上传
此时改变 Horizontal Layout Group 的 Child Alignment，可以看出元素对齐
15.gif (326.96 KB, 下载次数: 6)
22:52 上传
父物件 Layout Properties Min Width = 5个按钮宽(20+30+40+50+60=200) + Spacing(40) + Padding Left、Right(20) = 260
16.png (9.37 KB, 下载次数: 3)
22:52 上传
■ 现在将第1个 Button 的 Layout Element 数值调整如图
17.png (8.59 KB, 下载次数: 7)
22:52 上传
这边设定 Preferred Width 为 100
<font color="#.首先分配 Minimum Size(20)
<font color="#.空间足够的情况下，将会分配剩下的 Preferred Size (20~100 空间)，如下所示
18.gif (903.42 KB, 下载次数: 5)
22:52 上传
■ 现在将第1个 Button 的 Layout Element 数值调整如图
19.png (9.17 KB, 下载次数: 5)
22:52 上传
这边设定 Flexible Width 为 1
<font color="#.首先分配 Minimum Size(20)
<font color="#.如果还有足够空间，将会分配剩下的 Preferred Size (20~100 空间)
<font color="#.如果还有额外空间，分配剩下 Flexible Size，如下所示
20.gif (904.2 KB, 下载次数: 2)
22:52 上传
■ 现在将 Horizontal Layout Group 的 Child Force Expand Width 勾选，让子物件强制填满
<font color="#.首先分配 Minimum Size(20)
<font color="#.如果还有足够空间，将会分配剩下的 Preferred Size (20~100 空间)
<font color="#.如果还有额外空间，分配剩下元素 Flexible Size 与 Child Force Expand Width
21.gif (1.55 MB, 下载次数: 5)
22:52 上传
结论：上面我们看到，所有元素会先被分配 Minimum Size，接下来还有足够空间，将会分配剩下的 Preferred Size，最后才是 Flexible Size 与 Child Force Expand Width
至此我们了解到 Horizontal Layout Group 是怎麽取得 Layout Element size 分配子物件
Vertical Layout Group
22.png (9.09 KB, 下载次数: 6)
22:52 上传
垂直方向(Height) 排列子物件，与 Horizontal Layout Group 只差在水平或是垂直，这边不在赘述
组件位置：Unity Menu Item → Component → Layout → Vertical Layout Group
Grid Layout Group
23.png (10.99 KB, 下载次数: 7)
22:52 上传
网格方式排列子物件
组件位置：Unity Menu Item → Component → Layout → Grid Layout Group
Padding：填充内部空间
Cell Size：每个元素的宽高
24.gif (791.75 KB, 下载次数: 2)
22:52 上传
Spacing：每个元素间格
Start Corner：开始排列的角落(位置)，又分为 “左上”、”右上”、”左下”、”右下”，请仔细看元素数字
25.gif (457.33 KB, 下载次数: 11)
22:52 上传
Start Axis：”水平” 或是 “垂直” 排列，请仔细看元素数字
26.gif (229.76 KB, 下载次数: 2)
22:52 上传
Child Alignment：当没有填满全部空间时，子物件对齐位置
Constraint：排列限制
Flexible：自动根据大小弹性排列
Fixed Column Count：限制排列 “行数(直)”
Fixed Row Count：限制排列 “列数(横)”
Layout Fitter
控制著 Layout Controllers 自身大小，大小取决于子物件，或是设定的大小比例，又分为 Content Size Fitter 与 Aspect Ratio Fitter
Content Size Fitter
27.png (5.6 KB, 下载次数: 7)
22:52 上传
控制著 Layout Controllers (父物件)自身大小，大小取决于子物件的 Minimum 或是 Preferred 大小，能透过 Pivot 改变缩放方向
组件位置：Unity Menu Item → Component → Layout → Content Size Fitter
Horizontal、Vertical Fit：水平、垂直 适应调整
None 不调整
Min Size 根据子物件的 Minimum 大小进行调整
Preferred Size 根据子物件的 Preferred 大小进行调整
透过实例理解：
如果我们现在有一个需求，必需要让 “父物件大小” 根据 “子物件大小” 进行缩放，完成如下 (方便明显看出父物件大小，增加黑色外框)
28.gif (28.85 KB, 下载次数: 5)
22:52 上传
A.开新 SceneUnity Menu Item → File → New Scene
B.新增一个 CanvasUnity Menu Item → GameObject → UI → Canvas
C.Canvas 下新增空物件，做为 Layout Controllers (以下简称父物件)
D.父物件增加 Horizontal Layout Group ComponentUnity Menu Item → Component → Layout → Horizontal Layout Group
这时如果增加 Button(子物件)，上面有提到，Horizontal Layout Group 会根据子物件的 Layout Element 进行分配子物件大小，而不会修改父物件本身的大小，如下所示 (方便明显看出父物件大小，增加黑色外框)
29.gif (18.85 KB, 下载次数: 2)
22:52 上传
E.父物件下增加 Button(子物件)，并增加 Layout Element Component 覆盖预设大小，Minimum Width 调整为 100组件位置：Unity Menu Item → Component → Layout → Layout Element
F.父物件增加 Content Size Fitter Component，Horizontal Fit 调整为 Min Size，透过子物件 Minimum Width 调整父物件本身大小 (Horizontal 方向其实就是取得子物件 Width)
30.png (13.66 KB, 下载次数: 2)
22:52 上传
G.此时如果 Button 複製增加，父物件本身的大小也会跟著改变，如下所示
31.gif (28.85 KB, 下载次数: 5)
22:52 上传
H.调整父物件的 pivot，可以控制缩放方向，如下所示
32.gif (19.2 KB, 下载次数: 2)
22:52 上传
I.通过上面实例，我们首先使用 Horizontal Layout Group 排列子物件，并在子物件增加 Layout Element 覆盖预设大小，最后透过 Content Size Fitter 取得子物件 Layout Element 设定父物件大小，至此父物件大小就会根据子物件大小进行缩放
Aspect Ratio Fitter
33.png (6.17 KB, 下载次数: 3)
22:52 上传
控制著 Layout Controllers 自身大小，按照物件宽高比调整大小，能透过 pivot 改变缩放方向
组件位置：Unity Menu Item → Component → Layout → Aspect Ratio Fitter
Aspect Mode：调整模式
None：不调整
Width Controls Height：
基于 Width 为基准，依据比例改变 Height
34.gif (107.15 KB, 下载次数: 3)
22:52 上传
当 Width 改变时，Height 会依比例改变
35.gif (132.61 KB, 下载次数: 2)
22:52 上传
Height Controls Width：
基于 Height 为基准，依据比例改变 Width
36.gif (113.72 KB, 下载次数: 5)
22:52 上传
当 Height 改变时，Width 会依比例改变
37.gif (90.11 KB, 下载次数: 3)
22:52 上传
Fit In Parent：依据比例将 宽高、位置、anchors自动调整，使此图形大小在父物件中完全贴齐，此模式可能不会包覆所有空间
调整比例 (方便明显看出父物件增加黑底)
38.gif (325.43 KB, 下载次数: 2)
22:52 上传
调整父物件大小，物体会依据比例贴齐父物件
39.gif (335.11 KB, 下载次数: 2)
22:52 上传
Envelope Parent：依据比例将 宽高、位置、anchors自动调整，使此图形大小完全包覆父物件，此模式可能会超出空间
调整比例 (方便明显看出父物件增加黑框)
40.gif (171.91 KB, 下载次数: 6)
22:52 上传
调整父物件大小，物体会依据比例包覆父物件
41.gif (364.58 KB, 下载次数: 6)
22:52 上传
Aspect Ratio：比例，此数值为 宽/高
Content Size Fitter 是透过子物件自动进行调整大小
Aspect Ratio Fitter 是透过数值(宽高比)进行调整
后记Auto Layout System 可以快速、方便的排列多个 UI，当大小改变时会自动调整内容，也能应用在多层崁套下，在日后调整与修改上也是非常方便与直觉，是 UI 系统中必学的功能之一 !!
参考资料■ Unity – Manual- Auto Layout
/Manual/UIAutoLayout.html
■ Unity – Manual- Auto Layout_UI Reference
http://docs..com/Manual/comp-UIAutoLayout.html原文作者： k79k06k02k原文链接：/blog/542/unity/unity-ugui-%E5%8E%9F%E7%90%86%E7%AF%87%E4%BA%94%EF%BC%9Aauto-layout-%E8%87%AA%E5%8B%95%E4%BD%88%E5%B1%80
扫描下方二维码关注官方微信~每日都有精选干货与你分享哟~
本文由蛮牛驿馆倾情奉献，翻译：Unity墙外的世界（公众号），如有请及时联系，除 合作社区 及 合作媒体 外，禁止转载。
每日推荐：
3152/300排名<font color="#FF昨日变化10主题帖子积分
偶尔光临, 积分 152, 距离下一级还需 148 积分
偶尔光临, 积分 152, 距离下一级还需 148 积分
在线时间82 小时
真是不错呀
每日推荐：
72504/5000排名<font color="#FF昨日变化1主题帖子积分
日久生情, 积分 2504, 距离下一级还需 2496 积分
日久生情, 积分 2504, 距离下一级还需 2496 积分
蛮牛币3732
在线时间1027 小时
支持,看完5篇,有收获~~
每日推荐：
61130/1500排名<font color="#FF昨日变化主题帖子积分
蛮牛粉丝, 积分 1130, 距离下一级还需 370 积分
蛮牛粉丝, 积分 1130, 距离下一级还需 370 积分
蛮牛币2706
在线时间350 小时
感觉看不完了，先mark一下
每日推荐：
7排名<font color="#FF昨日变化1主题帖子积分
在线时间125 小时
感觉看不完了，先mark一下
加油啊，兄弟。。
每日推荐：
61130/1500排名<font color="#FF昨日变化主题帖子积分
蛮牛粉丝, 积分 1130, 距离下一级还需 370 积分
蛮牛粉丝, 积分 1130, 距离下一级还需 370 积分
蛮牛币2706
在线时间350 小时
每日推荐：
5931/1000排名<font color="#FF昨日变化1主题帖子积分
熟悉之中, 积分 931, 距离下一级还需 69 积分
熟悉之中, 积分 931, 距离下一级还需 69 积分
蛮牛币1061
在线时间231 小时
好好的支持
每日推荐：
148/50排名<font color="#FF昨日变化7主题帖子积分
注册看看, 积分 48, 距离下一级还需 2 积分
注册看看, 积分 48, 距离下一级还需 2 积分
在线时间17 小时
不错的帖子，谢谢楼主分享！！！
每日推荐：
148/50排名<font color="#FF昨日变化21主题帖子积分
注册看看, 积分 48, 距离下一级还需 2 积分
注册看看, 积分 48, 距离下一级还需 2 积分
在线时间25 小时
好吊，多谢！学习了！
每日推荐：
61004/1500排名<font color="#FF昨日变化2主题帖子积分
蛮牛粉丝, 积分 1004, 距离下一级还需 496 积分
蛮牛粉丝, 积分 1004, 距离下一级还需 496 积分
蛮牛币1229
在线时间277 小时
每日推荐：
3238/300排名<font color="#FF昨日变化6主题帖子积分
偶尔光临, 积分 238, 距离下一级还需 62 积分
偶尔光临, 积分 238, 距离下一级还需 62 积分
在线时间68 小时
我从头到尾都看了,有些知识真是总结得不错啊
每日推荐：
7排名<font color="#FF昨日变化1主题帖子积分
在线时间125 小时
我从头到尾都看了,有些知识真是总结得不错啊
谢谢你哟。 克森还有其它文章哟
每日推荐：unity3d 在UGUI中制作自适应调整大小的滚动布局控件
我的图书馆
unity3d 在UGUI中制作自适应调整大小的滚动布局控件
在游戏中，我们很多地方需要用到scroll content的概念：我们需要一个容器，能够指定布局方式（比如横排排列、竖排排列、网格排列）等。然后我们向其中填充内容，这个容器应该自己能够处理所有的元素布局，包括相关的滚动条等等概念。
一个经典的例子就是制作一个物品栏：
在UGUI中，我们要如何来制作呢？
UGUI原生态提供Scroll Rect Component、Mask、Content Size Filter、ScrollBar控件，我们需要将他们组合使用：
如上图，我们先制作一个能够自动适应大小的文本滚动框。
设置Panel的属性如下，加上ScrollRect、Mask组件，将content设置为我们的文本框
给文本框设置组件如下：（添加Content Size Filter组件）
注意，这样设置后文本多的情况下滚动条会直接初始在中间，我们需要顶部对齐，设置Text的RectTransform属性如下：
调整对齐和Anchors Pivot（X=0，Y=1）
同理，我们需要做Grid的话，只需要将scroll rect的content指向一个带GridLayout的GameObject，并且将这个GameObject设置Content Size Filter和锚点即可。
TA的最新馆藏
喜欢该文的人也喜欢【uGUI】基本布局_Unity3d 开发技术
本节我们来学习如何相对 Canvas 和其他元素来布局我们的 UI。我们可以先创建一个 Image 用来测试，在 GameObject 菜单中选择 UI -& Image 来创建。
??每个 UI 元素都会用一个矩形表示，这样方便布局。在工具栏中选择 Rect 工具之后，我们就能在 Scene 视图中操作这个矩形。Rect 工具既能用于 Unity 中的 2D 物体和 UI ，对 3D 物体也同样能够使用。
选择工具栏中的 Rect 工具
??Rect 工具能够移动、缩放、旋转 UI 元素。一旦选择了一个 UI 元素，我们就可以点击矩形内任意位置进行拖拽，来移动 UI 元素。我们也可以点击并拖动矩形的边界或者四个角，来调整元素的大小。把鼠标停留在稍微远离矩形的四个角的位置，鼠标光标会变成一个旋转的图标，然后我们可以单击并拖拽，进行任意方向上的旋转。
??和其他工具一样，Rect 工具需要使用当前元素的中心点和局部坐标，我们需要在工具栏中进行设置。当我们需要对 UI 进行操作时，最好先设置成 Pivot 和 Local。
在工具栏中设置 Pivot 和 Local
RectTransform
??RectTransform 是一个新的 Transform 组件，它用于所有的 UI 元素，和常规的 Transform 组件不一样。
RectTransform 组件
??RectTransform 拥有常规 Transform 中的 Position、Rotation 和 Scale 属性，也拥有一个 Width 和 Height 属性，用于确定矩形的大小。
1、调整尺寸或比例
??当我们使用 Rect 工具改变对象大小时，对于 2D 精灵和 3D 对象来说，会改变对象的 LocalScale，但是当它用于一个 RectTransform 对象时，会直接改变宽度和高度，保持 LocalScale 不变。这样就不会影响字体大小、Sliced 图片的边界等。
2、Pivot - 枢轴点
??Pivot 的位置会影响旋转、大小调整和缩放的效果。当我们在工具栏中设置为了 Pivot 模式时，就可以在 Scene 视图中移动 RectTransform 的 Pivot。
绕 Pivot 旋转
3、Anchors - 锚点
??RectTransform 引入了锚点这个布局概念。锚点在 Scene 视图中显示为四个小三角形手柄，并且锚点的信息会在 Inspector 视图中显示。
??如果 RectTransform 的父对象也是一个 RectTransform，子对象可以以各种方式锚定到父对象。例如，将子对象锚定到父对象的中心，或者某个角。
UI 元素的锚点设置在父对象的中心之后，该元素距离中心保持固定的偏移量
UI 元素锚定到父对象的右下角，该元素距离父对象的右下角保持固定的偏移量
??锚定了之后，子对象也可以随着父对象宽高的变化一起伸缩。矩形的每个角到对应的锚点都有固定偏移量，也就是说，矩形的左上角到左上方锚点的偏移量是固定的。这样，矩形的不同角就能够锚定在父矩形中的不同点。
UI 元素左边的角锚定在父对象的左下角，右边的角锚定在父对象的右下角，该元素的每个角到各自的锚点都是固定的距离
??锚点在父矩形宽高方向上的位置定义出了一个百分比，0% 对应左侧或底部，50% 对应中间，100% 对应右侧或顶部。但锚点并不只限定于两边或中间，它们可以锚定在父矩形内任意一点。
UI 元素将左侧顶点锚定到距离父对象左边某个百分点，右侧顶点锚定到距离父对象右边某个百分点
??我们可以分别拖动每一个锚点，或者，如果它们在一起的话，我们可以点击并拖拽它们的中间整体移动他们。如果我们拖拽锚点的同时按下 Shift 键，UI 元素矩形上相应的角会一起移动。
??锚点另外一个方便的功能就是，他能够和 UI 元素同级的矩形锚点自动对齐，方便精确定位。
4、Anchor Presets - 预设锚点
??在 Inspector 视图中，我们可以点击 RectTransform 组件左上角的预设锚点按钮打开预设锚点。里面包含了一些最常用的锚点选项，我们可以选择一个快速设置锚点。我们可以将锚点设置到父对象的边上或者中心，或者随着父对象的大小变化进行伸缩。可以分别设定水平方向和垂直方向的锚点。
??预设锚点面板会显示当前所选的锚点预设值，如果当前的锚点设置在面板中存在的话。如果锚点在水平轴和垂直轴上的位置同预设位置都不一样，会显示为自定义锚点。
5、Inspector 视图中的锚点和位置属性
??在 Inspector 视图中我们能够找到锚点的属性设置，如果没有的话，点击 Anchor 前的扩展箭头展开属性。Min 属性对应的是场景视图中锚点的左下方，Max 属性对应的是右上方。
??Position 属性的显示会根据锚点位置的不同而发生变化，如果锚点都在一块会产生固定的宽度或高度，如果锚点分开会使矩形随父矩形一起伸缩。
RectTransform 组件
??当所有的锚点在一起时，会显示 PosX、PosY、Width 和 Height 属性。PosX 和 PosY 的值是 Pivot 相对于锚点的位置。
??当锚点分开时，属性会有一部分变为 Left、Right、Top 和 Bottom，这些属性根据锚点定义出矩形的大小和位置。锚点被水平分离时会出现 Left 和 Right 属性，垂直分离时会出现 Top 和 Bottom 属性。
??需要注意的是，改变 Anchor 或 Pivot 属性的值通常将反向调整 Position 的属性值，这样能够使矩形停留在原本的位置上来改变锚点或 Pivot。如果我们希望在改变属性值的时候矩形也会同步发生变化，那么我们可以选择 Raw 模式（选中右边的 R 按钮），在 Raw 模式下会使锚点和 Pivot 的值在改变时不会改变其他属性的值，而是会使矩形本身的位置和大小发生变化。君，已阅读到文档的结尾了呢~~
unity46_Ugui中文教程之UGUI_Auto_Layout_详解详解,帮助,Auto,Unity,中文教程,auto,unity
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
unity46_Ugui中文教程之UGUI_Auto_Layout_详解
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='/DocinViewer--144.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口UGUI 技术点笔记 (干货走起)
如果不太熟悉UGUI的同学，请补充一下UGUI教程，这里就不一一说明了.NGUI &与 UGUI 区分:// -------------------------------------------------打包图集: (为了优化图集，我们可以选择把带透明通道图片 和 不带透明通道的图片分开打图集，这样可以减少内存的占用量)NGUI:在打包图集的时候图集的默认格式是RGBA32，也就是支持带透明通道的图片，这样一张1024的图集也就是4M内存。(然而着一切的一切在NGUI上都需要手动操作)UGUI:SpritePacker则全自动完成。Sprite上的Packing Tag 同一标识的图片UGUI会把相同图片格式的图片打包成同一图集。// -----------------------------------------------------打包模式:DefaultPackerPolicy：是默认的打包方式，也是矩形打包方式。他会把所有的小图按照矩形的方式来排列，如果宽高不一样的图片，它们会自动补起。(unity所推荐)TightPackerPolicy：是紧密打包方式，也就是尽可能的把图片都打包在图集上，这种方式要比DefaultPackerPolicy打包的图片更多一些，也就是更省空间。Packing Tag: [TIGHT]Atals //&TightPackerPolicyPacking Tag: [RECT]Atals & //&DefaultPackerPolicy// -----------------------------------------------------UI和3D场景同时都需要响应触摸事件:方案1:射线过滤方法;方案2: UGUI 提供方法(缺点在android无效,unity bug 之后可能会解决)if&(Input.GetMouseButtonDown(0)&){Debug.Log(EventSystem.current.gameObject.name);if&(EventSystem.current.IsPointerOverGameObject())Debug.Log(&当前触摸在UI上&);else&Debug.Log(&当前没有触摸在UI上&);}方案3: 修改测试通过: ( 解决方案2问题 )#if&!(UNITY_IPHONE&||&UNITY_ANDROID&||&UNITY_WP8&||&UNITY_BLACKBERRY&)&&&&&&&&&&&&if&(Input.touchCount&&&0&&&&Input.GetTouch&(0).phase&==&TouchPhase.Began)&{&&&&&&&&&&&&&&&&if&(!EventSystem.current.IsPointerOverGameObject&(Input.GetTouch&(0).fingerId))&{&&&&&&&&&&&&&&&&&&&&//Handle&Touch&&&&&&&&&&&&&&&&&&&&debugText&=&&Debug&INFO:&UI&YES&;&&&&&&&&&&&&&&&&&&&&Debug.Log(&UI&YES&);&&&&&&&&&&&&&&&&}&&&&&&&&&&&&&&&&else&&&&&&&&&&&&&&&&&{&&&&&&&&&&&&&&&&&&&&debugText&=&&Debug&INFO:&UI&NO&;&&&&&&&&&&&&&&&&&&&&Debug.Log(&UI&NO&);&&&&&&&&&&&&&&&&}&&&&&&&&&&&&}#else&&&&&&&&&&&&if&(EventSystem.current.IsPointerOverGameObject())&&&&&&&&&&&&{&&&&&&&&&&&&&&&&debugText&=&&Debug&INFO:&UI&YES&;&&&&&&&&&&&&&&&&Debug.Log(&UI&NO&);&&&&&&&&&&&&}&&&&&&&&&&&&else&&&&&&&&&&&&{&&&&&&&&&&&&&&&&debugText&=&&Debug&INFO:&UI&NO&;&&&&&&&&&&&&&&&&Debug.Log(&UI&YES&);&&&&&&&&&&&&}#endif/ -----------------------------------------------------NGUI与UGUI的动画部分:NGUI:UITUGUI:可以使用dotween或者LeanT/ -----------------------------------------------------自动布局:NGUI: 缺失,需要自己实现;UGUI: 官方支持,unity的LayoutGroup分为三种， Horizontal Layout Group（水平布局）Vertical Layout Group（垂直布局）Grid Layout Group （网格布局）;布局脚本: Layout Element (Script)脚本;// -----------------------------------------------------UGUI放大图片部分:rectTransform.sizeDelta&=&new&Vector2(Screen.width,Screen.height);void&Start(){int&width&=&Screen.width;int&height&=&Screen.height;int&designWidth&=&960;//开发时分辨率宽int&designHeight&=&640;//开发时分辨率高float&s1&=&(float)designWidth&/&(float)designHeight;float&s2&=&(float)width&/&(float)height;if(s1&&&s2)&{designWidth&=&(int)Mathf.FloorToInt(designHeight *&s2);}&else&if(s1&&&s2)&{designHeight&=&(int)Mathf.FloorToInt(designWidth&/&s2);}float&contentScale&=&(float)designWidth/(float)width;RectTransform&rectTransform&=&this.transform&as&RectTransform;if(rectTransform&!=&null){rectTransform.sizeDelta&=&new&Vector2(designWidth,designHeight);}}// -----------------------------------------------------获取UI在Canvas下的2D坐标:3d坐标:&transform.postion2d坐标:&rectTransform.anchoredPositionpublic&Canvas&canvas;&void&Start(){Vector2&pos;if(RectTransformUtility.ScreenPointToLocalPointInRectangle(canvas.transform&as&RectTransform,&transform.position,&canvas.camera,&out&pos)){Debug.Log(pos);}&}代码就是用UI元素的世界坐标和canvas的RectTrasform再加上UI摄像机，换算出元素在Canvas的2D坐标。最后在想需要赋值的UI 用&rectTransform.anchoredPosition ＝ pos 就可以了// -----------------------------------------------------两张图片局部遮挡的事件相应问题:(如果一个按钮有一半的区域被Image挡住，那么被挡住的按钮区域的点击事件就会被拦截掉。解决这个问题有两个方法。)加個UGUI內建的CanvasGroup組件, 把Interactable和Blocks Raycasts選項取消。(不会增加多余dc)// -----------------------------------------------------Sprite Packer压缩规则 图集分配错误:(u3d bug).bug: 一张1024的rgba32图片被莫名其妙分切成2张图;图集打包部分分类:大致3类1.带透明通道2.不带透明通道3.手动设置的格式// -----------------------------------------------------UGUI 字体组件加阴影特效:.解决方案在Text组件下增加component中的UI/EFFECTS/Shadow (Script);// -----------------------------------------------------UGUI 字体组件加富文本:&color=#00ffffff&&// 颜色&size=50&largely&/size& //字体&&i&usually&/i& // 斜体&&b¬&/b& //粗体sample:&size=30&Some&color=yellow&RICH&/color& text&/size&// -----------------------------------------------------UGUI&设置半透明遮罩与3d模型显示在ui前方做法：游戏中设置3个相机分别是.mainCamera: 主透视相机 &&&&&&&&&&&&&&&&&&&&&遮罩: 取消ui与要显示的层 &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&depth:-1;.ForwardUICamera: 跟随视相机透视&& &&&&&遮罩: 只渲染要显示在最前方的层（ForwardUICamera）& &&& && depth:10.UICamera: 跟随UGUI正交相机&&&&&&&&&&&&& & 遮罩: 只渲染UI层&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&depth:0游戏中层级普通游戏层:.Default:0.TransparentFx:1.Ignore Raycast:2....:3.Water:4.UI:5....:6....:7LayerGround:8LayerFloor:9LayerMapObject:10最前方层:.定义一个显示比ui高的层:FORWORD_UI ：20;逻辑处理当需要显示在base前方的模型或者特效方法:.激活ForwardUIC.调整现实对象的layer进入ForwardUICamera渲染区域;.使用后，设置原先的游戏对象还原到之前的layer层级;// -----------------------------------------------------UGUI 事件处理:public&class&HLEventTriggerListener&:&EventTrigger{&&&&public&delegate&void&VoidDelegate&(GameObject&sender);&&&&public&VoidDelegate&onClick;&&&&public&VoidDelegate&onDown;&&&&public&VoidDelegate&onEnter;&&&&public&VoidDelegate&onExit;&&&&public&VoidDelegate&onUp;&&&&public&VoidDelegate&onSelect;&&&&public&VoidDelegate&onUpdateSelect;&&&&&&&&static&public&HLEventTriggerListener&AddEeventListener&(GameObject&sender)&&&&{&&&&&&&&HLEventTriggerListener&listener&=&sender.GetComponent&HLEventTriggerListener&();&&&&&&&&if&(listener&==&null)&&&&&&&&&&&&listener&=&sender.AddComponent&HLEventTriggerListener&();&&&&&&&&return&listener;&&&&}&&&&public&override&void&OnPointerClick(PointerEventData&eventData)&&&&{&&&&&&&&if(onClick&!=&null)&&&&&&&&&&&&onClick(gameObject);&&&&}&&&&public&override&void&OnPointerDown&(PointerEventData&eventData){&&&&&&&&if(onDown&!=&null)&&&&&&&&&&&&onDown(gameObject);&&&&}&&&&public&override&void&OnPointerEnter&(PointerEventData&eventData){&&&&&&&&if(onEnter&!=&null)&&&&&&&&&&&&onEnter(gameObject);&&&&}&&&&public&override&void&OnPointerExit&(PointerEventData&eventData){&&&&&&&&if(onExit&!=&null)&&&&&&&&&&&&onExit(gameObject);&&&&}&&&&public&override&void&OnPointerUp&(PointerEventData&eventData){&&&&&&&&if(onUp&!=&null)&&&&&&&&&&&&onUp(gameObject);&&&&}&&&&public&override&void&OnSelect&(BaseEventData&eventData){&&&&&&&&if(onSelect&!=&null)&&&&&&&&&&&&onSelect(gameObject);&&&&}&&&&public&override&void&OnUpdateSelected&(BaseEventData&eventData){&&&&&&&&if(onUpdateSelect&!=&null)&&&&&&&&&&&&onUpdateSelect(gameObject);&&&&}}Sample:void Start(){ HLEventTriggerListener.AddEeventListener(this.gameObject).onClick&=&OnButtonClick; public&void&OnButtonClick(GameObject&sender) {
Debug.Log(sender.name); }}// -----------------------------------------------------UGUI 自适应问题:(这里我使用的方案与NGUI的双相机类同)设置一下参数即可;// -----------------------------------------------------使用SpritePack方法与代码调用:.Resources下不可以打包SpritePack 包,放到其他目录下即可;.选项卡Edit-&ProjectSetting-&Editor-& Sprite Packer (Mode:Always Enabled).将临时的图片sprite打包成perfab放到Resources下使用这里制作了一个小工具:& [MenuItem&(&Assets/AtlasMaker&)]&&&public&static&&void&MakeAtlas()&&&&{&&&&&&&&string&spriteDir&=&Application.dataPath&+&/Resources/UI/sprite2d&;//&/BaseRes/UI/menu_action&;//创建一个接受perfab的路径&&&&&&&&&&&&&&&&if(!Directory.Exists(spriteDir)){&&&&&&&&&&&&Directory.CreateDirectory(spriteDir);&&&&&&&&}&&&&&&&&&&&&&&&&DirectoryInfo&rootDirInfo&=&new&DirectoryInfo&(Application.dataPath&+&/BaseRes/UI&);// 使用道的临时图片路径&&&&&&&&Debug.Log(Application.dataPath);&&&&&&&&foreach&(DirectoryInfo&dirInfo&in&rootDirInfo.GetDirectories())&{&&&&&&&&&&&&foreach&(FileInfo&pngFile&in&dirInfo.GetFiles(&*.png&,SearchOption.AllDirectories))&{&&&&&&&&&&&&&&&&Debug.Log(pngFile.FullName);&&&&&&&&&&&&&&&&string&allPath&=&pngFile.FullName;&&&&&&&&&&&&&&&&string&assetPath&=&allPath.Substring(allPath.IndexOf(&Assets&));&&&&&&&&&&&&&&&&Sprite&sprite&=&AssetDatabase.LoadAssetAtPath&Sprite&(assetPath);&&&&&&&&&&&&&&&&GameObject&go&=&new&GameObject(sprite.name);&&&&&&&&&&&&&&&&go.AddComponent&SpriteRenderer&().sprite&=&sprite;&&&&&&&&&&&&&&&&allPath&=&spriteDir+&/&+sprite.name+&.prefab&;&&&&&&&&&&&&&&&&string&prefabPath&=&allPath.Substring(allPath.IndexOf(&Assets&));&&&&&&&&&&&&&&&&PrefabUtility.CreatePrefab(prefabPath,go);&&&&&&&&&&&&&&&&GameObject.DestroyImmediate(go);&&&&&&&&&&&&}&&&&&&&&}&&&&&&&}运行后使用之前的图片资源调用脚本代码来创建Sprite:测试getSprite(&UI/sprite2d/Icon_Five&);///public&Sprite&getSprite(string&spritePrefabPath)&&&&&&&&{&&&&&&&&&&&&return&Resources.Load&GameObject&(spritePrefabPath).GetComponent&SpriteRenderer&().sprite;&&&&&&&&}// -----------------------------------------------------设置ugui的层级问题,来修改渲染先后顺序:GetSiblingIndex();// 同级计算SetSiblingIndex();&//同级设置;// -----------------------------------------------------随后继续补充,ugui征服ngui指日可待了;
看过本文的人也看了：
我要留言技术领域：
取消收藏确定要取消收藏吗？
删除图谱提示你保存在该图谱下的知识内容也会被删除，建议你先将内容移到其他图谱中。你确定要删除知识图谱及其内容吗？
删除节点提示无法删除该知识节点，因该节点下仍保存有相关知识内容！
删除节点提示你确定要删除该知识节点吗？
