三开发设计及案例讲解

Unity4.6UGUI开发设计及案例讲解Unity4.6跟以前的版本的最大区别一方面在于在层级视图中点鼠标右键时出现的弹出菜单上，它把以前许多的菜单项进行了归类，比如cubespherecapsule….等整合到“3DObject”子菜单中，并且多余一个UI子菜单，它就是UI组件了。

当我们点击UI->Canvas时，就会在场景视图里创建一个画布，但是视图默认是3D显示方式，在Unity4.3以后，增长了一个2D与3D转换按钮，单击此按钮可在3D与2D显示样式之间转换。

UI是2D，为什么还要3D呢，在做一些比较复杂的项目时，给用户看时是2D，但我们编辑时，有时还是要用到3D模式的。Canvas是画布，所有的UI组件就是绘制在这个画布里的，脱离画布，UI组件就不能用。

创建画布有两方式。一是通过菜单直接创建，二是直接创建一个UI组件时，会在创建这个组件的同时自动创建一个容纳该组件的画布出来。

不管那种方式创建出画布时，系统都会自动创建出一个EventSystem组件，这是UI的事件系统。一．Canvas组件Canvas组件的三种渲染模式在Canvas中有一RenderMode属性，它有3个选项，分别相应Canvas的三种渲染模式：ScreenSpace–Overlay、ScreenSpace–Camera、WorldSpaceScreenSpace–Overlay：

此模式不需要UI摄像机，UI将永远出现在所有摄像机的最前面（即在某个UI的前面是不能再添加其他组件的），就仿佛是给摄像机贴上了一层膜。它的最大好处是不需要摄像机，不需要灯光。ScreenSpace–Camera：此模式需要提供一个UICamera，它支持在UI前方显示3D模型与粒子系统等内容。

但是此模式下，就需在中给它挂一个摄像机。

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

