Unity3D46UGUI开发设计及案例讲解.docx

《Unity3D46UGUI开发设计及案例讲解.docx》由会员分享，可在线阅读，更多相关《Unity3D46UGUI开发设计及案例讲解.docx（71页珍藏版）》请在三一办公上搜索。

1、Unity3D46UGUI开发设计及案例讲解Unity4.6 UGUI开发设计及案例讲解 1 Unity4.6跟以前的版本的最大区别首先在于在层级视图中点鼠标右键时出现的弹出菜单上，它把以前许多的菜单项进行了归类，比如cube sphere capsule.等整合到“3D Object”子菜单中，而且多出一个UI子菜单，它就是UI组件了。 当我们点击UI-Canvas时，就会在场景视图里创建一个画布，不过视图默认是3D显示方式，在Unity4.3以后，增加了一个2D与3D转换按钮，单击此按钮可在3D与2D显示样式之间转换。 UI是2D，为何还要3D呢，在做一些比较复杂的项目时，给用户看时是2D

2、，但我们编辑时，有时还是要用到3D模式的。 2 Canvas是画布，所有的UI组件就是绘制在这个画布里的，脱离画布，UI组件就不能用。 创建画布有两方式。一是通过菜单直接创建，二是直接创建一个UI组件时，会在创建这个组件的同时自动创建一个容纳该组件的画布出来。 不管那种方式创建出画布时，系统都会自动创建出一个EventSystem组件，这是UI的事件系统。 一Canvas组件 1 Canvas组件的三种渲染模式 在Canvas中有一Render Mode属性，它有3个选项，分别对应Canvas的三种渲染模式：Screen Space Overlay、Screen Space Camera、Wo

3、rld Space 2 Screen Space Overlay： 此模式不需要UI摄像机，UI将永远出现在所有摄像机的最前面，就好像是给摄像机贴上了一层膜。它的最大好处是不需要摄像机，不需要灯光。 3 Screen Space Camera： 此模式需要提供一个UICamera，它支持在UI前方显示3D模型与粒子系统等内容。 不过此模式下，就需在中给它挂一个摄像机。 当挂上摄像机并选择3D显示模式时，我们选中这个摄像机，并移动它，可发现画布会跟随摄像机的移动而移动，且Game视图显示的UI其位置与大小均保持不变，如下图所示： 这种模式，虽然UI的显示效果与第一种模式没有什么两样，然而，因在画

4、布与摄像机之间可放置三维物体或粒子系统，那么就可做出许多绚丽的特效。 这一项是设置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 Cam

5、era时，此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 Consta

6、nt Physical Size：固定物理尺寸 三Panel 面板 当我们初次创建Panel后，它会充满整个画布，如下左图： 此时通过拖动该面板控件的4个角点或四条边可调节面板的大小，如上右图 面板实际上就是一个容器，在其上可放置其他UI控件，当移动面板时，放在其中的UI组件就会跟随移动，这样我们可以更加合理与方便的移动与处理一组控件。也就是通过面板，我们可以把控件分组。一个功能完备的UI界面，往往会使用多个Panel容器控件。而且一个面板里还可套用其他面板。 当我们创建一个面板后，此面板会默认包含一个Image(Script)组件： 该组件中的Source Image是设置面板的图像。 Co

7、lor，可改变面板的颜色。 四EventSystem事件处理系统 当我们创建一个画布时，Unity系统会自动为我们创建一个EventSystem， 该事件处理器中有3个组件： 1 Event System：事件系统组件 2 Standalone Input Module：独立输入模块 3 Touch Input Module：触控输入模块 如果我们将Event System (Script) 前的勾去掉，则管理整个场景的事件系统则不起作用了，此时运行程序，如果有Button，单击它时就不会有反应了。 五Text控件 在UGUI中，我们所创建的所有UI控件，它们都有一个UI控件特有的Rect T

8、ransform组件： 我们所创建的三维物体，是Transform，而UI控件是Rect Transform，它是UI控件的矩形方位，其中的指的是UI控件在相应轴上的偏移量。 UI控件除了上面Rect Transform控件外，每个UI控件都还一个组件，它是画布渲染，一般不用管它，因它不能点开的。 Text控件的相关属性： Character: Font：字体 Font Style：字体样式 Font Size：字体大小 Line Spacing：行间距 Rich Text：“富”文本。例如：UGUI学习 Color：字体颜色 Paragraph: ：设置文本在Text框中的水平以及垂直方向上

