制作按钮(Button)

按钮的核心作用

  1.按钮能接收单击并触发响应事件。

  2.按钮被单击时能同时触发多个响应事件。

  3.按钮可以有普通、悬停、单击、禁用等多个状态的不同表现。

  4.广泛的说,按钮的核心在于接收事件,任何可以接收用户操作事件的,都可以称之为按钮。

 

创建按钮

  1.创建一个Sprite,这个Sprite将会是按钮的外形。

  2.选中创建的这个Sprite,然后在Unity顶部菜单中选择NGUI->Attach->Collider。

  3.选中创建的这个Sprite,然后在Unity顶部菜单中选择NGUI->Attach->ButtonScript。

  可以用Label、Texture等其他控件来代替Sprite去制作一个按钮,方法一模一样。

  如果需要在创建好的这个按钮上写上文字,例如,"确定"、"取消"等,只需要选中这个按钮,然后再它下面创建一个Label,并写上"确定"即可,注意,Label的深度要高于这个按钮的深度,这样就完成一个"确定"的按钮。

  小提示,创建出来的Sprite记得单击Snap,让它回归到原尺寸大小,然后再去等比例调整它的大小,这样可以尽量减少图片的形变。

 

核心组件BoxCollider

  BoxCollider是一个屋里组件,准确地说是一个物体碰撞盒,所有的需要接收外部输入事件的(如单击、拖动等)UI,都需要拥有一个BoxCollider,这个BoxCollider代表的是响应事件的范围。如果没有BoxCollider,那么这个控件无论如何都无法接收到外部事件,这是NGUI的一个底层原则。

  既然BoxCollider代表的是接收事件的响应范围,那么,如果将一个按钮的BoxCollider大小设为全凭,则单击屏幕上任何一个地方,都相当于单击了这个按钮。

  可以通过Attach方法自动生成一个BoxCollider,也可以通过Inspector面板中单击AddComponent手动附加一个BoxCollider,区别在于:通过NGUI菜单Attach的BoxCollider的大下坡,会自动刚好包围控件的范围,而手动创建的BoxCollider,大小需要手动去调整。

  BoxCollider的包围框是个绿框。只要在Inspector面板中展开BoxCollider的组件,就能看到这个绿框,如果Inspector面板中BoxCollider组件的设置菜单被收起来了,则不会出现这个绿框。

  BoxCollider设置:

    1.Is Trigger

      是否打开触发器,这个设置对于NGUI没什么用,它打开的作用是可以通过物理碰撞触发事件(如相撞爆炸等)。

    2.Material

      材质设定,这里设定的是物理材质,对于NGUI也没有什么用,它的作用是为这个碰撞盒包围的物体设定一个物理的表面,例如,一块地面时草地、还是木板、还是金属。

    3.Center

      中心位置的偏移。BoxCollider都有一个中心点,这里的Center就是设置它的中心点相对于控件的中心点的偏移,是一个相对量,所以需要注意一点:BoxCollider的这个Center会受到控件本身的Pivot中心点设置的影响。

    4.Size

      尺寸设置。经常配合Center设置一起使用,以此来调用控件响应区域的大小和位置。例如,做一款手机游戏,在屏幕中有一个很小的关闭按钮,经常导致玩家点不中它,就可以依靠设置Size来将它的响应区域变大,这样玩家只要单击到关闭按钮周围的区域,都能触发关闭按钮的响应时间。值得注意的是,这里Size的Z轴在UI中是几乎没有用的,X和Y的值都是以像素为单位。

      需要注意的是,BoxCollider一般需要依赖于一个非空的、实质的物体,例如,如果这个BoxCollider物体身上没有控件(Sprite、Label、Texture等),只有一个BoxCollider,那么在大部分情况下,这个BoxCollider是无法接收事件的。

 