这种模式，虽然UI的显示效果与第一种模式没有什么两样，然而，因在画布与摄像机之间可放置三维物体或粒子系统，那么就可做出许多绚丽的特效。这一项是设立Canvas与摄像机之间的距离，其值越大，可在画布与摄像机之间放很多的三维物体，默认是100，建议设立为100与200之间即可。WorldSpace：这个就是完全3D的UI，也就是把UI也当成3D对象，如摄像机离UI远了，其显示就会变小，近了就会变大。其它一些属性：当有多个画布时，决定谁在前，谁先显示。二．CanvasScaler画布的大小UiScaleMode（大小模式）当我们把Canvas中的RenderMode设为ScreenSpace–Overlay或ScreenSpace–Camera时，此CanvasScale中的UiScaleMode（大小模式）就可用，且其中有3个选项：ConstanPixelSize：固定像素尺寸ScaleWithScreenSize：以宽度为标准缩放（屏幕自适应特性）ReferenceResolution：参考分辨率在不同分辨率下，控件显示的大小有所不同，这要根据实际情况综合考虑。ScreenMatchMode：屏幕匹配模式MatchWidthOrHeigt：匹配宽度或高度此模式下会出现Match调节滑杆，调节其控块位置，也会影响UI元素显示的大小。Expand：扩展Shrink：收缩ConstantPhysicalSize：固定物理尺寸三．Panel面板当我们初次创建Panel后，它会充满整个画布，如下左图：此时通过拖动该面板控件的4个角点或四条边可调节面板的大小，如上右图面板事实上就是一个容器，在其上可放置其他UI控件，当移动面板时，放在其中的UI组件就会跟随移动，这样我们可以更加合理与方便的移动与解决一组控件。也就是通过面板，我们可以把控件分组。一个功能完备的UI界面，往往会使用多个Panel容器控件。并且一个面板里还可套用其他面板。当我们创建一个面板后，此面板会默认包含一个Image(Script)组件：该组件中的SourceImage是设立面板的图像。Color，可改变面板的颜色。四．EventSystem事件解决系统当我们创建一个画布时，Unity系统会自动为我们创建一个EventSystem，该事件解决器中有3个组件：EventSystem：事件系统组件（事件）StandaloneInputModule：独立输入模块（输入）TouchInputModule：触控输入模块（触控）假如我们将EventSystem(Script)前的勾去掉，则管理整个场景的事件系统则不起作用了，此时运营程序，假如有Button，单击它时就不会有反映了。五．Text控件在UGUI中，我们所创建的所有UI控件，它们都有一个UI控件特有的RectTransform组件：我们所创建的三维物体，是Transform，而UI控件是RectTransform，它是UI控件的矩形方位，其中的指的是UI控件在相应轴上的偏移量。UI控件除了上面RectTransform控件外，每个UI控件都还一个组件，它是画布渲染，一般不用管它，因它不能点开的。Text控件的相关属性：Character:（字符）Font：字体FontStyle：字体样式FontSize：字体大小LineSpacing：行间距（多行）RichText：“富”文本。例如：U<b>G</b>U</i>I<volor=”yellow”>学</color>习Color：字体颜色Paragraph:（段落）：设立文本在Text框中的水平以及垂直方向上的对齐方式。：水平方向上溢出时的解决方式。它有两种：Wrap隐藏；Overflow溢出。：垂直方向上溢出时的解决方式。它有两种：Truncate截断；Overflow溢出。隐藏了或截断了，信息显示不全当然不好，但假如溢出又会破坏版面，想两全齐美的话，就可选中：，假如文字多时，它会自动缩小以适应文本框的大小，当选中该项后，在其下边会出现MinSize与MaxSize两输入框，可设立字体变化时的最小与最大值。六．Image控件Image控件除了两个公共的组件RectTransform与CanvasRenderer外，默认的情况下就只有一个Image(Script)组件：SourceImage是要显示的源图像，但假如我们把一个普通的图像往里拖放时，却不能成功放入，认真研究一下不难发现，放图像的框中，除了None表达还没有图像外，尚有一个括号注释的Sprite，它的意思是精灵，可理解为它是贴图的一种特殊形式，它不具有其他功能，只给UI做显示图片用，故我们给它取了一个特殊的名字：精灵Sprite，所以在Unity4.6中，要想把一个图片赋给Image，则需要把该图片转换成精灵格式，转换方法为，在Project中选中要转换在图片，然后在Inspector检视图中，单击TextureType（纹理类型）右边的下拉框，在弹出的菜单中，第三项EditorGUIandLegacyGUI是Unity4.6以前版本所用的，选中它时，图片不会被拉伸，现在几乎不用，是为了兼容，而第四项Sprite(2DandUI)，就是4.6版本所用的，它虽然比前一项合用的范围更窄，但其效率更高。我们选中该选项Sprite(2DandUI)并点击下方的Apply（应用）按钮就可把此图片转换成精灵格式，随后就可拖放到Image的SourceImag中了，如下图所示：另：当我们把一个普通的图片转换成精灵格式后，在Project中，将发现该图片将包含一个子对象如图：，以后可以把一个图片划分为多个图片。当我们把精灵图片赋给了Image后，其组件样式如下图：Color：可改变图片的颜色；Material：材质，这是针对一些复杂的贴图使用。ImageType：贴图的类型，这是最重要的属性。Simple：简朴PreserveAspect：翻译过来是：维持外貌，选中该项后，该精灵图片的长宽比将保持原状，当调节图片的大小时，它将在保持原长宽比的前提下尽量铺展到图片框中，即不会拉伸或压缩以适应图片框而铺满。SetNativeSize：本来的大小。假如调整后大小变乱了，单击此按钮，可将此图片设立成本来的大小Sliced：片应用该种类型时，应先将贴图进行“九宫格”解决后才可以应用。否则其下会出现黄色的警告ThisImagedoesn’thaveaborder：这个图片没有边框，如下图：如何进行九宫格的解决呢？先在Project中选中该图片精灵，然后在其Inspector检视图中单击“SpriteEditor”按钮即可进入九宫格解决SprinteEditor视窗中，如下两个图所示：在这个SprinteEditor视窗中，我们可以拖动图像四条边上的绿色线，调节九宫格的布局大小，调好后单击顶端的Apply按钮应用即可，回到Image的检视图中，我们将发现本来的警告消失了：在ImageType为Sliced时，当对图像进行大小调节时，其中心会缩放以适合矩形，但边界会保持不变，这样当你显示不同尺度图像时，不用紧张扩大与缩小时其轮廓会发生变化。假如你只想要边界，不要中心，可以禁用FillCenter（填充中心）属性。Tiled：平铺图像保持其原始大小，反复多次填补空白。这往往用于做背景。Filled：填充图像填充满整个Image矩形区域，再结合FillAmount属性，可做一些特效。当图片类型为Filled时，其Image组件的属性视图如上图所示，其FillMethod（填充方法）选择框中有5种：Horizontal：水平填充，假如我们手动拖动FillAmount（填充数量）滑块，就可看到图片在水平方向上的填充变化（动画），如下图列所示：Vertical：垂直填充，同理当我们手动拖动FillAmount滑块，就可看到图片在垂直方向上的填充变化（动画），如下图列所示：Radial90：径向90度填充，同理当我们手动拖动FillAmount滑块，就可看到图片在90度方向上的填充变化（动画），如下图列所示，默认是以左下角为圆心，顺时针90度填充。Radial180：径向180度填充，同理当我们手动拖动FillAmount滑块，就可看到图片在180度方向上的填充变化（动画），如下图列所示，默认是以底边中点为圆心，顺时针180度填充。Radial300：径向180度填充，同理当我们手动拖动FillAmount滑块，就可看到图片在360度方向上的填充变化（动画），如下图列所示，默认是以图片的中心点为圆心，顺时针360度填充。假如我们使用脚本来控制FillAmount的值，就可制造出这五种动画来，为特效的制作增长了一些有效的手段。七．Button控件当我们创建一个Button后，其Inspector视图如下：除了公共的RectTransform与CanvasRenderer两个UI组件外，Button还默认拥有Image(Script)与Button(Script)两个组件。组件Image(Script)里的属性与前面所讲的Image控件的Image(Script)组件里的属性是同样的，例如SourceImage的图像类型仍为一个Sprite（精灵），通过为此赋值，就可改变此Button的外观了，假如你为属性赋值了图片精灵，那么此Button的外观就与此精灵一致了。Button是一个复合控件，它中还包含一个Text子控件：，通过此子控件可设立Button上显示的文字的内容、字体、样式、字大小、颜色等，与前面所讲的Text控件是同样的。Button(Script)组件里的属性：Interactable：是否启用（交互性）假如你把其后的对勾去掉，此Button在运营时将点不动，即失去交互性了。Transition：过渡方式它有四个选项，默认为ColorTint（颜色色彩）None：没有过渡方式。ColorTint：颜色过渡TargetGraphic：目的图像NormalColor：正常颜色HighlightedColor：通过高亮色PressedColor：点击色DisabledColor：禁用色ColorMultiplier：颜色倍数FadeDuration：变化过程时间SpriteSwap：精灵互换。需要使用相同功能不同状态的贴图。TargetGraphic：目的图像HighlightedSprite：鼠标通过时的贴图PressedSprite：点击时的贴图DisabledSprite：禁用时的贴图Animation：动画。最复杂，效果最绚丽。其中的NormalTrigger、HighlightedTrigger、PressedTrigger、DisabledTrigger等属性是不能赋值的，它们是自动生成的。当单击“AutoGenerateAnimation”（自动生成动画）按钮时，系统会为你打开一个NewAnimationContoller（新建动画控制器）窗口，规定你选择动画存放的途径，所以我们要先在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中的RectTransformr的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视图中可看到它的LoopTime属性是处在选中状态，意思是循环播放，那么我们把它去掉即可。而这里，假如我们只去掉Disabled的LoopTime还是不行的，当然把这4个动画剪辑的LoopTime全去掉是能成功的，那么到底是那个剪辑在起作用呢？事实上是Normal，所以我们只需去掉Normal的LoopTime即可。其因素请看下列叙述。我们先在Hierarchy视图中选中那个做了动画的Button，再单击系统菜单Window->Animation（注意不是Animator），就会打开刚才的动画编辑窗口：单击其中的Normal框，会出现下拉选择：从这下拉选择列表中可看出Normal前边有个勾，这说明我们刚才所做的动画是Normal。那么根据此原理，我们可分别做出鼠标通过该Button的Highlighted、该Button按下的Pressed、以及该Button失效的Disabled动画了。NavigationNone：没有Horizontal：水平Vertical：垂直Automatic：自动Explicit：明确的Visualize：显现OnClick()在Button组件的下方有一个OnClick()选项，这就是Button控件解决事件的重要机制。OnClick()意思为当该按钮被点击时所发生的事件，而此事件在UI中是委托机制，要理解这个机制，我们先做一些准备工作。建立脚本文献假设此脚本文献被命名为ButtonEventusingUnityEngine;usingSystem.Collections;publicclassButtonEvent:MonoBehaviour{ //Usethisforinitialization voidStart(){ } //Updateiscalledonceperframe voidUpdate(){ }}这是系统默认的文献内容，现在我们要把它应用于UI，故必须引入UI的命名空间，即脚本的首部增长一行：usingUnityEngine.UI;。假设我们单击一个按钮后，让系统在后台显示一句话：点击了Button！，那么我们可以在此脚本中增长一个方法，该方法为公共的public，假设方法名为DisplayInfo：PublicvoidDisplayInfo(){ Print(“点击了Button！”);}此时整个脚本文献的内容如下：usingUnityEngine;usingSystem.Collections;usingUnityEngine.UI;publicclassButtonEvent:MonoBehaviour{ //Usethisforinitialization voidStart(){ } PublicvoidDisplayInfo(){ Print(“点击了Button！”);} //Updateiscalledonceperframe voidUpdate(){ }}在Hierarchy视图的Canvas中创建一个空对象，并假设命名为Event，并把上面的脚本作为组件挂到这个空对象上，那么这个对象是具有事件解决能力的object了。为某个按钮添加其事件解决的委托对象我们在层级面板中选中要产生单击事件的按钮比如Button1，然后拖动其Inspector面板右边的滚动条，使其Button(Script)组件下的OnClick()显现出来：此时其事件列表为空：ListisEmpty，我们单击其下的“+”按钮为其添加一个事件：此时事件虽被添加了，但其委托的事件解决对象为空：None(Object)，当然连事件解决对象都没有，其事件解决方法自然也就为空：NoFunction。（RuntimeOnly此项我们可先不管它，以后用届时再讲）那么如何委托事件解决对象与选择事件解决方法呢？很简朴，我们把层级面板中刚才建好的并已挂上了事件解决脚本的Event对象拖放到None(Object)框中即可，此时此框中显示的内容即为委托的此事件解决对象的名称了：Event，有了事件解决对象了，然后使用该对象的什么方法来解决事件呢？这还需我们给它指定，其方法是单击显示内容为NoFunction的那个事件方法框，会弹出菜单列表：当我们的鼠标指向最后一项ButtonEvent时会继续展开，其中就有我们在脚本中编写的事件解决方法：DiaplayInfo()，选中它即可，这样就完毕了事件的委托，当我们运营时，单击那个Button，就会在后台里打印出“点击了Button！”。一个按钮可以有多个解决事件。下面我们采用另一种显示信息的方式。我们先在场景中的画布上增长一个Text控件，同时设立好相关的显示样式，然后在那个脚本中增长一个公共变量：publicTextTxt_Info，回到场景视图中，在层级面板中选中挂有该脚本的对象Event，在其Inspector视图的ButtonEvent脚本组件里就会出现刚才增设的公共变量名：Txt_Info（脚本需保存且界面需刷新），我们可把增长的那个Text拖到此处即可为此变量赋值了，接下来我们就可通过脚本修改这个文本框控件的Text属性，让打印在后台的信息显示在这个文本框上了。其脚本文献内容如下：usingUnityEngine;usingSystem.Collections;usingUnityEngine.UI;publicclassButtonEvent:MonoBehaviour{ publicTextTxt_Info; //Usethisforinitialization voidStart(){ } //Updateiscalledonceperframe voidUpdate(){ } publicvoidDisplayInfo(){ print("点击了Button！"); } publicvoidDisplayInfoText(){ 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面板中，单击RectTransform中按钮，会打开一个Anchorpresets锚点调整窗，如下图所示：假如我们单击时，其锚点就会跑到Canvas的右上角，如下图所示：同理单击其他位置时，也就把锚点调整到相应的位置上，即可把此锚点调整到画布的中心点上、四个角上、四条边的中点上。以上是锚点整体移位。事实上，我们还可以拖动小雪花中的任意一个花瓣，使其分散成四个锚点，如下图所示：当我们单击这个窗中的最右边或最下边中一些按钮可将锚点分散在两边或上下或四个角点上。本来这个雪花状的锚点是由四个锚点组成的复合体。说了这么多，那它到底有什么用途呢？两个字，定位。如图：，当屏幕大小发生改变时，Button的四个角点与相应的4个锚点的距离会保持不变，从而保证布局不会随着屏幕大小或者分辨率的改变而改变，可相对有效地保证布局不会混乱，以达成屏幕自适应的目的。但要注意，控件的锚点总是相对于自己的上一级来定义的。例如，我们再在这个Canmas中创建一个Panel并调小它的大小，在Panel中创建一个Text，我们去调节这个Text的锚点时我们将会发现这个锚点总是相对于Text的上一级Panel来定义与变换位置的。九、应用：登录界面在画布上：两个Text控件，分别命名为：Tex_UserName与txt_Password，其Text值分别为“用户名称：”与“登录密码：”两个InputField控件，分别命名为：Inp_UserName与Inp_Password。这两个输入域控件是前面还没有介绍的新控件，在其层级Hierarchy视图将其展开，可发现它也为一个复合控件，在主控件上还包含两个子控件，一个为Placeholder与Text，其Text就是前面所介绍的文本控件，程序运营时用户所输入的内容就保存在这个Text中，而Placeholder是占位符，它表达程序运营时在用户还没有输入内容时显示给用户的提醒信息，在这里我们把它设立为“请输入…”，设立方法是在层级视图中展开这个InputField控件，选中其子控件Placeholder，在Inspecter视图中可发现其Text(Sript)组件，修改其值为“请输入…”即可，如下图所示：InputField控件与其他控件同样，也有Image(Script)组件，自身组件InputField(script)中也有变换Transition属性，其默认值也为颜色变换，除此之外，它有一个重要的属性：ContentType（内容类型），有10个选项，如下图：Standard：标准的Autocorrected：自动修正IntegerNumber：整数DecimalNumber：十进制小数Alphanumeric：字母数字Name：人名EmailAddress：邮箱Password：密码Pin：Custom：定制的据此，我们把第一个InputField的内容类型设为第5个Alphanumeric：字母数字，第二个InputField的内容类型设为第8个Password：密码，这样程序就可启用其自动验证功能，例如在用户名称输入框中假如你输入的不是字母或数字则不能输入进去，第二个密码框中输入密码时它会默认以*号占位输入的密码。3、创建一个Text，用于显示登录是否成功等提醒信息用，在其Inspector视图中，去掉其默认显示的内容，即让其才开始运营时不显示任何内容，并把其BestFit勾选上，让其提醒信息自适应文本框的大小：4、最后创建一个提交按钮，其整个界面如下图所示：5、创建脚本（红色部分为新增内容）：usingUnityEngine;usingSystem.Collections;usingUnityEngine.UI;publicclassLogonSystem:MonoBehaviour{ publicTextTxt_DisplayInfo; publicInputFieldInp_Username; publicInputFieldInp_Password; //Usethisforinitialization voidStart(){ } publicvoidDisplayInfo(){ stringstrUserName=Inp_Username.text; stringstrPW=Inp_Password.text; if(CheckLogonInfo(strUserName,strPW)){ Txt_DisplayInfo.text="登录成功!"; }else{ Txt_DisplayInfo.text="用户名称或登录密码错误请重新输入!"; } } privateboolCheckLogonInfo(stringstrUserName,stringstrPW){ boolReturnFlag=false; if(strUserName!=null&&strPW!=null){ if(strUserName.Trim().Equals("Admin")&&strPW.Trim().Equals("123456")){//两个输入框中的内容去掉前后空格，假如用户名称为Admin、登录密码为123456时，则表达登录，将ReturnFlag标记为真true。 ReturnFlag=true; } } returnReturnFlag;}}脚本创建好了后，我们在Hierarchy中创建一个空对象，命名为_LogonSystemEvent，对把这个脚本挂在它身上，并且在其Inspector视图中，为其3个公共变量赋值（把相应控件拖放到相应变量的值框中）：运营程序，假如用户名称或密码错误，提醒信息框中会显示：用户名称或登录密码错误请重新输入!，否则显示：登录成功！，如下图所示：十、Toggle控件动态事件Toggle：开关，当我们创建它后，可发现它也为一个复合型控件，它有Background与Label两个子控件，而Background控件中尚有一个Checkmark子子控件，假如我们将其拖散可清楚地看见，Background是一个图像控件，而其子控件Checkmark也是一个图像控件，其Label控件是一个文本框，它们与我们所讲的控件是一致的，我们通过改变它们所拥有的属性值，即可改变Toggle的外观，如颜色、字体等等。下面来看看Toggle的一些重要属性。IsOn：目前是处在开还是关。当我们运营起来，用鼠标点击那个Toggle按钮，将发现其中的对勾符号会在出现与不出现之间切换，同时与之相相应的，在其Inspector面板中，属性InOn后面的对勾也在勾选与不勾选之间切换。Graphic：图像事实上，用鼠标点击那个Toggle按钮，其对勾符号会在出现与不出现之间切换，它的原理就是控制那个对勾图像出现与不出现而实现的，这个Graphic就是设立这个属性值的，你可点击最后那个设立按钮，在出现的窗体中选择此外的图像如Background，同时将中的TargetGraphic的值设为Checkmark，即将它们两者的值互换，将发现，当我们点击Toggle按钮时，其对勾不会消失与出现，而是背景消失与出现。这样做虽然没有多大实用价值，但说明Unity可以方便地控制这个按钮的外观。Group：组（单选框功能）在Hierarchy面板中，选中我们刚才创建的Toggle，然后按键盘Ctrl+D两次，就可复制出两个Toggle了，并在场景视图中拖动它们的位置，使它们都可见，运营，我们将发现这个三个都可选中，即它们是复选框。那么如何做出单选的效果呢？前面所创建的按钮是独立的，互不关联，当然就可独自地选与不选。假如我们把这三个组成一个组，让它们关联，就可做成单选了。从Group属性可看出它需要一个ToggleGroup。我们先在画布上建立一个空对象，并命名为_ToggleGroup，在其Inspector中单击这个按钮，为其添加组件，在弹出的菜单中选择UI，在后续弹出菜单中选择“ToggleGroup”，这样我们就为此对象添加了ToggleGroup组件了。在Hierarchy中同时选中要成组的那3个Toggle，把已添加了ToggleGroup组件的_ToggleGroup拖到Inspector的中即可，这样我们便把这3个Toggle成组了，于是它们3个就只能单选其中一个了。为了更完美，一方面调整空对象_ToggleGroup的位置与大小，让其包含那3个Toggle控件，然后在Hierarchy中，把3个Toggle选中并拖到_ToggleGroup中成为子物体，这样在逻辑上与外观上均完备，且移动父物体时子物体也会跟着移动。Toggle控件动态事件OnValueChanged(Boolean)这是Toggle的事件解决，它与Button的事件有所不同，下面来看看如何给Toggle添加事件。我们把Toggle的标签改成装备名称，再在场景中增长一个显示选取的装备名的文本框：编写脚本：usingUnityEngine;usingSystem.Collections;usingUnityEngine.UI;publicclass_ToggleEvent:MonoBehaviour{ publicTextDisplay; privatestringinfo; //Usethisforinitialization voidStart(){ } publicvoidToggle1(boolisclik){ if(isclik){ info="屠龙宝刀"; Display.text=info; } } publicvoidToggle2(boolisclik){ if(isclik){ info="倚天剑"; Display.text=info; } } publicvoidToggle3(boolisclik){ if(isclik){ info="降龙十八掌"; Display.text=info; } }}在Canvas中创建一个空对象，把此脚本挂接到此对象上，并把场景中的Text赋给publicTextDisplay这个变量，然后分别选中那3个Toggle，在其检视图中单击事件下的“+”号：，单击后就为该控件添加了事件，如下图：然而，事件要委托给一对象，现在还没有，显示的是，此时把已经挂接上了脚本的那个空对象拖放到此处，便委托事件解决对象了，如下图所示：有了事件解决对象，但还没有指定方法，此时单击会出现下图所示的菜单：鼠标指向我们为此对象所挂的脚本名_ToggleEvent时就会继续展开一个菜单，其中就有我们在此脚本中编写的方法Toggle1(bool)、Toggle2(bool)、Toggle3(bool)。这个菜单与Button的有所不同了，Button的如下图所示：比较这两个菜单可发现Toggle多了上面的那部分：下面的是静态方法，上面的是动态事件，是系统自动生成，其bool型参数已被封装在其中了，此时我们不能象Button那样去选择其静态方法了，而要选择与之相应的动态事件才可正常运营了。Toggle与Button在事件解决上的的区别不只是上面所谈到的那一点，尚有其他区别，如：Button事件组件面板的上部显示的是Toggle事件组件面板的上部显示的是Button是当Button被单击时发生，Toggle是当Toggle选中与不选中（即其值发生改变）时发生，且尚有一个布尔型参数，选中时传进给参数的值为真，反之为假，所以在前面脚本编写中，其方法里我们要设立相应的布尔型参数来接受这个值： publicvoidToggle1(boolisclik){ if(isclik){ info="屠龙宝刀"; Display.text=info; } }根据上面的分析可知，Toggle选中与取消选中时都会产生事件，那么在一组单选按钮组中，当我们点选另一个按钮同时会取消前一个按钮的选择，那么这两个按钮就都会产生事件，为了证明这一点，我们将前面的脚本稍作改变： publicvoidToggle1(boolisclik){ print("屠龙宝刀");if(isclik){ info="屠龙宝刀"; Display.text=info; } } publicvoidToggle2(boolisclik){ print(倚天剑");if(isclik){ info="倚天剑"; Display.text=info; } } publicvoidToggle3(boolisclik){print(“降龙十八掌"); if(isclik){ info="降龙十八掌"; Display.text=info; } }以前的代码是当选中即isclik为真时才显示相关信息，而取消选中，虽然事件也产生，但因isclik为假，所以不会显示信息，所以我们便觉察不出来，而现在加上了一个print语句，这样只要事件发生了，就都会在后台里打印出相关信息来，如下图所示：这是初次运营选中“屠龙宝刀”时的情况。接着我们选中“倚天剑”时，“屠龙宝刀”也被取消，“倚天剑”与“屠龙宝刀”都产生了事件，所以会打印出各自的信息。再在这基础上选中“降龙十八掌”，“倚天剑”被取消，同时“倚天剑”与“降龙十八掌”均产生了事件，所以倚天剑与降龙十八掌相关信息都会打印出来。以上就是Toggle的事件解决机制，假如我们Toggle不是单选而是复选，那么我们又如何在那个文本框中显示出多选信息呢？这个问题看似很难，事实上很简朴，代码如下： publicvoidToggle1(boolisclik){if(isclik){ info+="屠龙宝刀"; Display.text=info; } } publicvoidToggle2(boolisclik){if(isclik){ info+="倚天剑"; Display.text=info; } } publicvoidToggle3(boolisclik){ if(isclik){ info+="降龙十八掌"; Display.text=info; } }把info的赋值符号=变成+=，这样就把info的值累加起来了，也就记录下了多选值了。这虽然简朴，但不完善，假如先选中，然后又去掉，但先添加进去的值却不会去掉，这需要进一步地解决才行。事件运营模式在事件组件面板中，第一个选项框中的值我们在Button时就是一直使用的是其默认值：RuntimeOnly，如下图所示：当我们单击该选项时，出现的下拉菜单如下：Off：关闭事件解决功能；EditorAndRuntime：编辑与运营时，其事件解决功能均起作用；RuntimeOnly：仅在运营时，其事件解决功能才起作用。我们假设把Toggle1方法改成如下所示：publicvoidToggle1(boolisclik){ print("屠龙宝刀"); info="屠龙宝刀"; Display.text=info; }然后把第一个Toggle的事件解决对象及方法置空，并把事件运营模式变为EditorAndRuntime，此时再为它添加事件对象及方法，我们将发现在添加结束后，其事件便立即发挥作用了，如下图所示，当然程序运营时也能发挥其功效的，这就是“编辑与运营时，其事件解决功能均起作用”的意思。此功能可认为我们程序员提供预览、事前先知的功能，方便我们编辑。十一、Slider控件（滑动条）Slider也是一个复合控件，Background是背景，默认颜色是白色，我们保持不变；FillArea是填充区域，其子控件Fill中只有一个Image(Script)专有组件，假设我们将其颜色改为红色；HandleSliceArea中的子控件Handle（手柄）中也只有一个Image(Script)专有组件，假设我们将其颜色改为黄色，那么Slider的外观为：当我们在Hierarchy中选中Slider控件，其Inspector中的Slider(Script)属性面板如下图所示：上部的Interactable、Transition与前面介绍的控件是差不多的，下面谈谈它特有的一些属性：FillRect：填充矩形区域HandleRect：手柄矩形区域Direction：Slider的摆放方向，可以从左到右、从右到左、从上到下、从下到上MinValue：最小数值MaxValue：最大数值WholeNumbers：整数数值。假设我们将MinValue设为1，MaxValue设为100，那么调节手柄时，相应的值在1到100之间，并且是一个小数，如55.67，有时我们希望它是整数，那么选中该项即可。上面的后4项Direction、MinValue、MaxValue、WholeNumbers都比较好理解，而前2项FillRect与HandleRect较困难，下面我们做一个实验便可知其意义了。我们再创建一个Slider控件并命名为Slider2，并把其所有子控件的名字改成在其默认名后加2的名字，再把先前的那个Slider改名为Slider1，也把其所有子控件的名字改成在其默认名后加1的名字，如下图：此时我们先选中Slider2，然后把Slider1的子子控件Fill1拖到Slider2的FillRect中，如图：运营程序，当我们调节Slider2的手柄时，我们将发现Slider1的填充区域在发生变化，为什么呢？由于默认情况下Slider2的FillRect是它自己的Fill2，而我们现在把Slider1的Fill1赋给了它，作为它现在的FillRect对象，所以就会出现此种情况，这就是FillRect的功效。在上面的实验中，我们把Slider1用来做显示，Slider2用来控制，假如能把Slider1中黄色手柄隐藏起来就更好了：这也是能做到的，我们选中Slider1的子子控件Handle1，在其Inspector视图中，将其Image(Script)前面的对勾去掉，这样就不会显示那个手柄了：3、Slider的动态事件假设我们想在拖动手柄的时候，让其值显示在右边的一个文本框中，如下图所示：这就要用到Slider的动态事件了指的是Slider的滑块滑动其值发生改变时而产生的动态事件，它有一个参数Single：单精度，事实上这里指的是float，整个事件的机理是，当滑动滑块时，其值发生改变，事件产生，并且会实时将滑块所相应的值传给此事件，保存在这个参数中，供程序使用。根据此原理，我们建立下列脚本SliderDemo：usingUnityEngine;usingSystem.Collections;usingUnityEngine.UI;publicclassSliderDemo:MonoBehaviour{ publicTextTxt_diaplayValues; //Usethisforinitialization voidStart(){ } publicvoidDisplaySliderNumber(floatfloValues){ Txt_diaplayValues.text=floValues.ToString(); }}然后在场景中创建一个空对象，把此脚本作为组件挂在这个空对象上，再在场景中创建一个文本框，并赋给 publicTextTxt_diaplayValues变量。最后一步就是注册事件了，单击中的“+”按钮，为其添加事件，把前面创建的并已挂上脚本的那个空对象拖到中为其委托事件解决对象，再指定事件方法，单击：选择脚本名SliderDemo中的方法DisplaySliderNumber，但是这里不能选择DisplaySliderNumber(float)，而要选上面的DisplaySliderNumber动态事件（其因素请见前一节的叙述）。运营程序就可达成规定了。十二、ScrollBar控件（滚动条）其属性：与前面的Slider差不多，动态事件也是同样的，这里就只谈其特有的属性：Value：当拖支滑块时，其值是在0到1之间变化的Size：是滑块的大小，假如把它改成0.5，滑块就会大到占滑条的一半大。NumberOfSteps：数值的环节。假设设定为5，那么就会把Value提成5个值，调节滑块时其值就在这5个值中变化。十三、一个简朴的游戏主界面右边蓝底色中的“生化危机”为Text；开始、设立、结束为Button，并加上简朴的帧动画Highlighted（HYPERLINK见前面的动画过渡）左边淡黄底色区域为面板panel，它为父控件，其中所包含的所有控件均为它的子控件，游戏难度下的三个选择钮为单选按钮组，其设立方法请HYPERLINK参见前面Group。这个面板，通常情况下是不可见的，当单击“设立”按钮时面板从左外侧滑入而可见，进行设立后单击面板中的“拟定”按钮后，面板又滑出到左外侧处在不可见状态。这是一个动画，其设立方法与Button动画相似，但它不是运用Button那种自动生成动画的方法而建立的。下面我们先来建立面板的动画过程：一方面，在Hierarchy面板中选中要建立动画的Panel，单击主菜单Window中的Animation（注意不是Animator）出现Animation窗口：此时单击顶端最左侧红色按钮，它为动画录制按钮，会弹出一个对话框，规定为将要录制的动画选择保存位置与动画的名称，如下图：假设我们将此动画保存在Assets下的_Animation文献夹中，并取名为ShowPanel.anim，单击保存后，其界面如下：录制的动画是面板从不可见到可见的显示动画，那么在第0帧时面板是不见的，所以此时把面板水平向左拖动到画布的左外侧，如下图所示：动画录制机会记录下此时对象的位置，其Inspector面板中的RectTransform参数会发生改变：，即在第0帧时，面板在X：-140，Y：-1.3751e-05处。接下来我们把帧数框中的帧数改为60帧，即设立第60帧时面板的位置（设为60帧的因素是，面板从第0帧的位置变化到第60帧的位置时其动画时间大约为1秒钟），此时录制面板中的那条红色竖线将移动到1:00处，如下图：根据动画设计规定，此时面板应当是完全可见的，所以我们把面板水平向右拖到画布中，动画录制机同样会记录下此时面板的位置，其设立窗口如下图：我们还可发现，在现在位置的红线处会出现象0帧处的关键帧图标：。我们在上单击一下，其展开图如下：展开的那两项分别表达在此过程中，对象在X轴上位移了131，Y轴上为0。从底部的处可见，现在的视图是DopeSheet（关键帧清单），当点击Curves（曲线）时，会转换为曲线视图，如下图假如曲线过大显示不全或过小看不清时，可调节鼠标中键滑轮，缩放曲线到适当大小。图中水平绿色线所包含的区域即为动画区域，曲线上的红色点为关键帧点，可看出此动画只有两个关键帧，用鼠标单击关键帧时，Scene视图中的面板就会移动到所设立的位置上。设立好后，单击红色的录制按钮一下，即可停止录制且保存动画。这是显示面板的动画，下面我们来设计隐藏面板的动画。单击已经显示出刚才录制的动画名为ShowPanel这个框右边的按钮，弹出：单击[CreateNewClip]，创建一个新的动画剪辑，此时会同样弹出一个规定你为新动画取名以及选择保存途径的对话窗，假设我们为此动画取名为HidePanel.anim，途径与前一个动画相同，其后的动画设计与前边同样，只但是第0帧时，面板在画布上，第60帧时，面板在画布外。动画创建结束后，即可直接关闭录制窗体，系统会自动保存动画文献。回到系统界面下，在Project视图中的我们事先设定的保存动画的_Animator文献夹下将会新增三个文献：，并且在Hierarchy视图中选中已设立了动画的控件Panel，在其Inspector视图中将发现系统会为其自动增长动画组件Animator。好了，万事具有，运营程序，但发现那个面板的显示动画会不断地反复播放，其因素是其LoopTime的属性值为True，假如设为False即可去掉其默认的自动播放特性。方法为，在Project视图中选中动画，然后在其Inspector视图中，把后的钩去掉即可（同理，其HidePanel动画也做这样的解决），但程序运营时，面板虽不会反复播放显示动画了，但它会播放一次，这与我们的设计初衷不符，我们的初衷是程序运营时不显示面板，当我们点击设立按钮后才会显示面板，点击面板中的拟定按钮后，隐藏面板。要达成这种功能，就要设立动画状态机中的一些属性以及配合使用脚本才干完毕。一方面，让动画不自动播放。在Hierarchy视图中选中设立了动画的控件Panel，可发现其Inspector视图中Animator组件中的第一个属性Controller（控制器，也称动画状态机）的值为前边录制的动画：Panel，如图：，单击其后的设立按钮可更改为其他动画，但是这里是不需更改的，我们双击动画框中的已有的动画Panel，会打开Animator窗口：其中有两个按钮代表的就是按钮文字所指示的动画剪辑：ShowPane、HidePanel，即现在这个Panel动画里有两个动画剪辑。我们在面板的空白地方单击鼠标右键：，选择第一项CreateState中的Empty，创建一个空动画，其默认名为NewState，如图：在NewState上点右键，在弹出的中选第二项SetAsDefault，即设立这个空动画为默认播放的动画，既然为空动画，自然就不会播放动画，经此设立后的窗口如下图所示：比较设立前后两图可发现，代表默认动画的按钮的颜色为黄红色。即哪个按钮为黄红色，那个动画剪辑就是当前动画播放时的状态位置，动画状态机的命名来源也许就是这个因素。经此设立后，再次运营程序，就不会有动画播放了。但也许你会发现那个面板仍然显示出来了，出现这种情况，不是动画导致的，因现在虽然没有动画，但那个面板本来是存在的，当然要显示出来，假如想要它一开始就不显示，我们只需在场景编辑视图中将其位置拖到画布之外即可达成目的，如下图：通常情况下，一个动画里有许多的动画剪辑，到底播放哪个动画，是动画状态机来决定的。这个界面就是动画状态机界面，它表达现在的动画播放的是它中的哪个动画剪辑。那么，我们有什么办法来控制动画状态，或者说让动画在不同的剪辑中交替转换呢？我们在“NewState”上单击鼠标右键，选择第一项MakeTransition（设立转换），然后直接移动鼠标，将会出现一个带前头的连线，再在”ShowPanel”上单击鼠标左键，即可在这两个动画剪辑上建立转换联接：，这个连线表达，当满足某个条件时，就可由播放剪辑NewState变成播放剪辑ShowPanel，即使ShowPanel处在播放状态。这个条件又在哪里设立呢？单击右边的“+”按钮，在弹出的中选Bool，即设立一个布尔型参数，并把此参数假设命名为IsDiaplay，如图。设立好参数后，用鼠标单击那根连接线，它将变成蓝色，表达选中，如图：接下来，在其Inspector视图中的Conditions设立条件变量为刚才建立的IsDiaplay，条件值为true，如下图：其意思为，当IsDiaplay为真true时，动画播放状态由NewState转变为ShowPanel。同理，可设立由HidePanel到ShowPanel转变条件也为当IsDiaplay为真true时。这两步设立的结果我们可以这样理解，当IsDiaplay为真true时，动画播放状态处在NewState或HidePanel时，都将转到去播放ShowPanel。依此类推，当IsDiaplay为假false时，动画播放状态假如处在ShowPanel时，将转到去播放HidePanel。这样其动画状态我们就设定完了，如下图：接下来我们运用脚本去改变那个变量的值，就可实时控制动画的播放了。脚本内容如下（红色部分为增长的脚本内容）：usingUnityEngine;usingSystem.Collections;publicclassSettingPanelDisplay:MonoBehaviour{ publicAnimatorAni_SetPanel; voidStart(){ } publicvoidShowPanel(){ Ani_SetPanel.SetBool("IsDiaplay",true); } publicvoidHidePanel(){ Ani_SetPanel.SetBool("IsDiaplay",false); }}在场景中创建一个空对象，把脚本挂在它身上，并在Inspector视图中把Hierarchy中的Panel赋给Ani_SetPanel，如图：。脚本中Ani_SetPanel变量是Animator类型，为什么可以把控件Panel赋值给它呢？道理是Panel控件已有了Animator组件，程序会自动抽取其中的Animator出来赋值给变量Ani_SetPanel。Ani_SetPanel.SetBool("IsDiaplay",true);其中的IsDiaplay就是在状态机中增设的参数，其拼写必须与状态机中的完全一致，否则不能运营。最后设定“设立”与“拟定”两个按钮的委托事件，具体设定过程请参见前面的HYPERLINKButton事件。至此，这个简朴的游戏主界面便创建竣工，可运营程序查看效果了。十三、高级控件滑动区域ScrollRect滑动区域控件ScrollRect是在一个较社区域显示较多内部控件的一种机制。在UI系统中，这种控件的原型是没有的，它是我们开发者运用UI系统里已有的基本控件组合而成的。但是在UI系统里有ScrollRect这个类，即它是一个组件，不是控件。控件与组件有什么区别呢？简朴地说，在一个控件里可以添加组件，如在Button上可添加Animator组件。有些控件在创建时，它会默认自带一些组件，如Panel会自带Image组件，如图：，其带括号的Script就表达这个Image是组件，因在UI系统里有Image这个基本控件的，故加上一个带括号的Script来区别控件与组件，说明此处的Image是组件而不是控件。同理，当我们创建一个Button控件时，默认情况下我们可以在其Inspector视图里发现它带有Image与Button两个组件的，如下图：因在UI系统里有Image、Button这些基本控件，这里加上(Script)说明这个Image、Button不是控件而是组件。这仿佛有点混，怎么Button控件里具有Button组件呢？事实上我们可以这样理解，组件是一个脚本，是一个类，控件是这个类的实例化对象，是一个具体实现，所以Button控件里具有Button组件就好理解了。再一个，类之间可以继承，所以一个控件可以包含多个不同类型的组件。根据上面的叙述，ScrollRect是待开发者自己去建立的控件，我们姑且把它称作隐形控件。下面我们来创建这个控件。创建一个画布Canvas，在画布上创建两个空对象，其中一个命名为ScrollRect，另一个命名为Content，再创建一个Scrollbar。调整它们的大小与位置，大体如下：CanvasContentScrollbarScrollRectCanvasContentScrollbarScrollRect在Content上创建几个子对象，这里我们创建4个Button，并调整它们的位置，使它们平铺在Content中，同时设立Button的Image的SourceImage的值（挂上图片，普通图像挂不上，应转换成精灵，请参见HYPERLINK前面的Image）。组装ScrollRect：3个组件2个属性添加ScrollRect组件：选中空对象ScrollRect，在其Inspector视图中单击“AddComponent”按钮，选择UI中的ScrollRect，这样便为这个空对象添加上了ScrollRect组件。此组件里有2个重要属性Content、HorezontalScrollbar，其功能简朴说是用滑动条的滑动去控制内容区域的移动。根据此原理我们把Hierarchy视图中的Content与Scrollbar分别拖挂到这两属性值框中即完毕了对象的指定工作。试运营程序并拖动滑动条，发现Content中4个按钮图片的确能随着滑动条的移动而移动了，如图：但这还不完美，假如能隐藏多余的内容，只显示特定区域的内容，就象网页中的滚动条那样就好了，如下图所示：要达成此功能，还要为已添加了ScrollRect组件的对象增添Image、Mask（遮罩）两个组件，其添加方法与上一致。至此，组装ScrollRect的3个组件ScrollRect、Image、Mask，2个属性：ScrollRect中的Content、ScrollRect中的HorezontalScrollbar已完备，但当我们运营时，其效果仍然与前面相同，不能隐藏多余部分。假如在Hierarchy视图中我们把Content拖到ScrollRect上，使Content成为ScrollRect的子对象，就可达成我们想要的效果了。其因素是，我们所添加的Image与Mask是在ScrollRect上，那么用图像去遮罩的对象是ScrollRect，所以我们要把Content作为ScrollRect的子对象才干达成此效果。十四、高级控件标签页面TabPage如图，当我们点击顶部不同的标签时，下部的内容区域会显示相应的内容版面。1、在画布上创建一个空对象，命名为Lable，创建一个Image，布局上Lable在上面，Image在下面，如下图：2、在Lable中创建三个子控件，它们均为Toggle，命名为Toggle1、Toggle2、Toggle3，并调整它们的Background与Checkmark，使其看起来像按钮：调整方法：Background是背景，是未被选中时表现出来的图景。一方面在场景视图中将其大小调大，使其与整个按钮形状同样大，然后在其Inspector视图中的Image组件里设立SourceImage或Color属性值，这里为了简便，我们将其Color值设为较暗的灰度色，用于它未被选中时展现出来的颜色。Checkmark是选中时表现出来的图景，默认是一个对钩，同理一方面在场景视图中将其大小调大，使其与整个按钮形状同样大，这样一来，Checkmark与Background同样大，两个重叠起来了，当未选中时，表现出来的是Background的景象，选中后表现出来的是Checkmark的景象。对于Checkmark的调整，然后在其Inspector视图中的Image组件里设立SourceImage或Color属性值，这里为了简便，将Image组件里的SourceImage属性设为空None，即去掉那个对钩图像，并将其Color值设为较亮的灰度色，用于它被选中时展现出来的颜色。这三个按钮状的Toggle按设计思绪应当为单选，所以按以前所学的知识，需设立它们的Group属性值为Lable，同时，对于它们的IsOn属性，第一个Toggle的保持勾选，另两个去掉勾选，即使开始时，第一个处在默认选中状态。3、在Image上创建三个为空的子控件，分别命名为Page1、Page2、Page3，并调整它们的大小，使其与Image同样大，位置上与Image重叠。再在Page1、Page2、Page3上各自创建一个Text子控件，也调整它们的大小大体与Image相称，且位置上也与Image重叠，并分别输入要显示的文本内容。这三个Text是重叠在一起的，显示时，其内容也会重叠，假如我们只勾选第一个Text的父控件Page1的，另两个去掉勾选，那么显示时会默认显示第一个，另两个处在未激活状态，不会显示出来，自然就不会发生显示的重叠了。4、最后一步我们来实现当我们点击顶部不同的标签时，下部的内容区域会显示相应的内容版面。也许你会认为这要用到脚本，事实上有更简便的方法，当然会离不开事件解决机制的。下面以Toggle1为例，选中它，在其Inspetctor视图中，单击：中的“+”号，为其添加事件，如下图：委托事件解决对象，这里我们把Page1拖给如下图：指定事件解决方法：虽然我们没有编写自己的脚本，但Unity有内置的许多方法的，这里我们选择第二项GameObject：选择上边的动态方法：SetActive，设立结果如下图：这个事件的运营机理是：当Toggle1的选中状态发生改变时（注意是状态发生改变，选中时会产生事件，那么由选中到取消选中，也会产生事件），所挂接的对象Page1会被激活或失效。根据这个原理，Toggle2的事件委托对象为Page2，Toggle3的事件委托对象为Page3，这样就实现了当我们点击顶部不同的标签时，下部的内容区域会显示相应的内容版面了，如下图：十五、大型游戏案例UI开发1、结构搭建在Project中建立一些文献夹我们这里先把一些贴图导进Sprits中，并把它们转化为Sprint，其转化方法请参见前面的HYPERLINKImage控件中的图像精灵。2、配置Canvas参数在Hierarchy中创建UI画布Canvas，其Inspector中的Canvas、CanvasScaler(Script)设立如下：Canvas：RenderMode：渲染模式设为ScreenSpace–Came，这种模式可在画布与摄像机之间放三维物体，做出更绚丽的界面。RenderCamera：既然渲染模式为ScreenSpace–Came，那么在此处就需为此设立渲染所用的摄像机了，我们把Hierarchy中的主摄像机更名为UICamera后并拖到此处，为此指定渲染所用的摄像机。PlaneDistance：直译过来为“平面距离”，这里表达的是画布距摄像机的距离，默认为100个单位，虽然距离越大，在画布与摄像机之间所放的三维物体越多，但一般设成200个单位，这里我们设成200。CanvasScaler(Script)：UiScaleMode：选第2项，自适应屏幕宽。ReferenceResolution：参考分辨率，应根据应用情况而定，这里我们设成800×600，即画布的大小宽为800像素，高为600像素。ScreenMatchMode：屏幕自适应模式，选第1项，3、创建背景在画布上创建一个Image控件，命名为Background，并为其赋值一个Sprits贴图作为背景图：此图看起来会是朦胧的，究其因素是因其默认为半透明状，将其设为不透明，即可解决。方法为单击：，会弹出：其中的R、G、B表达红绿蓝颜色，最后一项A代表的就是透明度，将其滑块拖到最右，如上图右，即设成了不透明，返回后其效果如下图：4、创建供滑动用的系列面板再在画布上建立一个Image父控件，命名为Sliderpanel，并在其下建立5个Panel，其结构与命名如下：调整这5个panel，使它们向右平铺开来，如下图。我们这样做的目的是想创建一个滑动效果，就像手机上的滑屏效果。这5个面板默认是重叠在一起的，要像上图那样把它们向右平铺开来，其位置的调整，除用鼠标手工拖动外，其实有更精确的方法。第1个面板MainPanel在原位，是不需调整的。第2个面板Panel1应紧排在第1个面板的右边，我们选中Panel1，在其Inspector中的RectTransform中设立Left为800，Right为-800，即可将Panel1精确地调整到MainPanel的右边第一个位置上。这里的Left、Right的值800、-800如何理解？我们以下列三个系列图来说明这个问题：下图中的第1个，我们是在画布Canvas上创建一个面板Panel，并调整它的大小，使这个Panel的Left、Top、Right、Bottom分别为200、100、220、120，从图示就可看出它们分别表达子控件Panel的边与父控件Canvas相相应边之间的距离，这个距离的单位为像素。假如画布设立的参考分辨率为800×600，即宽800像素，高600像素，那么大家就可从子控件与父控件各边之间的距离（即空白距离）算出子控件的大小了。图1图2图3图2与图3均是在Canvas的子控件Panel上创建的一个子子控件Panel，但是图2中的Canvas上的子控件Panel