Unity3d5的UGUI简单介绍分析

目录UGUI简介UGUI组件效果展示谢谢UGUI简介NGUINGUI是严格遵循KISS原则并用C#编写的Unity插件，提供强大的UI系统和事件通知框架。相当长的一段时间内，NGUI是UnityUI的第一解决方案。当需要编写代码让控件移动时，可以选择简单的例子代码，可以把你的控件转变为按钮、输入框、基于事件改变颜色、播放声音、触发动画等等。KISS原则是啥？KISS原则源于DavidMamet（大卫马梅）的电影理论。KISS原则是英语KeepItSimple,Stupid。KISS原则是指在设计当中应当注重简约的原则。简单的理解这句话就是，要把一个系统做的连白痴都会用。UGUI？！UGUI即UnityGUI是官方的UI的实现方式，后来因为效率和可视化程度低，逐渐被NGUI和EzGUI等第三方插件替代。但是，Unity4.6之后呢，又推出了新的uGUI系统（据说是把NGUI的作者挖过去了），包括后面的Unity5.x都采用了这一新的系统。uGUI还在不断完善，应该会超越NGUIUnity视图1Hierarchy视图显示的是当前场景Scene里的游戏对象。为什么提？uGUI可以直接在Hierarchy面板中上下拖拽来对渲染进行排序，越上面的UI会越先被渲染。（见例子）Unity视图2Scene视图是对场景中游戏对象进行可视化操作。Game视图显示的是游戏运行时的图像。Inspector视图显示当前选中游戏对象的所有组件及组件的属性。Canvas所有的UI元素必须是canvas的子元素。Canvas参数RenderMode的渲染模式：ScreenSpace-Overlay画布铺满整个屏幕空间，ui元素置于屏幕的最上层，简单来说看到的就是一个2D的样子。PixelPerfect，使UI像素对应，UI的边缘清晰，不模糊。SortOrder，不同画布深度，即不同画布的前后显示顺序。CanvasScaler，用来处理缩放的，pc或移动端分辨率不同，采用不同的设置ConstantPixelSize：像素大小始终不变Canvas所有的UI元素必须是canvas的子元素。Canvas参数RenderMode的渲染模式：ScreenSpace-Camera和之前的渲染模式类似，画布填满整个屏幕空间，尺寸改变，画布也会自动改变尺寸来匹配屏幕。不同：多了一个UIcamera，所有的UI元素由这个相机渲染。PlaneDistance画布平面到相机的距离SortingLayer和OrderinLayer与之前的SortOrder功能有些相似，设置画布的深度的。Canvas所有的UI元素必须是canvas的子元素。Canvas参数RenderMode的渲染模式：WorldSpace世界空间模式。canvas被视为一个类似Plane的游戏对象。这个模式下，画布的大小可以在RecTransform里进行设置。这个时候是3d的，UI元素可以位于普通3d物体的前面或后面显示。特别：有一个EventCamera，用来指定接受事件的摄像机，可以通过画布上的GraphicRaycaster组件发射射线产生事件。注：EventSystem，是创建UI元素时，自动生成的，UI元素响应，不能缺少它。RectTransformRectTransform是继承自Transform（包括position、Rotation、Scale）。锚点（anchor）：这里有一个锚点的概念。左中右、上中下，有9中锚点；用锚点来确定或者固定UI元素的位置。伸展（stretch）：也是用来确定位置和形变的。如果选择stretch的某一种拉伸效果，那么UI元素就会相对于canvas进行相应变化。这个变化是相对的变化，这样就可以很好的处理形变的问题。Imageimage组件，加入图片，要求图片的类型是sprite什么是sprite？图片精灵是用来绘制图集的控件，精灵可以在一张大图中去截取一部分（大图就是整体图像集合（Atlas），而截取的小图就是一个精灵），然后给精灵命名，使用时通过精灵的名称就能直接绘制，并且精灵还可以用来制作动画。sprite有两种single&multiple（可切）RawImageImage元素用的是sprite格式的文本，RawImage使用普通的Texture2D贴图。UVRect属性X、Y是指图片的偏移X在水平方向的偏移，值改变，会使图片重复出现Y是在垂直方向上的偏移。W、H可以改变图片的显示图片，即w=2时，图片会显示2个，宽度会被压缩。同样若是h=2，那么高度就会被压缩一半，用来显示2个图片。Mask遮罩，可以遮挡图片多余的部分，可以和scrollBar结合使用。Text&ButtonText文本LineSpacing是设置行间距的RichText富态字Bestfit忽略字体大小，将文本全部显示在元素区域。所有的UI元素可以添加轮廓和阴影效果。Shadow和Outline修改EffectColor和EffectDistance可以看到明显的变化。Text&Button&InputFieldButton首先，button中，也包括一个Text，设置和之前的是一样的。Transition，响应用户的可视化操作方式。None无ColorTint，颜色SpriteSwap，精灵替换Animation，动画OnClick点击事件Text&Button&InputFieldInputField是组合image和text产生的。具体操作：首先新建一个image组件，设定图片大小；新建一个text，将text里的Richtext取消勾选，调整大小（小于image）；在Hierarchy窗口中，将text拖动，使之成为image的子对象。为image添加InputField组件，为该组件中的TextComponent属性添加Text组件，即将之前新建的Text拖动到这里。当然也可以设置InputField组件的其他的属性Toggle&ToggleGroupToggle类似复选框可以实现对选项进行勾选或者不勾选的操作，可用于音乐的开启、关闭等界面功能。IsOn，Toggle开关是否为开启状态，开始运行时，开关是否开启，在运行过程中，随开关勾选变换而变化。Group，Toggle所处的组，后面的ToggleGroup相关。OnValueChanged,值变换响应，事件相应。Toggle&ToggleGroupToggleGroup，属于一个开关组的Toggle，就只能有一个勾选。怎么实现？首先，在canvas下新建一个CreateEmpty，创建一个空的组件，命名为ToggleGroup；然后为这个空的组件添加ToggleGroup组件；将三个Toggle拖到ToggleGroup下，成为子对象，为三个toggle选择所属的组；将后两个Ison勾选取消。运行之后，Toggle只有一个勾选。Slider&滚动区域&ScrollbarSlider滑动条可以设定参数为预定取值范围里的数。值由滑动柄在滑动条的相对位置决定，可以用来实现音量控制、发兵数量等功能。Direction，方向：从左到右，从右到左，从上到下，从下到上Min/MaxValue，最小/最大值WholeNumbers，是否限定为整数Value值OnValueChanged，响应事件Slider&滚动区域&Scrollbar滚动区域，ScrollRect组件滚动区域怎么？新建新的游戏对象，CreateEmpty；，命名为SrollRect，再然后加上ScrollRect组件；可以新建image，使之成为ScrollRect的子对象，图片就可以有拖动效果。Content，被拖拽的内容H、V，分别代表是否可水平、垂直拽MovementType：Unrestricted，不限制，可以移出去Elastic，限制，移出后弹回Clamped，限制，不可移出Inertia，惯性，rate，拖拽后减速度H、VScrollBar，水平垂直滚动条Slider&滚动区域&ScrollbarScrollBar滚动条可以为ScrollRect添加滚动条，以显示当前滚动的位置，滚动条也可以拖拽。Mask，遮罩的使用这里用到了遮罩；上面滚动区域完成后，可以新建两个scrollbar，一个水平，一个垂直，将这两个scrollbar加到scrollrect上面，此时已经能够拖动，但是会出现覆盖的问题。在scrollrect上面增加imag组件和Mask组件（为啥加image？），这时候超出scrollrect的部分就会被遮住，就实现了遮罩的功能。谢谢观看