【Unity3D_UGUI速成班】——05.Rect Transform

这一节将主要讲述所有UGUI物体的排布属性RectTransform,熟练运用这个组件,能够让你的UGUI Demo永远排布美观。

5. Rect Transform

对于任意创建好的UGUI物体,它的位姿属性全由RectTransform决定,这和一般的GameObject物体由Transform决定有所区别,本节以Image为例:

每次创建UGUI控件,画布上都还有四片三角形组成的图案,其实那是4个Anchor(锚点),每个三角形都可单独拖动,默认会出现在该UGUI物体的父物体的正中央。

①  Anchor Presets-这是左图被红框圈起的部分,只有点开来才能看明全貌。通过它可以直接强行定位Anchor的排布。

A) 将4片Anchor分为左右两组,则横向上可以将之都分布在极左、正中、极右,或者左右各安置一组;将锚点分为上下两组,则纵向上可以将之都分布在最上、正中、最下,或者上下边各一组。——这里的极左、极右等等指的都是父物体的边界。

4*4=16,所以锚点有16种极端排布的样式,正如上图所示。

B)选中不同排布时,黄色框内的东西会不一样:

当选中左上方的9中排布方式时,4片Anchor是聚拢在一起的,此时可以调整Image中心相对于Anchor的坐标(PosX,PosY,PosZ)和其尺寸(Width,Height)。

当选中最右一列的排布方式时,4片Anchor将会左右分离,因此Anchor不再具有确切的X坐标,Image的宽度将由其左右边界到两边Anchor的横向距离(Left,Right)决定。

当选中最下一行的排布方式时,4片Anchor将会上下分离,因此Anchor不再具有确切的Y坐标,Image的高度由其上下边界到两端Anchor的纵向距离(Top,Bottom)决定。

  

② Anchors-这是当前UGUI物体的Anchor所框选的区域,相对于父物体边界的比例值。

下图中的Min X=0,Y=0;Max X=0,Y=1是对应上方右边图片的值。代表Anchor分为上下两组,形成一条和父物体左边界重合的竖线。

倘若要制作一个纵向手机APP的Title,可以尝试将

Min X=0,Y=0.9;Max X=1,Y=1,然后由于四片Anchor完全分开,所以可以将Image的Transform值手动地设置为(Left,Right,Top,Bottom)=(0,0,0,0)。结果将如下图所示:

③  Pivot-中心点,代表的是该UGUI物体的中心位于何处,当四片Anchor聚合在父物体正中央时,在Game视窗中的Image,其高度宽度都是250。

左边图是Pivot X=Y=0.5的情况;右边是Pivot X=0.5,Y=1的情况,Pos Y已经被莫名其妙改成了125,也就是高度的一半。

Pivot默认在UGUI空间的正中央,Y=1会强制将中心店上移至顶端,所以出现了这类情况。

    

④  Rotation和Scale,与常规的GameObject并无出入。

但是这里建议大家不要乱动Scale,因为UGUI物体的尺寸完全可以由Width、Height之类的东西来改变。Scale和Width、Height是完全独立的两套体系,改动Scale将会使UGUI物体在程序内部和显示上出现矛盾。例如将Scale的X设为2,肉眼可见图片宽度成为原先的2倍,但是上方的Width却没有改变,这对于日后UGUI物体的位置改写是很不利的。

时间: 2024-10-17 12:48:17

【Unity3D_UGUI速成班】——05.Rect Transform的相关文章

【Unity3D_UGUI速成班】——06.Slider

界面上的交互除了按钮和文字图片之外,还应该有进度条或者血条.Slider正是这样一个UI控件. -------------------------- 6.Slider 在Hierarchy栏目下右键后点击UI.再点击Slider.那么在Hierarchy栏目下会多出携带了Slider的Canvas控件和EventSystem控件.Slider下还有Background.Fill Area.Handle SlideArea三个子模块. 一.Background 代表了进度条的底色,其实质是处于Sl

MT4编程培训速成班(视频教程)QQ973201383

