zoukankan      html  css  js  c++  java
  • 【转】(三)unity4.6Ugui中文教程文档-------概要-UGUI Basic Layout

    原创至上,移步请戳:(三)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、宽度和高度;然而当锚分离然后字段可以更改部分或完全为顶部、底部、左边和右边。这种变化取决于锚点的定位和定义的每个角落填充到其各自锚句柄。锚句柄的一个有用的功能是他们会自动捕捉到其他游戏对象锚,允许精确地定位。

  • 相关阅读:
    vant框架的select下拉框
    监听滚轴高度
    关于使用iframe的父子页面进行简单的相互传值
    vue监听移动端物理返回
    vue+ElementUI项目中,input只能输入正整数的验证
    移动端公共样式
    协程嵌套协程
    基础知识
    汉化包
    .ui转.py文件命令
  • 原文地址:https://www.cnblogs.com/slysky/p/4301306.html
Copyright © 2011-2022 走看看