原创至上,移步请戳:(三)unity4.6Ugui中文教程文档-------概要-UGUI Basic Layout

2、 BasicLayout

在这一节我们会看到UI元素相对于画布的位置是怎样的。如果你想要自己在阅读时测试,您可以创建Image,使用游戏菜单中的GameObject > UI > Image.。

2.1 The Rect Tool

每个 UI元素被表示为一个矩形布局。在场景视图中使用工具栏中的Rect Tool,可以操纵此矩形。Rect Tool用于unity2D的UI功能特性,事实上可以用于甚至 3D 对象。

Toolbar buttons with Rect Tool selected

Rect Tool可以用于左右移动 UI元素、调整其大小,和旋转,尽在其中。一旦你选择(有时候我们要在对象列表中选中)了一个 UI元素,您可以通过在该矩形内的任意位置单击并拖动来移动它。你可以通过在边缘或对角上单击并拖动来调整其大小。该元素可以通过悬停光标稍微离开角落,直到鼠标光标指示旋转符号旋转。然后,您可以单击并拖动任一方向旋转。        这是选中状态:

就像其他工具,Rect Tool使用当前的pivot模式和空间,在工具栏中设置Pivot和 Local. UI一起工作通常是一个很好的主意。

Toolbar buttons set to Pivot and Local

2.2 Rect Transform

Rect Transform是一个新的transform组件,用于所有的 UI 元素,而不是常规的变换组件。

Rect Transforms有位置position、旋转rotation和缩放scale,就像常规变换,但是它也有一个宽度和高度,用来指定的矩形的尺寸。 那么高宽和缩放scale的关系是:通常UI元素都是有图片的,那么图片的原像素尺寸我们就设置为这个高宽,缩放就是在这个基础上进行呗。

2.2.1 Resizing Versus Scaling

当Rect Tool用来更改对象的大小时,通常在2D系统中的精灵和3D对象,它会改变对象的local scale。然而,当它在一个对象上用上Rect Transform,它反而会改变宽度width和高度height,,local scale保持不变。此大小调整不会影响字体大小,切片图像的边界等等。

2.2.2 Pivot

旋转Rotations、大小size和规模scale的修改都是围绕着这个轴pivot,所以这个轴的位置,就会影响旋转、调整大小或缩放的效果了。当工具栏Pivot按钮设置到Pivot mode时,在场景视图中就可以移动一个Rect Transform的枢纽Pivot了,来设置Pivot的位置。  如图篮圈:

        

2.2.3 Anchors

Rect Transforms包括一个称为anchors锚点的布局概念。锚点如下所示在场景视图中的四个小三角形手柄和锚点的信息也显示在Inspector检查器。

如果父对象的Rect Transform也是一个Rect Transform,那么子对象可以以各种方式把自己的Rect Transform锚定到父对象的 Rect Transform上。例如,子对象可以锚定到父对象的中心,或到一个角落。锚定还允许子对象拉伸到相对于父宽度或高度的一定比例。

UI元素定位到父级的中心。该元素到中心保持一个固定的偏移。(看四个小三角)

UI元素锚定到父级的右下角。该元素保持到右下角的一个固定偏移。(看四个小三角)

每个矩形的角是锚定到父矩形上的,使用这些锚点之一。你可以拖动锚点的单独一个,或者如果他们在一起时你可以将它们一起拖动,在它们之间的中间单击并拖动。如果你拖动锚点的同时按住 Shift键,矩形相应的角将和锚点一起移动。

在Inspector检查器中,可以在矩形变换组件的左上角中发现的锚点预设按钮。单击按钮会弹出的锚点预设下拉列表。从这里您可以快速选择从一些最常用的锚固选项。你可以把UI元素锚定到父级的两侧或中间的,或者和父级对象一起拉伸。水平和垂直的锚固是独立的。

锚点预设按钮显示当前所选(如果有的话)的预设的选项。如果锚点在任一水平或垂直轴设置都与任何预设的位置不同,则显示自定义选项。

您可以单击小扩展箭头下方的锚点预设按钮以显示锚点和pivot字段数。Min和Max对应于四个小三角形,。选项Lock Rect可以发现右边的扩展的信息,如果没有锁定,它有相同的功能在场景视图中移动锚点时按住 Shift键。

每个锚柄有一个固定的偏移量到的对象的相对角即顶部抛左的锚柄具有固定的偏移到 UI对象的左上角。枢轴定义对象相对船锚的位置、依赖于锚点的位置Rect transform component将显示不同的字段。当所有的锚柄点在一起显示的字段是 Pos X、 Pos Y、宽度和高度;然而当锚分离然后字段可以更改部分或完全为顶部、底部、左边和右边。这种变化取决于锚点的定位和定义的每个角落填充到其各自锚句柄。锚句柄的一个有用的功能是他们会自动捕捉到其他游戏对象锚,允许精确地定位。