9、的对齐方式。 ：水平方向上溢出时的处理方式。它有两种：Wrap隐藏；Overflow溢出。 ：垂直方向上溢出时的处理方式。它有两种：Truncate截断；Overflow溢出。 隐藏了或截断了，信息显示不全当然不好，但如果溢出又会破坏版面，想两全齐美的话，就可选中：，如果文字多时，它会自动缩小以适应文本框的大小，当选中该项后，在其下边会出现Min Size与Max Size两输入框，可设置字体变化时的最小与最大值。 六Image控件 Image控件除了两个公共的组件Rect Transform与Canvas Renderer外，默认的情况下就只有一个Image(Script)组件： Sourc

10、e Image是要显示的源图像，但如果我们把一个普通的图像往里拖放时，却不能成功放入，认真研究一下不难发现，放图像的框中，除了None表示还没有图像外，还有一个括号注释的Sprite，它的意思是精灵，可理解为它是贴图的一种特殊形式，它不具备其他功能，只给UI做显示图片用，故我们给它取了一个特殊的名字：精灵Sprite，所以在Unity4.6中，要想把一个图片赋给Image，则需要把该图片转换成精灵格式，转换方法为，在Project中选中要转换在图片，然后在Inspector检视图中，单击Texture Type右边的下拉框，在弹出的菜单中，第三项Editor GUI and Legacy GU

11、I是Unity4.6以前版本所用的，选中它时，图片不会被拉伸，现在几乎不用，是为了兼容，而第四项Sprite(2D and UI)，就是4.6版本所用的，它虽然比前一项适用的范围更窄，但其效率更高。我们选中该选项Sprite(2D and UI)并点击下方的Apply按钮就可把此图片转换成精灵格式，随后就可拖放到Image的Source Imag中了，如下图所示： 另：当我们把一个普通的图片转换成精灵格式后，在Project中，将发现该图片将包含一个子对象如图：，以后可以把一个图片划分为多个图片。 当我们把精灵图片赋给了Image后，其组件样式如下图： Color：可改变图片的颜色； Mate

12、rial：材质，这是针对一些复杂的贴图使用。 Image Type：贴图的类型，这是最重要的属性。 1） Simple：简单 Preserve Aspect：翻译过来是：维持外貌，选中该项后，该精灵图片的长宽比将保持原状，当调节图片的大小时，它将在保持原长宽比的前提下尽量铺展到图片框中，即不会拉伸或压缩以适应图片框而铺满。 Set Native Size：本来的大小。如果调整后大小变乱了，单击此按钮，可将此图片设置成本来的大小 2） Sliced：片 应用该种类型时，应先将贴图进行“九宫格”处理后才可以应用。否则其下会出现黄色的警告 This Image doesnt have a borde

13、r：这个图片没有边框，如下图： 怎样进行九宫格的处理呢？ 先在Project中选中该图片精灵，然后在其Inspector检视图中单击“Sprite Editor”按钮即可进入九宫格处理Sprinte Editor视窗中，如下两个图所示： 在这个Sprinte Editor视窗中，我们可以拖动图像四条边上的绿色线，调节九宫格的布局大小，调好后单击顶端的Apply按钮应用即可，回到Image的检视图中，我们将发现原来的警告消失了： 在Image Type为Sliced时，当对图像进行大小调节时，其中心会缩放以适合矩形，但边界会保持不变，这样当你显示不同尺度图像时，不用担心扩大与缩小时其轮廓会发生变

14、化。如果你只想要边界，不要中心，可以禁用Fill Center属性。 3） Tiled：平铺 图像保持其原始大小，重复多次填补空白。这往往用于做背景。 4） Filled：填充 图像填充满整个Image矩形区域，再结合Fill Amount属性，可做一些特效。 当图片类型为Filled时，其Image组件的属性视图如上图所示，其Fill Method选择框中有5种： Horizontal：水平填充，如果我们手动拖动Fill Amount滑块，就可看到图片在水平方向上的填充变化，如下图列所示： Vertical：垂直填充，同理当我们手动拖动Fill Amount滑块，就可看到图片在垂直方向上的填

