Unity UGUI开发设计及案例讲解

Unity——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组件
1 Canvas组件的三种渲染模式
在Canvas中有一Render Mode属性，它有3个选项，分别对应Canvas的三种渲染模式：Screen Space – Overlay、Screen Space – Camera、World Space

2 Screen Space – Overlay：

 
此模式不需要UI摄像机，UI将永远出现在所有摄像机的最前面（即在某个UI的前面是不能再添加其他组件的），就好像是给摄像机贴上了一层膜。它的最大好处是不需要摄像机，不需要灯光。

3 Screen Space – Camera：

 
此模式需要提供一个UICamera，它支持在UI前方显示3D模型与粒子系统等内容。
    不过此模式下，就需在 中给它挂一个摄像机。

    当挂上摄像机并选择3D显示模式时，我们选中这个摄像机，并移动它，可发现画布会跟随摄像机的移动而移动，且Game视图显示的UI其位置与大小均保持不变，如下图所示：

     
    这种模式，虽然UI的显示效果与第一种模式没有什么两样，然而，因在画布与摄像机之间可放置三维物体或粒子系统，那么就可做出许多绚丽的特效。
      这一项是设置Canvas与摄像机之间的距离，其值越大，可在画布与摄像机之间放很多的三维物体，默认是100，建议设置为100与200之间即可。
4 World 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个选项：
1 Constan Pixel Size：固定像素尺寸
 
2 Scale With Screen Size：以宽度为标准缩放（屏幕自适应特性）
 
2.1  Reference Resolution：参考分辨率
    在不同分辨率下，控件显示的大小有所不同，这要根据实际情况综合考虑。
2.2  Screen Match Mode：屏幕匹配模式
Match Width Or Heigt：匹配宽度或高度
    此模式下会出现Match调节滑杆，调节其控块位置，也会影响UI元素显示的大小。
Expand：扩展
Shrink：收缩


3 Constant 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度填充。
     
Radial 300：径向180度填充，同理当我们手动拖动Fill Amount滑块，就可看到图片在360度方向上的填充变化（动画），如下图列所示，默认是以图片的中心点为圆心，顺时针360度填充。
     


如果我们使用脚本来控制Fill Amount的值，就可制造出这五种动画来，为特效的制作增加了一些有效的手段。


七．Button控件
当我们创建一个Button后，其Inspector视图如下：
 
除了公共的Rect Transform与Canvas Renderer两个UI组件外，Button还默认拥有Image(Script)与Button(Script)两个组件。
组件Image(Script)里的属性与前面所讲的Image控件的Image(Script)组件里的属性是一样的，例如Source Image的图像类型仍为一个Sprite（精灵），通过为此赋值，就可改变此Button的外观了，如果你为属性赋值了图片精灵，那么此Button的外观就与此精灵一致了。
Button是一个复合控件，它中还包含一个Text子控件： ，通过此子控件可设置Button上显示的文字的内容、字体、样式、字大小、颜色等，与前面所讲的Text控件是一样的。
Button(Script)组件里的属性：
 
1 Interactable：是否启用（交互性）
如果你把其后的对勾 去掉，此Button在运行时将点不动，即失去交互性了。
2 Transition：过渡方式
它有四个选项 ，默认为Color Tint（颜色色彩）
1） None：没有过渡方式。
2） Color Tint：颜色过渡    
Target Graphic：目标图像
Normal Color：正常颜色
Highlighted Color：经过高亮色
Pressed Color：点击色
Disabled Color：禁用色
Color Multiplier：颜色倍数
Fade Duration：变化过程时间
3） Sprite Swap：精灵交换。需要使用相同功能不同状态的贴图。
 
Target Graphic：目标图像
Highlighted Sprite：鼠标经过时的贴图
Pressed Sprite：点击时的贴图
Disabled Sprite：禁用时的贴图


4） Animation：动画。最复杂，效果最绚丽。
 
