Unity3d5的UGUI简单介绍分析课件

1、Unity3d从入门到精通 UGUI 孙肖雨 2015/12/06第1页，共22页。目录UGUI简介UGUI组件效果展示谢谢第2页，共22页。UGUI简介NGUIEzGUI、其他UGUI第3页，共22页。NGUINGUI是严格遵循KISS原则并用C#编写的Unity插件，提供强大的UI系统和事件通知框架。相当长的一段时间内，NGUI是Unity UI的第一解决方案。当需要编写代码让控件移动时，可以选择简单的例子代码，可以把你的控件转变为按钮、输入框、基于事件改变颜色、播放声音、触发动画等等。KISS原则是啥？KISS原则源于David Mamet（大卫马梅）的电影理论。KISS原则是英语 Ke

2、ep It Simple, Stupid。KISS原则是指在设计当中应当注重简约的原则。简单的理解这句话就是，要把一个系统做的连白痴都会用。第4页，共22页。UGUI ？！UGUI即UnityGUI是官方的UI的实现方式，后来因为效率和可视化程度低，逐渐被NGUI和EzGUI等第三方插件替代。但是，Unity4.6之后呢，又推出了新的uGUI系统（据说是把NGUI的作者挖过去了），包括后面的Unity5.x都采用了这一新的系统。uGUI还在不断完善，应该会超越NGUI第5页，共22页。Unity视图1Hierarchy视图显示的是当前场景Scene里的游戏对象。为什么提？uGUI可以直接在Hi

3、erarchy面板中上下拖拽来对渲染进行排序，越上面的UI会越先被渲染。（见例子）第6页，共22页。Unity视图2Scene视图是对场景中游戏对象进行可视化操作。Game视图显示的是游戏运行时的图像。Inspector视图显示当前选中游戏对象的所有组件及组件的属性。第7页，共22页。Canvas所有的UI元素必须是canvas的子元素。Canvas参数Render Mode的渲染模式：Screen Space-Overlay画布铺满整个屏幕空间，ui元素置于屏幕的最上层，简单来说看到的就是一个2D的样子。Pixel Perfect，使UI像素对应，UI的边缘清晰，不模糊。Sort Order

4、，不同画布深度，即不同画布的前后显示顺序。Canvas Scaler，用来处理缩放的，pc或移动端分辨率不同，采用不同的设置Constant Pixel Size：像素大小始终不变第8页，共22页。Canvas所有的UI元素必须是canvas的子元素。Canvas参数Render Mode的渲染模式：Screen Space-Camera和之前的渲染模式类似，画布填满整个屏幕空间，尺寸改变，画布也会自动改变尺寸来匹配屏幕。不同：多了一个UIcamera，所有的UI元素由这个相机渲染。Plane Distance 画布平面到相机的距离Sorting Layer和Order in Layer与之前

5、的Sort Order功能有些相似，设置画布的深度的。第9页，共22页。Canvas所有的UI元素必须是canvas的子元素。Canvas参数Render Mode的渲染模式：World Space世界空间模式。canvas被视为一个类似Plane的游戏对象。这个模式下，画布的大小可以在Rec Transform里进行设置。这个时候是3d的，UI元素可以位于普通3d物体的前面或后面显示。特别：有一个Event Camera，用来指定接受事件的摄像机，可以通过画布上的Graphic Raycaster组件发射射线产生事件。注：EventSystem，是创建UI元素时，自动生成的，UI元素响应，不

6、能缺少它。第10页，共22页。Rect TransformRect Transform是继承自Transform（包括position、Rotation、Scale）。锚点（anchor）：这里有一个锚点的概念。左中右、上中下，有9中锚点；用锚点来确定或者固定UI元素的位置。伸展（stretch）：也是用来确定位置和形变的。如果选择stretch的某一种拉伸效果，那么UI元素就会相对于canvas进行相应变化。这个变化是相对的变化，这样就可以很好的处理形变的问题。第11页，共22页。Imageimage组件，加入图片，要求图片的类型是sprite什么是sprite？图片精灵是用来绘制图集的控件