15、充变化，如下图列所示： Radial 90：径向90度填充，同理当我们手动拖动Fill Amount滑块，就可看到图片在90度方向上的填充变化，如下图列所示，默认是以左下角为圆心，顺时针90度填充。 Radial 180：径向180度填充，同理当我们手动拖动Fill Amount滑块，就可看到图片在180度方向上的填充变化，如下图列所示，默认是以底边中点为圆心，顺时针180度填充。 Radial 300：径向180度填充，同理当我们手动拖动Fill Amount滑块，就可看到图片在360度方向上的填充变化，如下图列所示，默认是以图片的中心点为圆心，顺时针360度填充。 如果我们使用脚本来控制F

16、ill Amount的值，就可制造出这五种动画来，为特效的制作增加了一些有效的手段。 七Button控件 当我们创建一个Button后，其Inspector视图如下： 除了公共的Rect Transform与Canvas Renderer两个UI组件外，Button还默认拥有Image(Script)与Button(Script)两个组件。 组件Image(Script)里的属性与前面所讲的Image控件的Image(Script)组件里的属性是一样的，例如Source Image的图像类型仍为一个Sprite，通过为此赋值，就可改变此Button的外观了，如果你为属性赋值了图片精灵，那么此B

17、utton的外观就与此精灵一致了。 Button是一个复合控件，它中还包含一个Text子控件：，通过此子控件可设置Button上显示的文字的内容、字体、样式、字大小、颜色等，与前面所讲的Text控件是一样的。 Button(Script)组件里的属性： 1 Interactable：是否启用 如果你把其后的对勾去交互性了。 去掉，此Button在运行时将点不动，即失2 Transition：过渡方式 它有四个选项1） None：没有过渡方式。 ，默认为Color Tint 2） Color Tint：颜色过渡 Target Graphic：目标图像 Normal Color：正常颜色 High

18、lighted 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、Press

19、ed Trigger、Disabled Trigger等属性是不能赋值的，它们是自动生成的。 当单击“Auto Generate Animation”按钮时，系统会为你打开一个New Animation Contoller窗口，要求你选择动画存放的路径，所以我们要先在Project中新建一个文件夹，专门用来存放动画，比如此文件夹取名为_Animator，此时就可选中此文件夹，并给此动画取名，创建成功后，会在Project中的_Animator文件夹中可看到刚才创建的动画文件，且在这个Button的Inspector检视图中可看到会为此Button增加一个Animator组件： 此组件的Cont

20、roller的属性值就为刚才创建的动画，双击它即可打开该动画的Animator窗口，其中记录的有四个动画：Normal、Highlighted、Pressed、Disabled，如下图所示： 其实这个动画还没有，要做出这个动画，需先选中这个Button，然后点击系统菜单Window-Animation，就会打开一个Animation动画编辑窗口： 我们以此工具先来做一个简单的帧动画，在帧数框上单击一下，原来的0便会选中，此时输入数字1，表示对第1帧做动画，此时的录制按钮以及系统的播放按钮和动画编辑窗中的帧数线均会变红，表示现在处于记录模式，你所做的操作会记录成动画的动作，如下图所示： 假设我们

21、想使它在第一帧时，该按钮变大一点，我们就在Inspector中的Rect Transformr的Scale中操作，比如在x与y轴向上均增大到原来的1.05倍，如下图所示： 同理，当第一帧设置完后，我们在帧数框中直接输入数字2，就可编辑第2帧的动画了，比如在x与y轴向上均增大到原来的1.1倍，再继续设置第3帧在x与y轴向上均增大到原来的1.15倍，假设我们现在就只做这3帧动画，已经完成了，那么我们点击一下那个处于红色晕光状态下的录制按钮，结束录制，再保存一下场景，就会发现在Project视图中_Animator/Button1下会增加4个动画文件Disabled、Highlighted、Norm

22、al、Pressed，这四个动画剪辑就是源于我们刚才的录制，虽然刚才我们只录制了一次，而系统会为我们自动产生这四个动画文件。 动画成功制作出来了，可运行起来看看效果了，但当我们运行起来时，就会发现那个按钮会自动无限次地播放那个动画，看起来就是不断地颤动，那么是什么原因呢？ 我们在Project视图中，选中任意的一个动画剪辑比如Disabled，在其Inspector视图中可看到它的Loop Time属性是处于选中状态，意思是循环播放，那么我们把它去掉即可。 而这里，如果我们只去掉Disabled的Loop Time还是不行的，当然把这4个动画剪辑的Loop Time全去掉是能成功的，那么到底是

