Unity3D4.6UGUI开发设计及案例讲解

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就是在xy平面上显示,故不需设置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、3751e05处。接下来我们把帧数框中得帧数改为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视图中单击“Addponent”按钮,选择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:屏幕自适应模式,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