7、，精灵可以在一张大图中去截取一部分（大图就是整体图像集合（Atlas），而截取的小图就是一个精灵），然后给精灵命名，使用时通过精灵的名称就能直接绘制，并且精灵还可以用来制作动画。sprite有两种single & multiple（可切）第12页，共22页。RawImageImage元素用的是sprite格式的文本，RawImage使用普通的Texture2D贴图。UV Rect属性X、Y是指图片的偏移X在水平方向的偏移，值改变，会使图片重复出现Y是在垂直方向上的偏移。W、H可以改变图片的显示图片，即w=2时，图片会显示2个，宽度会被压缩。同样若是h=2，那么高度就会被压缩一半，用来显示2个图

8、片。Mask遮罩，可以遮挡图片多余的部分，可以和scrollBar结合使用。第13页，共22页。Text&ButtonText文本Line Spacing 是设置行间距的Rich Text 富态字Best fit 忽略字体大小，将文本全部显示在元素区域。所有的UI元素可以添加轮廓和阴影效果。Shadow 和 Outline修改Effect Color和Effect Distance可以看到明显的变化。第14页，共22页。Text&Button&InputFieldButton首先，button中，也包括一个Text，设置和之前的是一样的。Transition，响应用户的可视化操作方式。None

9、无ColorTint，颜色SpriteSwap，精灵替换Animation，动画On Click 点击事件第15页，共22页。Text&Button&InputFieldInputField是组合image和text产生的。具体操作：首先新建一个image组件，设定图片大小；新建一个text，将text里的Rich text 取消勾选，调整大小（小于image）；在Hierarchy窗口中，将text拖动，使之成为image的子对象。为image添加Input Field组件，为该组件中的Text Component属性添加Text组件，即将之前新建的Text拖动到这里。当然也可以设置Inpu

10、tField组件的其他的属性第16页，共22页。Toggle &ToggleGroupToggle类似复选框可以实现对选项进行勾选或者不勾选的操作，可用于音乐的开启、关闭等界面功能。Is On，Toggle开关是否为开启状态，开始运行时，开关是否开启，在运行过程中，随开关勾选变换而变化。Group，Toggle所处的组，后面的Toggle Group相关。On Value Changed, 值变换响应，事件相应。第17页，共22页。Toggle &ToggleGroupToggle Group，属于一个开关组的Toggle，就只能有一个勾选。怎么实现？首先，在canvas下新建一个Create

11、 Empty，创建一个空的组件，命名为Toggle Group；然后为这个空的组件添加 Toggle Group组件；将三个Toggle拖到Toggle Group下，成为子对象，为三个toggle选择所属的组；将后两个Is on 勾选取消。运行之后，Toggle只有一个勾选。第18页，共22页。Slider &滚动区域 &Scroll barSlider滑动条可以设定参数为预定取值范围里的数。值由滑动柄在滑动条的相对位置决定，可以用来实现音量控制、发兵数量等功能。Direction，方向：从左到右，从右到左，从上到下，从下到上Min/Max Value，最小/最大值Whole Numbers

12、，是否限定为整数Value 值On Value Changed，响应事件第19页，共22页。Slider &滚动区域 &Scroll bar滚动区域，Scroll Rect组件滚动区域怎么？新建新的游戏对象，Create Empty；，命名为SrollRect，再然后加上Scroll Rect组件；可以新建image，使之成为ScrollRect的子对象，图片就可以有拖动效果。Content，被拖拽的内容H、V，分别代表是否可水平、垂直拽Movement Type：Unrestricted，不限制，可以移出去Elastic，限制，移出后弹回Clamped，限制，不可移出Inertia，惯性，rate，拖拽后减速度H、V Scroll Bar，水平垂直滚动条第20页，共22页。Slider &滚动区域 &Scroll barScroll Bar滚动条可以为Scroll Rect添加滚动条，以显示当前滚动的位置，滚动条也可以拖拽。Mask，遮罩的使用