23、那个剪辑在起作用呢？实际上是Normal，所以我们只需去掉Normal的Loop Time即可。其原因请看下列叙述。 我们先在Hierarchy视图中选中那个做了动画的Button，再单击系统菜单Window-Animation，就会打开刚才的动画编辑窗口： 单击其中的Normal框，会出现下拉选择： 从这下拉选择列表中可看出Normal前边有个勾，这说明我们刚才所做的动画是Normal。那么根据此原理，我们可分别做出鼠标经过该Button的Highlighted、该Button按下的Pressed、以及该Button失效的Disabled动画了。 3 Navigation None：没有 H

24、orizontal：水平 Vertical：垂直 Automatic：自动 Explicit：明确的 4 Visualize：显现 5 On Click 在Button组件的下方有一个OnClick选项，这就是Button控件处理事件的重要机制。 OnClick意思为当该按钮被点击时所发生的事件，而此事件在UI中是委托机制，要理解这个机制，我们先做一些准备工作。 1） 建立脚本文件 假设此脚本文件被命名为ButtonEvent using UnityEngine; using System.Collections; public class ButtonEvent : MonoBehaviou

25、r / 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！”); 此时整个脚本文件

26、的内容如下： 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，并把上面的脚本作为组

27、件挂到这个空对象上，那么这个对象是具有事件处理能力的object了。 3） 为某个按钮添加其事件处理的委托对象 我们在层级面板中选中要产生单击事件的按钮比如Button1，然后拖动其Inspector面板右边的滚动条，使其Button(Script)组件下的OnClick显现出来： 此时其事件列表为空：List is Empty，我们单击其下的“+”按钮为其添加一个事件： 此时事件虽被添加了，但其委托的事件处理对象为空：None(Object)，当然连事件处理对象都没有，其事件处理方法自然也就为空：No Function。 那么怎样委托事件处理对象与选择事件处理方法呢？ 很简单，我们把层级面板

28、中刚才建好的并已挂上了事件处理脚本的Event对象拖放到None(Object)框中即可，此时此框中显示的内容即为委托的此事件处理对象的名称了：Event，有了事件处理对象了，然后使用该对象的什么方法来处理事件呢？这还需我们给它指定，其方法是单击显示内容为No Function的那个事件方法框，会弹出菜单列表： 当我们的鼠标指向最后一项ButtonEvent时会继续展开，其中就有我们在脚本中编写的事件处理方法：DiaplayInfo，选中它即可，这样就完成了事件的委托，当我们运行时，单击那个Button，就会在后台里打印出“点击了Button！”。 一个按钮可以有多个处理事件。 下面我们采用另

29、一种显示信息的方式。 我们先在场景中的画布上增加一个Text控件，同时设置好相关的显示样式，然后在那个脚本中增加一个公共变量：public Text Txt_Info，回到场景视图中，在层级面板中选中挂有该脚本的对象Event，在其Inspector视图的ButtonEvent脚本组件里就会出现刚才增设的公共变量名：Txt_Info，我们可把增加的那个Text拖到此处即可为此变量赋值了，接下来我们就可通过脚本修改这个文本框控件的Text属性，让打印在后台的信息显示在这个文本框上了。其脚本文件内容如下： using UnityEngine; using System.Collections; u

30、sing 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增加一个单击事件： 再次运行程序，单击

31、按钮时，后台输出“点击了Button！”的同时，场景中的Text文本框的内容内变为：Button被点击了！。 八 Anchor锚点与屏幕自适应 每个控件都有下Anchor的属性，其作用是当改变屏幕分辨率的时候，当前控件做如何的位置变换。即控件的屏幕自适应。 当我们创建一个Canvas后，在层级视图中选中它后，我们将发现这个Canvas在场景视图中的样式如下图所示： 这个Canvas除四边、四个角点外，其中心还有一个蓝色的小圆圈，这个小圆圈即为这个Canvas的中心点。 如果此时我们在此Canvas上创建一个Button，如下图所示： Button同理也有四条边、四个角点、一个中心点，此时我们选