【转】(三)unity4.6Ugui中文教程文档-------概要-UGUI Basic Layout的更多相关文章

  1. [转](三)unity4.6Ugui中文教程文档-------概要-UGUI Basic Layout

    大家好,我是孙广东.   转载请注明出处:http://write.blog.csdn.net/postedit/38922399 更全的内容请看我的游戏蛮牛地址:http://www.unityma ...

  2. (三)unity4.6Ugui中文教程文档-------概要-UGUI Basic Layout

     大家好,我是孙广东.   转载请注明出处:http://write.blog.csdn.net/postedit/38922399 更全的内容请看我的游戏蛮牛地址:http://www.unit ...

  3. 【转】(七)unity4.6Ugui中文教程文档-------概要-UGUI Auto Layout

    原创至上,移步请戳:(七)unity4.6Ugui中文教程文档-------概要-UGUI Auto Layout 6. Auto Layout Rect Transform布局系统是足够灵活,可以处 ...

  4. 【转】(八)unity4.6Ugui中文教程文档-------概要-UGUI Rich Text

    原创至上,移步请戳:(八)unity4.6Ugui中文教程文档-------概要-UGUI Rich Text 7.Rich Text UI元素和文本网格的文本可以合并多个字体样式和大小.对 UI系统 ...

  5. 【转】(六)unity4.6Ugui中文教程文档-------概要-UGUI Animation Integration

    原创至上,移步请戳:(六)unity4.6Ugui中文教程文档-------概要-UGUI Animation Integration 5.Animation Integration(动画集成) 动画 ...

  6. 【转】(五)unity4.6Ugui中文教程文档-------概要-UGUI Interaction Components

    原创至上,移步请戳:(五)unity4.6Ugui中文教程文档-------概要-UGUI Interaction Components 4.Interaction Components 本节涵盖了处 ...

  7. 【转】(四)unity4.6Ugui中文教程文档-------概要-UGUI Visual Components

    原创至上,移步请戳:(四)unity4.6Ugui中文教程文档-------概要-UGUI Visual Components 3.Visual Components 有新的组件和游戏对象已添加到uG ...

  8. 【转】(二)unity4.6Ugui中文教程文档-------概要-UGUI Canvas

    原创至上,移步请戳:(二)unity4.6Ugui中文教程文档-------概要-UGUI Canvas UI系统允许您快速.直观地创建用户界面(Ui).这是Unity的新 UI 系统的主要功能介绍. ...

  9. [转](六)unity4.6Ugui中文教程文档-------概要-UGUI Animation Integration

    5.Animation Integration(动画集成) 动画允许控件的所有状态之间相互转换,充分使用unity的动画系统.这是最强大的的转换模式的在处理很多属性的同时可以进行动画. 要使用动画转换 ...

随机推荐

  1. CSS中position:fixed的相关用法

    CSS中的三大重点知识: 1.float,浮动 2.盒子模型 3.position绝对定位 今天主要写下position中fixed相关知识: position:static,relative,abs ...

  2. Android中创建倒影效果的工具类

                     一.有时候我们需要创建倒影的效果,我们接触最多的都是图片能够创建倒影,而布局依然可以创建倒影.       二.工具类代码 import android.graphi ...

  3. iOS UISlider滑动块触摸范围调整变大

    正常情况下,我们自定义的滑动区域都不会太大,否则UI不美观,但是这样,又会手势不灵敏,用户体验变差. 如何解决? 这里有一种方案:封装一个继承UISlider的自定义类,重写thumbRectForB ...

  4. socket.io简介

    websocket是一种比较简单的协议,各种语言中都有很多实现版本,实际上它们差别不大,都是在websocket的基础上做些封装,随便选一个即可. socket.io就是众多websocket库中的一 ...

  5. [转]webMethods公司简介

    原文链接 webMethods公司简介 webMethods,Inc.(美国纳斯达克股市上市代号:WEBM)为著名业务整合软件供应商之一.公司于1996年创立,总部位于美国佛吉尼亚州(Virginia ...

  6. jquery.inputmask 输入框input输入内容格式限制插件

    jQuery Input Mask plugin http://robinherbots.github.io/jquery.inputmask README.md jquery.inputmask C ...

  7. Html插入Flash.object.embed.swf各个参数值详解介绍[等比例缩放]

    http://www.dayku.cn/space-3-do-blog-id-544.html 目也在此列出. Internet Explorer 可识别用于 object 标签的参数:Netscap ...

  8. 【C#】C#创建Windows Service服务

    目录结构: contents structure [+] 创建Windows服务 配置 安装Windows服务 在Visual Studio中调试 常见问题 最近写了一个TCP连接的程序,由于这种通信 ...

  9. windows 7 开启无线wifi

    Windows 7 开启无线wifi步骤:1.选择“开始”-“运行”命令,在运行命令栏里输入“CMD”打开管理员: 2.在界面里输入以下命令:netsh wlan set hostednetwork ...

  10. Docker未启动错误:Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?

    此问题是因为Docker安装后未启动所致,执行以下命令启动docker: systemctl start docker.service 具体日志如下: Connecting to ... Connec ...