Unity3D4.6UGUI开发设计与案例讲解

Unity4.6 UGUI开发设计及案例讲解1．Unity4.6跟以前的版本的最大区别首先在于在层级视图中点鼠标右键时出现的弹出菜单上，它把以前许多的菜单项进行了归类，比如cube sphere capsule….等整合到“3D Object”子菜单中，而且多出一个UI子菜单，它就是UI组件了。

当我们点击UI->Canvas时，就会在场景视图里创建一个画布，不过视图默认是3D显示方式，在Unity4.3以后，增加了一个2D与3D转换按钮，单击此按钮可在3D与2D显示样式之间转换。

UI是2D，为何还要3D呢，在做一些比较复杂的项目时，给用户看时是2D，但我们编辑时，有时还是要用到3D模式的。

2．Canvas是画布，所有的UI组件就是绘制在这个画布里的，脱离画布，UI组件就不能用。

创建画布有两方式。

一是通过菜单直接创建，二是直接创建一个UI组件时，会在创建这个组件的同时自动创建一个容纳该组件的画布出来。

不管那种方式创建出画布时，系统都会自动创建出一个EventSystem组件，这是UI的事件系统。

一．Canvas组件1Canvas组件的三种渲染模式在Canvas中有一Render Mode属性，它有3个选项，分别对应Canvas的三种渲染模式：Screen Space – Overlay、Screen Space – Camera、World Space2Screen Space – Overlay：此模式不需要UI摄像机，UI将永远出现在所有摄像机的最前面（即在某个UI的前面是不能再添加其他组件的），就好像是给摄像机贴上了一层膜。

它的最大好处是不需要摄像机，不需要灯光。

3Screen Space – Camera：此模式需要提供一个UICamera，它支持在UI前方显示3D模型与粒子系统等容。

不过此模式下，就需在中给它挂一个摄像机。

当挂上摄像机并选择3D显示模式时，我们选中这个摄像机，并移动它，可发现画布会跟随摄像机的移动而移动，且Game视图显示的UI其位置与大小均保持不变，如下图所示：这种模式，虽然UI的显示效果与第一种模式没有什么两样，然而，因在画布与摄像机之间可放置三维物体或粒子系统，那么就可做出许多绚丽的特效。

这一项是设置Canvas与摄像机之间的距离，其值越大，可在画布与摄像机之间放很多的三维物体，默认是100，建议设置为100与200之间即可。

4World Space：这个就是完全3D的UI，也就是把UI也当成3D对象，如摄像机离UI远了，其显示就会变小，近了就会变大。

5其它一些属性：当有多个画布时，决定谁在前，谁先显示。

二．Canvas Scaler画布的大小Ui Scale Mode（大小模式）当我们把Canvas中的Render Mode设为Screen Space –Overlay 或Screen Space –Camera 时，此Canvas Scale中的Ui Scale Mode（大小模式）就可用，且其中有3个选项：1Constan Pixel Size：固定像素尺寸2Scale With Screen Size：以宽度为标准缩放（屏幕自适应特性）2.1 Reference Resolution：参考分辨率在不同分辨率下，控件显示的大小有所不同，这要根据实际情况综合考虑。

2.2 Screen Match Mode：屏幕匹配模式Match Width Or Heigt：匹配宽度或高度此模式下会出现Match调节滑杆，调节其控块位置，也会影响UI元素显示的大小。

Expand：扩展Shrink：收缩3Constant Physical Size：固定物理尺寸三．Panel 面板当我们初次创建Panel后，它会充满整个画布，如下左图：此时通过拖动该面板控件的4个角点或四条边可调节面板的大小，如上右图面板实际上就是一个容器，在其上可放置其他UI控件，当移动面板时，放在其中的UI 组件就会跟随移动，这样我们可以更加合理与方便的移动与处理一组控件。

也就是通过面板，我们可以把控件分组。

一个功能完备的UI界面，往往会使用多个Panel容器控件。

而且一个面板里还可套用其他面板。

当我们创建一个面板后，此面板会默认包含一个Image(Script)组件：该组件中的Source Image是设置面板的图像。

Color，可改变面板的颜色。

四．EventSystem事件处理系统当我们创建一个画布时，Unity系统会自动为我们创建一个EventSystem，该事件处理器中有3个组件：1．Event System：事件系统组件（事件）2．Standalone Input Module：独立输入模块（输入）3．Touch Input Module：触控输入模块（触控）如果我们将Event System (Script) 前的勾去掉，则管理整个场景的事件系统则不起作用了，此时运行程序，如果有Button，单击它时就不会有反应了。

五．Text控件在UGUI中，我们所创建的所有UI控件，它们都有一个UI控件特有的Rect Transform 组件：我们所创建的三维物体，是Transform，而UI控件是Rect Transform，它是UI控件的矩形方位，其中的指的是UI控件在相应轴上的偏移量。

UI控件除了上面Rect Transform控件外，每个UI控件都还一个组件，它是画布渲染，一般不用管它，因它不能点开的。