其中的Normal Trigger、Highlighted Trigger、Pressed Trigger、Disabled Trigger等属性是不能赋值的，它们是自动生成的。
当单击“Auto Generate Animation”（自动生成动画）按钮时，系统会为你打开一个New Animation Contoller（新建动画控制器）窗口，要求你选择动画存放的路径，所以我们要先在Project中新建一个文件夹，专门用来存放动画，比如此文件夹取名为_Animator，此时就可选中此文件夹，并给此动画取名（动画的名默认为该Button的名字，当然其扩展名为controller），创建成功后，会在Project中的_Animator文件夹中可看到刚才创建的动画文件（动画的名默认为该Button的名字），且在这个Button的Inspector检视图中可看到会为此Button增加一个Animator组件：
 
此组件的Controller的属性值就为刚才创建的动画，双击它即可打开该动画的Animator窗口，其中记录的有四个动画：Normal、Highlighted、Pressed、Disabled（通常状态、鼠标经过状态、按下状态、失效状态），如下图所示：
 
其实这个动画还没有，要做出这个动画，需先选中这个Button，然后点击系统菜单Window->Animation（注意不是Animator），就会打开一个Animation动画编辑窗口：
 
我们以此工具先来做一个简单的帧动画，在帧数框上单击一下，原来的0便会选中，此时输入数字1，表示对第1帧做动画，此时的录制按钮 以及系统的播放按钮 和动画编辑窗中的帧数线均会变红，表示现在处于记录模式，你所做的操作会记录成动画的动作，如下图所示：
 
假设我们想使它在第一帧时，该按钮变大一点，我们就在Inspector中的Rect Transformr的Scale中操作，比如在x与y轴向上均增大到原来的1.05倍（因UI是在x-y平面上显示，故不需设置Z值），如下图所示：
 
同理，当第一帧设置完后，我们在帧数框中直接输入数字2，就可编辑第2帧的动画了，比如在x与y轴向上均增大到原来的1.1倍，再继续设置第3帧在x与y轴向上均增大到原来的1.15倍，假设我们现在就只做这3帧动画，已经完成了，那么我们点击一下那个处于红色晕光状态下的录制按钮 ，结束录制，再保存一下场景，就会发现在Project视图中_Animator/Button1下会增加4个动画文件Disabled、Highlighted、Normal、Pressed（如果不保存将看不到这4个动画文件），这四个动画剪辑就是源于我们刚才的录制，虽然刚才我们只录制了一次，而系统会为我们自动产生这四个动画文件。
动画成功制作出来了，可运行起来看看效果了，但当我们运行起来时，就会发现那个按钮会自动无限次地播放那个动画，看起来就是不断地颤动，那么是什么原因呢？
我们在Project视图中，选中任意的一个动画剪辑比如Disabled，在其Inspector视图中可看到它的Loop Time属性是处于选中状态，意思是循环播放，那么我们把它去掉即可。
 
而这里，如果我们只去掉Disabled的Loop Time还是不行的，当然把这4个动画剪辑的Loop Time全去掉是能成功的，那么到底是那个剪辑在起作用呢？实际上是Normal，所以我们只需去掉Normal的Loop Time即可。其原因请看下列叙述。
我们先在Hierarchy视图中选中那个做了动画的Button，再单击系统菜单Window->Animation（注意不是Animator），就会打开刚才的动画编辑窗口：
 
单击其中的Normal框，会出现下拉选择：
 
    从这下拉选择列表中可看出Normal前边有个勾，这说明我们刚才所做的动画是Normal。那么根据此原理，我们可分别做出鼠标经过该Button的Highlighted、该Button按下的Pressed、以及该Button失效的Disabled动画了。
3 Navigation
 
None：没有
Horizontal：水平
Vertical：垂直
Automatic：自动
Explicit：明确的
4 Visualize：显现
5 On Click()
在Button组件的下方有一个OnClick()选项，这就是Button控件处理事件的重要机制。
OnClick()意思为当该按钮被点击时所发生的事件，而此事件在UI中是委托机制，要理解这个机制，我们先做一些准备工作。
1） 建立脚本文件
假设此脚本文件被命名为ButtonEvent
using UnityEngine;
using System.Collections;
public class ButtonEvent : MonoBehaviour {
// Use this for initialization
void Start () {
}

// Update is called once per frame
void Update () {
}
}
这是系统默认的文件内容，现在我们要把它应用于UI，故必须引入UI的命名空间，即脚本的首部增加一行：using UnityEngine.UI;。
假设我们单击一个按钮后，让系统在后台显示一句话：点击了Button！，那么我们可以在此脚本中增加一个方法，该方法为公共的public，假设方法名为DisplayInfo：
Public void DisplayInfo(){
   Print(“点击了Button！”);
}
此时整个脚本文件的内容如下：
using UnityEngine;
using System.Collections;
using UnityEngine.UI;
public class ButtonEvent : MonoBehaviour {
// Use this for initialization
void Start () {
}


Public void DisplayInfo(){
   Print(“点击了Button！”);
}


// Update is called once per frame
void Update () {
}
}