核心组件UI Button

  首先要明确的是,UI Button并不是一个按钮的必须组件,也就是说,没有UI Button时,也能完成一个按钮。只要这个按钮上有BoxCollider,就可以在脚本中通过OnClick()、OnHover()等事件监听函数去触发一个响应事件。

  UI Button有以下一些重要的用途:

    1.可以设置不同状态下的颜色。

    2.可以设置不同状态下的图片。

    3.可以很方便地被动态赋予响应时间并分发事件。也就是说,可以临时地在A物体上的脚本里动态让B按钮拥有一个或者多个完全不同的响应事件。

  UI Button的设置:

    1.TweenTarget

      动画目标,默认为按钮自己。按钮在光标悬停时变色、被单击时变换图片等,都是动画。绝大部分情况下,这个设置都需要设为自己(默认就是按钮自己)。

    2.DragOver

      拖动结束事件,默认为Do Nothing。这里有两个选项:DoNothing和Press。之所以有这个选项,是因为按钮在被拖动时,有一个事件的交叉:如果拖动一个按钮,那么不仅仅拖动了它,同时也按下了它。这个设置的目的就是,定义它被拖动结束后,是否还执行按下事件。

    3.Transition

      过渡时间。这里是动画过渡的时间。例如,设定按钮在鼠标光标滑过时,要变黑,这个设置就是设置它在光标滑过时由正常到变黑的时间。

    4.Colors模块

      这里是改变颜色,可以设置在不同状态下按钮的颜色和透明度。一共提供了4中状态可设置:普通状态、按钮被鼠标光标滑过时的状态、按钮被按下的状态、按钮不可单击时(BoxCollider被禁用)的状态。

    5.Sprites模块

      这里是精灵设置模块。值得注意的是,如果制作按钮时不时使用一个精灵控件作为基础制作的,那么将不会有这个模块。

      在这里可以设置按钮在不同的状态下显示什么样的图片。一共支持4中状态:普通状态、按钮被鼠标光标滑过时的状态、按钮被按下的状态、按钮不可单击时(BoxCollider被禁用)的状态。

      当通过Sprite制作一个按钮时,创建的Sprite会默认出现在Normal设置中,然后任何状态下,按钮图片都是这个精灵不会再改变。

      如果需要按钮在不同状态下进行变化,可以分别对每个状态需要显示的精灵进行设置,设置的方法为单击状态名称的按钮,会弹出图集中所有精灵的预览(图集是Normal状态显示的精灵所属的图集)。

      如果要取消一个状态下显示精灵的设置,可以单击该状态后面的小减号。但是,普通状态下的精灵无法被取消,当其他状态没有设置精灵时,将会默认显示普通状态的精灵。

      PixelSnap是指保持原像素尺寸,当设置了不同状态下显示不同的Sprite时,只有勾选了这个框,才会让显示的不同的Sprite都以原像素尺寸显示。如果不勾选,则所有状态下的Sprite都会统一以这个按钮控件(制作按钮时所用的Sprite)的尺寸大小进行显示。

    6.OnClick

      这是设置按钮响应单击事件的地方。设置按钮响应事件时可以通过以下操作。

      将该按钮要响应的事件函数的脚本所在的物体拖入到Notify中,然后该物体的名称就会出现在Notify的设置框中,会自动出现该物体下所有脚本中的Public函数,然后选择要按钮响应的那个函数即可。

      也就是说,在这里可以让按钮响应任何一个物体身上的、任何一个脚本的、任何一个Public函数。

      在这里当你设置了第一个响应事件之后,会自动弹出第二个响应事件的设定,也就是说,通过这里的设置,可以让按钮被单击之后响应任何多个事件。

 

制作按钮的缩放动画

  如果希望单击按钮时,按钮会有一个缩放动画,可以单击AddComponent、选择NGUI->Interaction,在里面找到ButtonScale脚本,附加到按钮物体上。

  ButtonScale的核心作用就是控制按钮的缩放动画,它的设置:

    1.Script

      这个是它所调用的脚本,我们不用管,它会自动定位好。

    2.TweenTarget

      这个是它所控制的动画作用的目标物体,我们不用管。在运行时,它会自动设定为当前所属的按钮物体。

    3.Hover

      当鼠标光标划过时,按钮控件的大小变化。

    4.Pressed

      当按钮按下时,按钮控件的大小变化。

    5.Duration

      完成缩放动画的时间,以秒为单位,默认为0.2秒完成。

    需要注意的是,这个组件一般只用于按钮。

 

制作按钮的偏移动画

  如果希望按钮有一个偏移动画,例如,单击按钮时按钮会向右下方蹦一下,可以为按钮制作一个偏移动画。选择NGUI->Interaction->ButtonOffset,附加到按钮上。

  ButtonOffset的设置:

    1.Hover

      按钮在鼠标光标滑过时的位置偏移,这里偏移的是相对坐标。

    2.Pressed

      按钮在按下时的位置偏移,这里也是相对坐标。

    3.Duration

      持续时间。

 

制作按钮的旋转动画

  如果希望按钮在被单击时能旋转一下,就可以为按钮制作一个旋转动画,选择NGUI->Interaction->ButtonRotation。

 

添加按钮单击音效

  在AddComponent中,选择NGUI->Interaction->PlaySound附加到按钮上。

  PlaySound的设置:

    1.AudioClicp

      音效的源文件,将音效文件拖到此处即可。

    2.Trigger

      触发模式,就是在什么情况下触发音效,默认为OnClick。这里给了以下几种模式:OnClick(单击)、OnMouseOver(鼠标光标移上来)、OnMouseOut(鼠标光标移开触发)、OnPress(按下触发)、OnRelease(释放触发)、Custom(自定义触发,即脚本中控制触发)。

    3.Volume

      音量大小,为0到1之间的一个浮点数。

    4.Pitch

      音调,也为0到1之前的一个浮点数。

 

posted @ 2016-09-09 03:44  _Soy  阅读(2498)  评论(0编辑  收藏  举报