Text控件的相关属性：Character:（字符）Font：字体Font Style：字体样式Font Size：字体大小Line Spacing：行间距（多行）Rich Text：“富”文本。

例如：U<b>G</b>U</i>I<volor=”yellow”>学</color>习Color：字体颜色Paragraph:（段落）：设置文本在Text框中的水平以及垂直方向上的对齐方式。

：水平方向上溢出时的处理方式。

它有两种：Wrap隐藏；Overflow溢出。

：垂直方向上溢出时的处理方式。

它有两种：Truncate截断；Overflow溢出。

隐藏了或截断了，信息显示不全当然不好，但如果溢出又会破坏版面，想两全齐美的话，就可选中：，如果文字多时，它会自动缩小以适应文本框的大小，当选中该项后，在其下边会出现Min Size与Max Size两输入框，可设置字体变化时的最小与最大值。

六．Image控件Image控件除了两个公共的组件Rect Transform与Canvas Renderer外，默认的情况下就只有一个Image(Script)组件：Source Image是要显示的源图像，但如果我们把一个普通的图像往里拖放时，却不能成功放入，认真研究一下不难发现，放图像的框中，除了None表示还没有图像外，还有一个括号注释的Sprite，它的意思是精灵，可理解为它是贴图的一种特殊形式，它不具备其他功能，只给UI做显示图片用，故我们给它取了一个特殊的名字：精灵Sprite，所以在Unity4.6中，要想把一个图片赋给Image，则需要把该图片转换成精灵格式，转换方法为，在Project中选中要转换在图片，然后在Inspector检视图中，单击Texture Type（纹理类型）右边的下拉框，在弹出的菜单中，第三项Editor GUI and Legacy GUI是Unity4.6以前版本所用的，选中它时，图片不会被拉伸，现在几乎不用，是为了兼容，而第四项Sprite(2D and UI)，就是4.6版本所用的，它虽然比前一项适用的围更窄，但其效率更高。

我们选中该选项Sprite(2D and UI)并点击下方的Apply（应用）按钮就可把此图片转换成精灵格式，随后就可拖放到Image的Source Imag中了，如下图所示：另：当我们把一个普通的图片转换成精灵格式后，在Project中，将发现该图片将包含一个子对象如图：，以后可以把一个图片划分为多个图片。

当我们把精灵图片赋给了Image后，其组件样式如下图：Color：可改变图片的颜色；Material：材质，这是针对一些复杂的贴图使用。

Image Type：贴图的类型，这是最重要的属性。

1）Simple：简单Preserve Aspect：翻译过来是：维持外貌，选中该项后，该精灵图片的长宽比将保持原状，当调节图片的大小时，它将在保持原长宽比的前提下尽量铺展到图片框中，即不会拉伸或压缩以适应图片框而铺满。

Set Native Size：本来的大小。

如果调整后大小变乱了，单击此按钮，可将此图片设置成本来的大小2）Sliced：片应用该种类型时，应先将贴图进行“九宫格”处理后才可以应用。

否则其下会出现黄色的警告 This Image doesn’t have a border：这个图片没有边框，如下图：怎样进行九宫格的处理呢？先在Project中选中该图片精灵，然后在其Inspector检视图中单击“Sprite Editor”按钮即可进入九宫格处理Sprinte Editor视窗中，如下两个图所示：在这个Sprinte Editor视窗中，我们可以拖动图像四条边上的绿色线，调节九宫格的布局大小，调好后单击顶端的Apply按钮应用即可，回到Image的检视图中，我们将发现原来的警告消失了：在Image Type为Sliced时，当对图像进行大小调节时，其中心会缩放以适合矩形，但边界会保持不变，这样当你显示不同尺度图像时，不用担心扩大与缩小时其轮廓会发生变化。

如果你只想要边界，不要中心，可以禁用Fill Center（填充中心）属性。

3）Tiled：平铺图像保持其原始大小，重复多次填补空白。

这往往用于做背景。

4）Filled：填充图像填充满整个Image矩形区域，再结合Fill Amount属性，可做一些特效。

当图片类型为Filled时，其Image组件的属性视图如上图所示，其Fill Method（填充方法）选择框中有5种：Horizontal：水平填充，如果我们手动拖动Fill Amount（填充数量）滑块，就可看到图片在水平方向上的填充变化（动画），如下图列所示：Vertical：垂直填充，同理当我们手动拖动Fill Amount滑块，就可看到图片在垂直方向上的填充变化（动画），如下图列所示：Radial 90：径向90度填充，同理当我们手动拖动Fill Amount滑块，就可看到图片在90度方向上的填充变化（动画），如下图列所示，默认是以左下角为圆心，顺时针90度填充。

Radial 180：径向180度填充，同理当我们手动拖动Fill Amount滑块，就可看到图片在180度方向上的填充变化（动画），如下图列所示，默认是以底边中点为圆心，顺时针180度填充。