2） 在Hierarchy视图的Canvas中创建一个空对象，并假设命名为Event，并把上面的脚本作为组件挂到这个空对象上，那么这个对象是具有事件处理能力的object了。
3） 为某个按钮添加其事件处理的委托对象
我们在层级面板中选中要产生单击事件的按钮比如Button1，然后拖动其Inspector面板右边的滚动条，使其Button(Script)组件下的OnClick()显现出来：
 
此时其事件列表为空：List is Empty，我们单击其下的“+”按钮为其添加一个事件：
 
此时事件虽被添加了，但其委托的事件处理对象为空：None(Object)，当然连事件处理对象都没有，其事件处理方法自然也就为空：No Function。（Runtime Only此项我们可先不管它，以后用到时再讲）
那么怎样委托事件处理对象与选择事件处理方法呢？
很简单，我们把层级面板中刚才建好的并已挂上了事件处理脚本的Event对象拖放到None(Object)框中即可，此时此框中显示的内容即为委托的此事件处理对象的名称了：Event，有了事件处理对象了，然后使用该对象的什么方法来处理事件呢？这还需我们给它指定，其方法是单击显示内容为No Function的那个事件方法框，会弹出菜单列表：
 
当我们的鼠标指向最后一项ButtonEvent时会继续展开，其中就有我们在脚本中编写的事件处理方法：DiaplayInfo()，选中它即可，这样就完成了事件的委托，当我们运行时，单击那个Button，就会在后台里打印出“点击了Button！”。
一个按钮可以有多个处理事件。
下面我们采用另一种显示信息的方式。
我们先在场景中的画布上增加一个Text控件，同时设置好相关的显示样式，然后在那个脚本中增加一个公共变量：public Text Txt_Info，回到场景视图中，在层级面板中选中挂有该脚本的对象Event，在其Inspector视图的ButtonEvent脚本组件里就会出现刚才增设的公共变量名：Txt_Info（脚本需保存且界面需刷新），我们可把增加的那个Text拖到此处即可为此变量赋值了，接下来我们就可通过脚本修改这个文本框控件的Text属性，让打印在后台的信息显示在这个文本框上了。其脚本文件内容如下：
using UnityEngine;
using System.Collections;
using UnityEngine.UI;


public class ButtonEvent : MonoBehaviour {
public Text Txt_Info;
// Use this for initialization
void Start () {
}

// Update is called once per frame
void Update () {
}


public void DisplayInfo(){
    print ("点击了Button！");
}
public void DisplayInfoText (){
    Txt_Info.text="Button被点击！";
}
}
然后再给那个Button增加一个单击事件（委托的事件对象仍为Event，方法则设为DisplayInfoText ()）：
 
再次运行程序，单击按钮时，后台输出“点击了Button！”的同时，场景中的Text文本框的内容内变为：Button被点击了！。
八 Anchor锚点与屏幕自适应
每个控件都有下Anchor的属性，其作用是当改变屏幕分辨率的时候，当前控件做如何的位置变换。即控件的屏幕自适应。
当我们创建一个Canvas后，在层级视图中选中它后，我们将发现这个Canvas在场景视图中的样式如下图所示：
 
这个Canvas除四边、四个角点外，其中心还有一个蓝色的小圆圈，这个小圆圈即为这个Canvas的中心点。
如果此时我们在此Canvas上创建一个Button，如下图所示：
 
