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

Unity4.6UGUI开发设计及案例讲解1．Unity4.6跟以前的版本的最大区别首先在于在层级视图中点鼠标右键时出现的弹出菜单上，它把以前许多的菜单项进行了归类，比如cubespherecapsule….等整合到“3DObject”子菜单中，而且多出一个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中有一RenderMode属性，它有3个选项，分别对应Canvas的三种渲染模式：ScreenSpace–Overlay、ScreenSpace–Camera、WorldSpace2ScreenSpace–Overlay：此模式不需要UI摄像机，UI将永远出现在所有摄像机的最前面（即在某个UI的前面是不能再添加其他组件的），就好像是给摄像机贴上了一层膜。它的最大好处是不需要摄像机，不需要灯光。3ScreenSpace–Camera：此模式需要提供一个UICamera，它支持在UI前方显示3D模型与粒子系统等内容。不过此模式下，就需在中给它挂一个摄像机。当挂上摄像机并选择3D显示模式时，我们选中这个摄像机，并移动它，可发现画布会跟随摄像机的移动而移动，且Game视图显示的UI其位置与大小均保持不变，如下图所示：这种模式，虽然UI的显示效果与第一种模式没有什么两样，然而，因在画布与摄像机之间可放置三维物体或粒子系统，那么就可做出许多绚丽的特效。这一项是设置Canvas与摄像机之间的距离，其值越大，可在画布与摄像机之间放很多的三维物体，默认是100，建议设置为100与200之间即可。4WorldSpace：这个就是完全3D的UI，也就是把UI也当成3D对象，如摄像机离UI远了，其显示就会变小，近了就会变大。5其它一些属性：当有多个画布时，决定谁在前，谁先显示。二．CanvasScaler画布的大小UiScaleMode（大小模式）当我们把Canvas中的RenderMode设为ScreenSpace–Overlay或ScreenSpace–Camera时，此CanvasScale中的UiScaleMode（大小模式）就可用，且其中有3个选项：1ConstanPixelSize：固定像素尺寸2ScaleWithScreenSize：以宽度为标准缩放（屏幕自适应特性）2.1ReferenceResolution：参考分辨率在不同分辨率下，控件显示的大小有所不同，这要根据实际情况综合考虑。2.2ScreenMatchMode：屏幕匹配模式MatchWidthOrHeigt：匹配宽度或高度此模式下会出现Match调节滑杆，调节其控块位置，也会影响UI元素显示的大小。Expand：扩展Shrink：收缩3ConstantPhysicalSize：固定物理尺寸三．Panel面板当我们初次创建Panel后，它会充满整个画布，如下左图：此时通过拖动该面板控件的4个角点或四条边可调节面板的大小，如上右图面板实际上就是一个容器，在其上可放置其他UI控件，当移动面板时，放在其中的UI组件就会跟随移动，这样我们可以更加合理与方便的移动与处理一组控件。也就是通过面板，我们可以把控件分组。一个功能完备的UI界面，往往会使用多个Panel容器控件。而且一个面板里还可套用其他面板。当我们创建一个面板后，此面板会默认包含一个Image(Script)组件：该组件中的SourceImage是设置面板的图像。Color，可改变面板的颜色。四．EventSystem事件处理系统当我们创建一个画布时，Unity系统会自动为我们创建一个EventSystem，该事件处理器中有3个组件：1．EventSystem：事件系统组件（事件）2．StandaloneInputModule：独立输入模块（输入）3．TouchInputModule：触控输入模块（触控）如果我们将EventSystem(Script)前的勾去掉，则管理整个场景的事件系统则不起作用了，此时运行程序，如果有Button，单击它时就不会有反应了。五．Text控件在UGUI中，我们所创建的所有UI控件，它们都有一个UI控件特有的RectTransform组件：我们所创建的三维物体，是Transform，而UI控件是RectTransform，它是UI控件的矩形方位，其中的指的是UI控件在相应轴上的偏移量。UI控件除了上面RectTransform控件外，每个UI控件都还一个组件，它是画布渲染，一般不用管它，因它不能点开的。Text控件的相关属性：Character:（字符）Font：字体FontStyle：字体样式FontSize：字体大小LineSpacing：行间距（多行）RichText：“富”文本。例如：UbG/bU/iIvolor=”yellow”学/color习Color：字体颜色Paragraph:（段落）：设置文本在Text框中的水平以及垂直方向上的对齐方式。：水平方向上溢出时的处理方式。它有两种：Wrap隐藏；Overflow溢出。：垂直方向上溢出时的处理方式。它有两种：Truncate截断；Overflow溢出。隐藏了或截断了，信息显示不全当然不好，但如果溢出又会破坏版面，想两全齐美的话，就可选中：，如果文字多时，它会自动缩小以适应文本框的大小，当选中该项后，在其下边会出现MinSize与MaxSize两输入框，可设置字体变化时的最小与最大值。六．Image控件Image控件除了两个公共的组件RectTransform与CanvasRenderer外，默认的情况下就只有一个Image(Script)组件：SourceImage是要显示的源图像，但如果我们把一个普通的图像往里拖放时，却不能成功放入，认真研究一下不难发现，放图像的框中，除了None表示还没有图像外，还有一个括号注释的Sprite，它的意思是精灵，可理解为它是贴图的一种特殊形式，它不具备其他功能，只给UI做显示图片用，故我们给它取了一个特殊的名字：精灵Sprite，所以在Unity4.6中，要想把一个图片赋给Image，则需要把该图片转换成精灵格式，转换方法为，在Project中选中要转换在图片，然后在Inspector检视图中，单击TextureType（纹理类型）右边的下拉框，在弹出的菜单中，第三项EditorGUIandLegacyGUI是Unity4.6以前版本所用的，选中它时，图片不会被拉伸，现在几乎不用，是为了兼容，而第四项Sprite(2DandUI)，就是4.6版本所用的，它虽然比前一项适用的范围更窄，但其效率更高。我们选中该选项Sprite(2DandUI)并点击下方的Apply（应用）按钮就可把此图片转换成精灵格式，随后就可拖放到Image的SourceImag中了，如下图所示：另：当我们把一个普通的图片转换成精灵格式后，在Project中，将发现该图片将包含一个子对象如图：，以后可以把一个图片划分为多个图片。当我们把精灵图片赋给了Image后，其组件样式如下图：Color：可改变图片的颜色；Material：材质，这是针对一些复杂的贴图使用。ImageType：贴图的类型，这是最重要的属性。1）Simple：简单PreserveAspect：翻译过来是：维持外貌，选中该项后，该精灵图片的长宽比将保持原状，当调节图片的大小时，它将在保持原长宽比的前提下尽量铺展到图片框中，即不会拉伸或压缩以适应图片框而铺满。SetNativeSize：本来的大小。如果调整后大小变乱了，单击此按钮，可将此图片设置成本来的大小2）Sliced：片应用该种类型时，应先将贴图进行“九宫格”处理后才可以应用。否则其下会出现黄色的警告ThisImagedoesn’thaveaborder：这个图片没有边框，如下图：怎样进行九宫格的处理呢？先在Project中选中该图片精灵，然后在其Inspector检视图中单击“SpriteEditor”按钮即可进入九宫格处理SprinteEditor视窗中，如下两个图所示：在这个SprinteEditor视窗中，我们可以拖动图像四条边上的绿色线，调节九宫格的布局大小，调好后单击顶端的Apply按钮应用即可，回到Image的检视图中，我们将发现原来的警告消失了：在ImageType为Sliced时，当对图像进行大小调节时，其中心会缩放以适合矩形，但边界会保持不变，这样当你显示不同尺度图像时，不用担心扩大与缩小时其轮廓会发生变化。如果你只想要边界，不要中心，可以禁用FillCenter（填充中心）属性。3）Tiled：平铺图像保持其原始大小，重复多次填补空白。这往往用于做背景。4）Filled：填充图像填充满整个Image矩形区域，再结合FillAmount属性，可做一些特效。当图片类型为Filled时，其Image组件的属性视图如上图所示，其FillMethod（填充方法）选择框中有5种：Horizontal：水平填充，如果我们手动拖动FillAmount（填充数量）滑块，就可看到图片在水平方向上的填充变化（动画），如下图列所示：Vertical：垂直填充，同理当我们手动拖动FillAmount滑块，就可看到图片在垂直方向上的填充变化（动画），如下图列所示：Radial90：径向90度填充，同理当我们手动拖动FillAmount滑块，就可看到图片在90度方向上的填充变化（动画），如下图列所示，默认是以左下角为圆心，顺时针90度填充。Radial180：径向180度填充，同理当我们手动拖动FillAmount滑块，就可看到图片在180度方向上的填充变化（动画），如下图列所示，默认是以底边中点为圆心，顺时针180度填充。Radial300：径向180度填充，同理当我们手动拖动FillAmount滑块，就可看到图片在360度方向上的填充变化（动画），如下图列所示，默认是以图片的中心点为圆心，顺时针360度填充。如果我们使用脚本来控制FillAmount的值，就可制造出这五种动画来，为特效的制作增加了一些有效的手段。七．Button控件当我们创建一个Button后，其Inspector视图如下：除了公共的RectTransform与CanvasRenderer两个UI组件外，Button还默认拥有Image(Script)与Button(Script)两个组件。组件Image(Script)里的属性与前面所讲的Image控件的Image(Script)组件里的属性是一样的，例如SourceImage的图像类型仍为一个Sprite（精灵），通过为此赋值，就可改变此Button的外观了，如果你为属性赋值了图片精灵，那么此Button的外观就与此精灵一致了。Button是一个复合控件，它中还包含一个Text子控件：，通过此子控件可设置Button上显示的文字的内容、字体、样式、字大小、颜色等，与前面所讲的Text控件是一样的。Button(Script)组件里的属性：1Interactable：是否启用（交互性）如果你把其后的对勾去掉，此Button在运行时将点不动，即失去交互性了。2Transition：过渡方式它有四个选项，默认为ColorTint（颜色色彩）1）None：没有过渡方式。2）ColorTint：颜色过渡TargetGrap