制作按钮(Button)

Posted 2020-08-08 _Soy

按钮的核心作用

　　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之前的一个浮点数。