大家好,我是孙广东。   转载请注明出处:http://write.blog.csdn.net/postedit/38922399

更全的内容请看我的游戏蛮牛地址:http://www.unitymanual.com/forum.php?mod=guide&view=my

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

    原创至上,移步请戳:(三)unity4.6Ugui中文教程文档-------概要-UGUI Basic Layout 2. BasicLayout 在这一节我们会看到UI元素相对于画布的位置是怎样的. ...

  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. Ceph与OpenStack的Glance相结合

    http://docs.ceph.com/docs/master/rbd/rbd-openstack/?highlight=nova#kilo 在Ceoh的admin-node上进行如下操作: 1. ...

  2. angular+ckeditor最后上传的最后一张图片不会被添加(bug)

    做法一: angularJs+ckeditor 一.页面 <textarea ckeditor required name="topicContent" ng-model=& ...

  3. SharePoint 2013 网站应用程序、网站集、网站知识整理

    网站应用程序:Web 应用程序是一种可以通过Web访问的应用程序.我们自己以前用VS开发的Web应用程序一般是通过人工部署到IIS上的,而SharePoint的Web应用程序是由SharePoint安 ...

  4. Run P4 without P4factory - A Simple Example In Tutorials. -2

    Reference:Github-Tutorial Exercise 2: Implementing TCP flowlet switching 实验准备: 参考之前的博客:Run P4 withou ...

  5. c语言-交换两个整数

    使用c来写一个函数来实现交换两个整数. 第一种 一般的方法,引用中间变量,方便快捷. void swap(int *a, int *b) { int tmp = *a; *a = *b; *b = t ...

  6. react 年-月-日 时:分:秒

    // 时间let date = new Date();debugger;let seperator1 = "-";let seperator2 = ":";le ...

  7. 《30天自制操作系统》15_day_学习笔记

    harib12a: 这一部分我们来尝试两个任务的切换.下面我们一步一步的看: 1.定义TSS任务状态段(task statuc segment):定义的一种段,需要在GDT中定义使用 //TSS任务状 ...

  8. Linux命令之md5sum

    1. 背景 在网络传输.设备之间转存.复制大文件等时,可能会出现传输前后数据不一致的情况.这种情况在网络这种相对更不稳定的环境中,容易出现.那么校验文件的完整性,也是势在必行的. md5sum命令用于 ...

  9. 怎么理解Android版本兼容???

    程序中设置了minSdkVersion和targetSdkVersion如下: <uses-sdk android:minSdkVersion="8" android:tar ...

  10. asp.net MVC实现文章的上一篇下一篇

    由于这个东西的原理没有什么难的(只是实现的时候有少量的坑),故直接上代码以便查阅.另:本文给出的Action附送了点击量统计. public ActionResult SingleNews(int? ...