32、中Button，在Canvas中心点位置会出现一个小雪花图案，这就是Button在Canvas上的锚点，可用鼠标拖动它，且拖动的过程中会实时显示此锚点距上、下、左、右的百分比，如下图所示： 而且在Button的Inspector面板中，单击Rect Transform中Anchor presets锚点调整窗，如下图所示： 按钮，会打开一个如果我们单击 时，其锚点就会跑到Canvas的右上角，如下图所示： 同理单击其他位置时，也就把锚点调整到相应的位置上，即可把此锚点调整到画布的中心点上、四个角上、四条边的中点上。 以上是锚点整体移位。实际上，我们还可以拖动小雪花中的任意一个花瓣，使其分散成四个

33、锚点，如下图所示： 当我们单击这个窗中的最右边或最下边中一些按钮可将锚点分散在两边或上下或四个角点上。 原来这个雪花状的锚点是由四个锚点组成的复合体。 说了这么多，那它到底有什么用途呢？ 两个字，定位。 如图：，当屏幕大小发生改变时，Button的四个角点与对应的4个锚点的距离会保持不变，从而保证布局不会随着屏幕大小或者分辨率的改变而改变，可相对有效地保证布局不会混乱，以达到屏幕自适应的目的。 但要注意，控件的锚点总是相对于自己的上一级来定义的。例如，我们再在这个Canmas中创建一个Panel并调小它的大小，在Panel中创建一个Text，我们去调节这个Text的锚点时我们将会发现这个锚点总

34、是相对于Text的上一级Panel来定义与变换位置的。 九、应用：登录界面 在画布上： 1、 两个Text控件，分别命名为：Tex_UserName与txt_Password，其Text值分别为“用户名称：”与“登录密码：” 2、 两个InputField控件，分别命名为：Inp_UserName与Inp_Password。 这两个输入域控件是前面还没有介绍的新控件，在其层级Hierarchy视图将其展开，可发现它也为一个复合控件，在主控件上还包含两个子控件，一个为Placeholder与Text，其Text就是前面所介绍的文本控件，程序运行时用户所输入的内容就保存在这个Text中，而Plac

35、eholder是占位符，它表示程序运行时在用户还没有输入内容时显示给用户的提示信息，在这里我们把它设置为“请输入”，设置方法是在层级视图中展开这个InputField控件，选中其子控件Placeholder，在Inspecter视图中可发现其Text(Sript)组件，修改其值为“请输入”即可，如下图所示： InputField控件与其他控件一样，也有Image(Script)组件，自身组件InputField(script)中也有变换Transition属性，其默认值也为颜色变换，除此之外，它有一个重要的属性：ContentType，有10个选项，如下图： 1) Standard：标准的 2

36、) 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：密码，这样程序就可启用其自动验证功能，例如在用户名称输入框中如果你输入的不是字母或数字则不能输入进去，第二个密码框中输入密码时它会

37、默认以*号占位输入的密码。 3、创建一个Text，用于显示登录是否成功等提示信息用，在其Inspector视图中，去掉其默认显示的内容，即让其才开始运行时不显示任何内容，并把其Best Fit勾选上，让其提示信息自适应文本框的大小： 4、最后创建一个提交按钮，其整个界面如下图所示： 5、创建脚本： using UnityEngine; using System.Collections; using UnityEngine.UI; public class LogonSystem : MonoBehaviour public Text Txt_DisplayInfo; public InputF

38、ield 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 Txt_DisplayInfo.text=用户名称或登录密码错误 请重新输入!;

