专栏首页韩东吉的Unity杂货铺零基础入门 15: UGUI Button

零基础入门 15: UGUI Button

按钮对于一个应用或者游戏来说。必不可少,今天这篇分享,来说下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杂货铺(DeveloperJimin),作者:Jimin

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-02-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 零基础入门 8: Canvas和EventSystem

    UGUI是新版Unity自带的原生UI系统,组件也在不断的增加扩展,基本的贴图,文本,按钮等还是可以用的。接下来的几篇内容会以UGUI展开分享。

    韩东吉
  • 零基础入门 28:MessageBox的制作和使用

    上一篇分享了项目中的菊花loading如何制作和使用,这篇分析依然围绕项目实用功能组件介绍。

    韩东吉
  • 从象棋到太极,领悟学习之道(三)

    前俩节讲述了学习要“树正观”,“划小圈”。那最后的一小节,就来讲述下学习之道的第三点,也是最后一点,建组块。

    韩东吉
  • Vmware - 安装并启动 Centos 8

    https://mirrors.aliyun.com/centos/8.1.1911/isos/x86_64/

    小菠萝测试笔记
  • 快速学习-在线人数统计

    cwl_java
  • ROS2零基础快速入门

    ROS1和2官网入门教程已经趋于一致,不要通过学习ROS1掌握ROS2,如果之前没有接触过ROS,可以直接了解一下ROS2,有需要再学习,“ROS不是万能的”。

    zhangrelay
  • Qml之variant与var对比

    Qt君
  • 探索Redis设计与实现8:连接底层与表面的数据结构robj

    本系列文章将整理到我在GitHub上的《Java面试指南》仓库,更多精彩内容请到我的仓库里查看

    Java技术江湖
  • 用SoapUI进行Webservice的性能压力测试

    转载:http://www.cnblogs.com/fnng/archive/2011/08/11/2135440.html

    跟着阿笨一起玩NET
  • Python测试开发-浅谈如何自动化生成测试脚本

    在右边,点击选择要关联的接口,区分是否要登录,如需登录,在选择接口栏下,点击登录按钮,即选择了该接口。如下图1所示:

    测试开发社区

扫码关注云+社区

领取腾讯云代金券