《Unity3d5的UGUI简单介绍.ppt》由会员分享，可在线阅读，更多相关《Unity3d5的UGUI简单介绍.ppt（22页珍藏版）》请在三一办公上搜索。
1、,Unity3d从入门到精通 UGUI 孙肖雨 2015/12/06,目录,UGUI简介,UGUI组件,效果展示,谢谢,UGUI简介,NGUI,EzGUI、其他,UGUI,NGUI,NGUI是严格遵循KISS原则并用C#编写的Unity插件，提供强大的UI系统和事件通知框架。相当长的一段时间内，NGUI是Unity UI的第一解决方案。当需要编写代码让控件移动时，可以选择简单的例子代码，可以把你的控件转变为按钮、输入框、基于事件改变颜色、播放声音、触发动画等等。KISS原则是啥？KISS原则源于David Mamet（大卫马梅）的电影理论。KISS原则是英语 Keep It Simple,St
2、upid。KISS原则是指在设计当中应当注重简约的原则。简单的理解这句话就是，要把一个系统做的连白痴都会用。,UGUI？！,UGUI即UnityGUI是官方的UI的实现方式，后来因为效率和可视化程度低，逐渐被NGUI和EzGUI等第三方插件替代。但是，Unity4.6之后呢，又推出了新的uGUI系统（据说是把NGUI的作者挖过去了），包括后面的Unity5.x都采用了这一新的系统。uGUI还在不断完善，应该会超越NGUI,Unity视图1,Hierarchy视图显示的是当前场景Scene里的游戏对象。为什么提？uGUI可以直接在Hierarchy面板中上下拖拽来对渲染进行排序，越上面的UI会越
3、先被渲染。（见例子）,Unity视图2,Scene视图是对场景中游戏对象进行可视化操作。Game视图显示的是游戏运行时的图像。Inspector视图显示当前选中游戏对象的所有组件及组件的属性。,Canvas,所有的UI元素必须是canvas的子元素。Canvas参数Render Mode的渲染模式：Screen Space-Overlay画布铺满整个屏幕空间，ui元素置于屏幕的最上层，简单来说看到的就是一个2D的样子。Pixel Perfect，使UI像素对应，UI的边缘清晰，不模糊。Sort Order，不同画布深度，即不同画布的前后显示顺序。Canvas Scaler，用来处理缩放的，pc
4、或移动端分辨率不同，采用不同的设置Constant Pixel Size：像素大小始终不变,Canvas,所有的UI元素必须是canvas的子元素。Canvas参数Render Mode的渲染模式：Screen Space-Camera和之前的渲染模式类似，画布填满整个屏幕空间，尺寸改变，画布也会自动改变尺寸来匹配屏幕。不同：多了一个UIcamera，所有的UI元素由这个相机渲染。Plane Distance 画布平面到相机的距离Sorting Layer和Order in Layer与之前的Sort Order功能有些相似，设置画布的深度的。,Canvas,所有的UI元素必须是canvas的
5、子元素。Canvas参数Render Mode的渲染模式：World Space世界空间模式。canvas被视为一个类似Plane的游戏对象。这个模式下，画布的大小可以在Rec Transform里进行设置。这个时候是3d的，UI元素可以位于普通3d物体的前面或后面显示。特别：有一个Event Camera，用来指定接受事件的摄像机，可以通过画布上的Graphic Raycaster组件发射射线产生事件。注：EventSystem，是创建UI元素时，自动生成的，UI元素响应，不能缺少它。,Rect Transform,Rect Transform是继承自Transform（包括position
6、、Rotation、Scale）。锚点（anchor）：这里有一个锚点的概念。左中右、上中下，有9中锚点；用锚点来确定或者固定UI元素的位置。伸展（stretch）：也是用来确定位置和形变的。如果选择stretch的某一种拉伸效果，那么UI元素就会相对于canvas进行相应变化。这个变化是相对的变化，这样就可以很好的处理形变的问题。,Image,image组件，加入图片，要求图片的类型是sprite什么是sprite？图片精灵是用来绘制图集的控件，精灵可以在一张大图中去截取一部分（大图就是整体图像集合（Atlas），而截取的小图就是一个精灵），然后给精灵命名，使用时通过精灵的名称就能直接绘制，
7、并且精灵还可以用来制作动画。sprite有两种single&multiple（可切）,RawImage,Image元素用的是sprite格式的文本，RawImage使用普通的Texture2D贴图。UV Rect属性X、Y是指图片的偏移X在水平方向的偏移，值改变，会使图片重复出现Y是在垂直方向上的偏移。W、H可以改变图片的显示图片，即w=2时，图片会显示2个，宽度会被压缩。同样若是h=2，那么高度就会被压缩一半，用来显示2个图片。Mask遮罩，可以遮挡图片多余的部分，可以和scrollBar结合使用。,Text&Button,Text文本Line Spacing 是设置行间距的Rich Tex
8、t 富态字Best fit 忽略字体大小，将文本全部显示在元素区域。所有的UI元素可以添加轮廓和阴影效果。Shadow 和 Outline修改Effect Color和Effect Distance可以看到明显的变化。,Text&Button&InputField,Button首先，button中，也包括一个Text，设置和之前的是一样的。Transition，响应用户的可视化操作方式。None无ColorTint，颜色SpriteSwap，精灵替换Animation，动画On Click 点击事件,Text&Button&InputField,InputField是组合image和text产
9、生的。具体操作：首先新建一个image组件，设定图片大小；新建一个text，将text里的Rich text 取消勾选，调整大小（小于image）；在Hierarchy窗口中，将text拖动，使之成为image的子对象。为image添加Input Field组件，为该组件中的Text Component属性添加Text组件，即将之前新建的Text拖动到这里。当然也可以设置InputField组件的其他的属性,Toggle&ToggleGroup,Toggle类似复选框可以实现对选项进行勾选或者不勾选的操作，可用于音乐的开启、关闭等界面功能。Is On，Toggle开关是否为开启状态，开始运行时
10、，开关是否开启，在运行过程中，随开关勾选变换而变化。Group，Toggle所处的组，后面的Toggle Group相关。On Value Changed,值变换响应，事件相应。,Toggle&ToggleGroup,Toggle Group，属于一个开关组的Toggle，就只能有一个勾选。怎么实现？首先，在canvas下新建一个Create Empty，创建一个空的组件，命名为Toggle Group；然后为这个空的组件添加 Toggle Group组件；将三个Toggle拖到Toggle Group下，成为子对象，为三个toggle选择所属的组；将后两个Is on 勾选取消。运行之后，To
11、ggle只有一个勾选。,Slider&滚动区域&Scroll bar,Slider滑动条可以设定参数为预定取值范围里的数。值由滑动柄在滑动条的相对位置决定，可以用来实现音量控制、发兵数量等功能。Direction，方向：从左到右，从右到左，从上到下，从下到上Min/Max Value，最小/最大值Whole Numbers，是否限定为整数Value 值On Value Changed，响应事件,Slider&滚动区域&Scroll bar,滚动区域，Scroll Rect组件滚动区域怎么？新建新的游戏对象，Create Empty；，命名为SrollRect，再然后加上Scroll Rect组
12、件；可以新建image，使之成为ScrollRect的子对象，图片就可以有拖动效果。Content，被拖拽的内容H、V，分别代表是否可水平、垂直拽Movement Type：Unrestricted，不限制，可以移出去Elastic，限制，移出后弹回Clamped，限制，不可移出Inertia，惯性，rate，拖拽后减速度H、V Scroll Bar，水平垂直滚动条,Slider&滚动区域&Scroll bar,Scroll Bar滚动条可以为Scroll Rect添加滚动条，以显示当前滚动的位置，滚动条也可以拖拽。Mask，遮罩的使用这里用到了遮罩；上面滚动区域完成后，可以新建两个scroll bar，一个水平，一个垂直，将这两个scroll bar加到scroll rect上面，此时已经能够拖动，但是会出现覆盖的问题。在scroll rect 上面增加imag组件和Mask组件（为啥加image？），这时候超出scroll rect的部分就会被遮住，就实现了遮罩的功能。,谢,谢,观看,