速成班课程介绍http://www.ea668.com/thread-3026-1-1.html报名学习:QQ973201383   手机:13774372025  杨老师 MT4编程培训课程(速成班)-第01课    http://www.tudou.com/programs/view/0tL2ngD2JzI/ MT4编程培训课程(速成班)-第02课    http://www.tudou.com/programs/view/1TCVchWHx7c MT4编程培训课程(速成班)-第03课 K线

【UGUI速成班】—— 04. Canvas

这一节将主要讲述所有UGUI物体的最顶级父物体--Canvas前几讲为大家介绍了Text.Image和Button,主要陈述的是UGUI的功能性,但说到底凡是UI都需要考虑其界面排布和呈现等因素.因此在此章节的Canvas和下一章节的Rect Transform快速为大家补上! ----------------------- 4.Canvas Canvas 意思为画布,在Hierarchy栏目下右键==>UI,选择Canvas或者任何UGUI控件,我们仍以Image为例,那么在Hierarchy

关于Canvas Rect Transform 设置问题?

Render Mode: Screen Space - Overlay:将UI放置在场景的上面,调节场景大小或调整分辨率,则Canvas也会随之调整. Screen Space - Camera:Canvas由一个特定的相机渲染,相机的设置会影响UI. World Space:使Canvas像场景中的其他对象一样渲染. 默认情况为Screen Space - Overlay 模式, 即不能更改 Rect Transform  更换成  World Space 即可设置Rect Transform

Unity5UGUI 官方教程学习笔记(二)Rect Transform

Rect Transform Posx    Posy   Posz  :  ui相对于父级的位置 Anchors :锚点  定义了与父体之间的位置关系    一个锚点由四个锚组成  四个锚分别代表了UI元素的四个角 Width Height :款高   任意一个为负时将不会显示UI元素 设置锚点时 按住alt可以使元素对应位置到锚点 Pivot : 确定元素的枢轴点 为0~1之间的数   正常左下角为0,0   右上角为1,1 Rotation : UI的旋转属性  大多情况下 旋转轴为Z 

unity4.6学习Ugui中文文档-------参考-UGUI Rect Transform .

这一节走进更多的深度,有关unity的用户界面功能. 1.Rect Transform Rect Transform是2D与 3D 图形的Transform组件对应.它用来指定用户界面系统中的大小.位置和旋转的控件 Properties Property: Function: Pos (X, Y and Z) 相对锚点anchors的矩形枢轴pivot点的位置. Width/Height 矩形的宽高 Left, Top, Right, Bottom 矩形的边缘相对于其锚点的位置.这可以被认为是内

【UGUI】Canvas和Rect Transform

Canvas 1.所有的UI元件都需要放在Canvas里 2.UI元件的绘制顺序,与在 Hierarchy的顺序相同,在上面的元素会先被绘制,位于后续绘制元素的下面 3.可以选择3种不同的渲染模式: Screen Space - Overlay 类似于深度摄像机,会将UI渲染到游戏场景的最前面 Screen Space - Camera 类似于深度摄像机,但是可以选择一个Camera来渲染UI,因此可以调整Camera的相关属性 World Space 把UI看做3D空间中的一个Object来渲

Unity3D之UGUI学习笔记(二):Rect Transform与Anchor

Rect Transform 我们都知道,Unity3D中所有的GameObject都必须要携带一个Transform组件,且该组件无法移除,那么作为UI显示的GameObject则不是携带Transform而是使用Unity3D专门为UI组件设计的Rect Transform组件,如下: 另外说一下,Canvas Renderer也是UI组件必须携带的组件. 我们来看一下其为我们提供的功能: 位置 位置是以像素为单位,其具体的值则以锚点为准,表示和锚点距离,其中x轴从左到右的数值越来越大,y轴

Unity3D之UGUI:Rect Transform与Anchor

Rect Transform 我们都知道,Unity3D中所有的GameObject都必须要携带一个Transform组件,且该组件无法移除,那么作为UI显示的GameObject则不是携带Transform而是使用Unity3D专门为UI组件设计的Rect Transform组件,如下: 另外说一下,Canvas Renderer也是UI组件必须携带的组件. 我们来看一下其为我们提供的功能: 位置 位置是以像素为单位,其具体的值则以锚点为准,表示和锚点距离,其中x轴从左到右的数值越来越大,y轴