按钮对于一个应用或者游戏来说。必不可少,今天这篇分享,来说下UGUI里的按钮,Button组件。
进入正题
打开Unity,在场景中创建一个Button,来看下他身上的自带组件。
如下图。
创建后可以看出,Button是由Image和Button两个组件组成的。Image组件就不用多说了,我们来看下Button组件的内容。
Interactable:交互,默认开启,Enable状态,如果取消对勾,则代表按钮失效,进入Disable状态。
Transition:动画过渡效果,Unity自带的Button有以下几种按钮的动画效果。
第一个代表没有任何效果。
第二个是颜色的过渡效果。
第三个是贴图切换效果。
第四个是支持Animation动画效果。
分别来简单演示下这几种效果。(第一种直接忽略了)
Color Tint也是默认的Button过渡效果。Target Graphic是颜色过渡的目标贴图。
如下是一些操作图
如上图,我们把Color Tint过渡的几个颜色分别进行设置。
Normal Color代表了默认颜色
Highlighted Color代表了高亮的颜色
Pressed Color代表按住的颜色
Disabled Color代表Disable状态的颜色。
Color Multiplier代表了颜色的乘数,即当前的RGB*参数,默认是1
Fade Duration代表了动画过渡的时间
上图我们对颜色进行了设置,接下来运行模式下看看各个效果。
接下来我们导入几张图片到项目中,然后把过渡切换成第三种,图形切换过渡。
如上图,我们进行了几个操作,首先把默认Image增加一个贴图默认显示,选择iu0,然后切换按钮动画为Sprite Swap,分别为高亮、按住、以及Disabled三种状态增加要切换的图片。
运行效果如下。
最后我们把动画效果切换为第四个,Animation。可以看到我们切换为第4个的时候,默认会有对应的Trigger,然后我们点击自动生成动画。会提示我们保存位置和名字,然后点击创建后就可以在Animation对四种状态进行编辑了。
如下图,我简单对四种状态做了一些操作,normal我们什么都不动,然后高亮的时候我们增加了特殊的颜色显示,按住的时候我们缩小了按钮的缩放。然后disable状态的时候,我们修改了图片的透明度。
然后来运行下看看效果。黑色为高亮状态动画,缩小代表Pressed状态,disable状态为透明度变化。
Navigation代表了按钮的导航。
OnClick()代表了按钮的点击事件。如下图,我们为按钮的点击增加了一个事件,就是控制Light的Active(显示和隐藏)。这种属于不需要写代码来实现按钮的一部分点击实现,但是能实现的内容比较局限。
如下图,默认灯光亮的,点击按钮后灯光隐藏。
相信大家也都看见了,Button这个对象下面还有一个默认叫做Text的对象,代表了按钮上要显示的文字。
默认的文字是Button,这个就不多说了,和Text的使用是一样的,如下图,我们把图上的文字做了一些小修改。
接下来,我们创建一个脚本,来通过脚本对按钮进行一些操作。
还是老路子,创建脚本,创建Button对象,将脚本拖到Canvas上。在Unity里创建按钮,然后将Unity的按钮拖动到脚本上进行关联。
套图如下......
然后在脚本内打开Start方法,对button进行一些脚本控制。从下图可以看到,通过Btn的.可以点出很多变量。
下图我们对按钮的几个操作进行设置。
这里附上注释
然后我们切回Unity看下运行效果。如上图代码,我们把按钮的组件设置为False,所以Button组件的对勾就消失了,然后我们把交互也设置成了false,所以交互前面的对勾也是没有的。颜色为空色。如下图。
接下来,我们通过代码来设置按钮的点击事件。如下图,btn.onClick.AddListener就是为按钮增加点击事件的函数,只不过我比较喜欢用下图这种lanbomda表达式的写法。()=>{}就是lanbomda表达式的写法。可以把要实现的事放到{}里面即可。如下图,我们增加了一句日志输出。
为了让按钮可以点击,我们把按钮的enable和interactable都设置为True。
切回Unity查看效果,然后点击按钮。
如果不习惯用这种表达式的也可以在AddListener里增加函数名,然后再新的函数里实现按钮的点击事件。
切回Unity查看效果
好了,今天对UGUI Button的分享就到这里了。
新年已过,又开始了上班的日子,大家努力工作哟。
接下来的内容依然不定期更新(ヾ( ̄▽ ̄)Bye~Bye~)
本文分享自 韩东吉的Unity杂货铺 微信公众号,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体同步曝光计划 ,欢迎热爱写作的你一起参与!