Button同理也有四条边、四个角点、一个中心点，此时我们选中Button，在Canvas中心点位置会出现一个小雪花图案 ，这就是Button在Canvas上的锚点，可用鼠标拖动它，且拖动的过程中会实时显示此锚点距上、下、左、右的百分比，如下图所示：
 
而且在Button的Inspector面板中，单击Rect Transform中 按钮，会打开一个Anchor presets锚点调整窗，如下图所示：
 
如果我们单击  时，其锚点就会跑到Canvas的右上角，如下图所示：
 
同理单击其他位置时，也就把锚点调整到相应的位置上，即可把此锚点调整到画布的中心点上、四个角上、四条边的中点上。
以上是锚点整体移位。实际上，我们还可以拖动小雪花中的任意一个花瓣，使其分散成四个锚点，如下图所示：
 
当我们单击 这个窗中的最右边或最下边中一些按钮可将锚点分散在两边或上下或四个角点上。
原来这个雪花状的锚点是由四个锚点组成的复合体。
说了这么多，那它到底有什么用途呢？
两个字，定位。
如图： ，当屏幕大小发生改变时，Button的四个角点与对应的4个锚点的距离会保持不变，从而保证布局不会随着屏幕大小或者分辨率的改变而改变，可相对有效地保证布局不会混乱，以达到屏幕自适应的目的。
但要注意，控件的锚点总是相对于自己的上一级来定义的。例如，我们再在这个Canmas中创建一个Panel并调小它的大小，在Panel中创建一个Text，我们去调节这个Text的锚点时我们将会发现这个锚点总是相对于Text的上一级Panel来定义与变换位置的。
九、应用：登录界面
在画布上：
1、 两个Text控件，分别命名为：Tex_UserName与txt_Password，其Text值分别为“用户名称：”与“登录密码：”
2、 两个InputField控件，分别命名为：Inp_UserName与Inp_Password。
这两个输入域控件是前面还没有介绍的新控件，在其层级Hierarchy视图将其展开 ，可发现它也为一个复合控件，在主控件上还包含两个子控件，一个为Placeholder与Text，其Text就是前面所介绍的文本控件，程序运行时用户所输入的内容就保存在这个Text中，而Placeholder是占位符，它表示程序运行时在用户还没有输入内容时显示给用户的提示信息，在这里我们把它设置为“请输入…”，设置方法是在层级视图中展开这个InputField控件，选中其子控件Placeholder，在Inspecter视图中可发现其Text(Sript)组件，修改其值为“请输入…”即可，如下图所示：
 
InputField控件与其他控件一样，也有Image(Script)组件，自身组件InputField(script)中也有变换Transition属性，其默认值也为颜色变换，除此之外，它有一个重要的属性：ContentType（内容类型），有10个选项，如下图：
 
1) Standard：标准的
2) Autocorrected：自动修正
3) Integer Number：整数
4) Decimal Number：十进制小数
5) Alphanumeric：字母数字
6) Name：人名
7) Email Address：邮箱
8) Password：密码
9) Pin：
10) Custom：定制的
据此，我们把第一个InputField的内容类型设为第5个Alphanumeric：字母数字，第二个InputField的内容类型设为第8个Password：密码，这样程序就可启用其自动验证功能，例如在用户名称输入框中如果你输入的不是字母或数字则不能输入进去，第二个密码框中输入密码时它会默认以*号占位输入的密码。
    3、创建一个Text，用于显示登录是否成功等提示信息用，在其Inspector视图中，去掉其默认显示的内容，即让其才开始运行时不显示任何内容，并把其Best Fit勾选上，让其提示信息自适应文本框的大小：
 
4、最后创建一个提交按钮，其整个界面如下图所示：
 
5、创建脚本（红色部分为新增内容）：
using UnityEngine;
using System.Collections;
using UnityEngine.UI;


public class LogonSystem : MonoBehaviour {
public Text Txt_DisplayInfo;
public InputField Inp_Username;
public InputField Inp_Password;


// Use this for initialization
void Start () {

}



public void DisplayInfo(){
string strUserName = Inp_Username.text;
string strPW = Inp_Password.text;
if(CheckLogonInfo(strUserName,strPW)){
    Txt_DisplayInfo.text="登录成功!";
}else{