39、 private bool CheckLogonInfo(string strUserName,string strPW) bool ReturnFlag = false; if (strUserName != null & strPW != null) if(strUserName.Trim.Equals(Admin) & strPW.Trim.Equals(123456)/两个输入框中的内容去掉前后空格，如果用户名称为Admin、登录密码为123456时，则表示登录，将ReturnFlag标记为真true。 ReturnFlag=true; return ReturnFlag; 脚本创建好

40、了后，我们在Hierarchy中创建一个空对象，命名为_LogonSystemEvent，对把这个脚本挂在它身上，而且在其Inspector视图中，为其3个公共变量赋值： 运行程序，如果用户名称或密码错误，提示信息框中会显示：用户名称或登录密码错误 请重新输入!，否则显示：登录成功！，如下图所示： 十、Toggle控件动态事件 Toggle：开关，当我们创建它后，可发现它也为一个复合型控件，它有Background与Label两个子控件，而Background控件中还有一个Checkmark子子控件，如果我们将其拖散Background控件是一个图像控件，而其子控件Checkmark可清楚地看

41、见，也是一个图像控件，其Label是一个文本框，它们与我们所讲的控件是一致的，我们通过改变它们所拥有的属性值，即可改变Toggle的外观，如颜色、字体等等。下面来看看Toggle的一些重要属性。 1 Is On：目前是处于开还是关。 当我们运行起来，用鼠标点击那个Toggle按钮，将发现其中的对勾符号会在出现与不出现之间切换，同时与之相对应的，在其Inspector面板中，属性In On后面的对勾也在勾选与不勾选之间切换。 2 Graphic：图像 实际上，用鼠标点击那个Toggle按钮，其对勾符号会在出现与不出现之间切换，它的原理就是控制那个对勾图像出现与不出现而实现的，这个Graphic就

42、是设置这个属性值的，你可点击最后那个设置按钮，在出现的窗体中选择另外的图像如Background，同时将中的Target Graphic的值设为Checkmark，即将它们两者的值互换，将发现，当我们点击Toggle按钮时，其对勾不会消失与出现，而是背景消失与出现。这样做虽然没有多大实用价值，但说明Unity可以方便地控制这个按钮的外观。 3 Group：组 在Hierarchy面板中，选中我们刚才创建的Toggle，然后按键盘Ctrl+D两次，就可复制出两个Toggle了，并在场景视图中拖动它们的位置，使它们都可见，运行，我们将发现这个三个都可选中，即它们是复选框。 那么怎样做出单选的效果呢

43、？ 前面所创建的按钮是独立的，互不关联，当然就可独自地选与不选。如果我们把这三个组成一个组，让它们关联，就可做成单选了。 从Group属性可看出它需要一个ToggleGroup。 我们先在画布上建立一个空对象，并命名为_ToggleGroup，在其Inspector中单击这个按钮，为其添加组件，在弹出的菜单中选择UI，在后续弹出菜单中 选择“Toggle Group”，这样我们就为此对象添加了ToggleGroup组件了。 在Hierarchy中同时选中要成组的那3个Toggle，把已添加了ToggleGroup组件的_ToggleGroup拖到Inspector的中即可，这样我们便把这3个T

44、oggle成组了，于是它们3个就只能单选其中一个了。 为了更完美，首先调整空对象_ToggleGroup的位置与大小，让其包含那3个Toggle控件，然后在Hierarchy中，把3个Toggle选中并拖到_ToggleGroup中成为子物体，这样在逻辑上与外观上均完备，且移动父物体时子物体也会跟着移动。 4 Toggle控件动态事件On Value Changed(Boolean) 这是Toggle的事件处理，它与Button的事件有所不同，下面来看看怎样给Toggle添加事件。 我们把Toggle的标签改成装备名称，再在场景中增加一个显示选取的装备名的文本框： 编写脚本： using Un

45、ityEngine; using System.Collections; using UnityEngine.UI; public class _ToggleEvent : MonoBehaviour public Text Display; private string info; / Use this for initialization void Start public void Toggle1(bool isclik) if (isclik) info=屠龙宝刀; Display.text=info; public void Toggle2(bool isclik) if (iscl

46、ik) info=倚天剑; Display.text=info; public void Toggle3(bool isclik) if (isclik) info=降龙十八掌; Display.text=info; 在Canvas中创建一个空对象，把此脚本挂接到此对象上，并把场景中的Text赋给public Text Display这个变量，然后分别选中那3个Toggle，在其检视图中单击事件下的“+”号：，单击后就为该控件添加了事件，如下图： 然而，事件要委托给一对象，现在还没有，显示的是，此时把已经挂接上了脚本的那个空对象拖放到此处，便委托事件处理对象了，如下图所示： 有了事件处理对象，但还没有指定方法，此时单击会出现下图所示的菜单： 鼠标指向我们为此对象所挂的脚本名_ToggleEvent时就会继续展开一个菜单，其中就有我们在此脚本中编写的方法Toggle1(bool)、Toggle2(bool)、Toggle3(bool)。这个菜单与Button的有所不同了，Button的如下图所示： 比较这两个菜单可发现Toggle多了上面的那部分：