第四十章 Unity 按钮 (Button) UI

这篇具有很好参考价值的文章主要介绍了第四十章 Unity 按钮 (Button) UI。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本章节我们介绍一下按钮UI。首先,我们创建一个新的场景“SampleScene3.unity”。然后,在菜单栏中点击“GameObject”->“UI”->“Button”,截图如下

第四十章 Unity 按钮 (Button) UI

我们选中刚刚创建的Button,然后查看它的Inspector检视面板,如下所示

第四十章 Unity 按钮 (Button) UI

我们发现Button UI元素即拥有Image组件,还拥有自己的Button组件。也就是说,我们可以给当前的按钮添加一张图片作为背景,事实上我们在现实开发中也经常这样做。这里,我们准备了一张按钮的背景图片(button.png),如下所示

第四十章 Unity 按钮 (Button) UI

我们把图片(button.png)的类型改成“Sprite(2D and UI)”精灵,然后拖拽到Image组件的Source Image选项中去,如下所示

第四十章 Unity 按钮 (Button) UI

这里,我们点击“Set Native Size”按钮,让Button去适应图片的尺寸,效果如下

第四十章 Unity 按钮 (Button) UI

如何修改Button的文字呢?我们查看层次面板发现,Button下面有一个Text

第四十章 Unity 按钮 (Button) UI

他们是父子关系,想要修改Button的文字内容,就可以修改Text里面的内容即可

第四十章 Unity 按钮 (Button) UI

我们修改了文字内容,字号大小,以及字体颜色,效果如下

第四十章 Unity 按钮 (Button) UI

接下来,我们就介绍它独有的Button组件的各个属性

第四十章 Unity 按钮 (Button) UI

我们逐一介绍上面的内容

Interactable按钮是可以接受点击事件,默认勾选即可。

Transition按钮点击效果,默认是Color Tint,也就是按钮的颜色改变。当然还有其他方式,他们分别是None(不做任何变动)、Color Tint(颜色改变) 、Sprite Swap(图片切换) 、Animation(执行动画)。这四种过渡方式其实就是当你点击按钮前、按下按钮时、离开按钮后按钮的一种变换过程而已。

Target Graphic 就是按钮使用的图片源。

Normal Color 就是按钮默认状态的颜色。

Highlighted Color 就是按钮高亮颜色。

Pressed Color 就是按钮按下时的颜色

Selected Color 就是按钮选中时候的颜色

Disable Color 就是按钮失效时候的颜色

Color Multiplier 则是颜色乘数值,默认1即可。

Fade Duration 则是按钮颜色切换的时间(单位秒)。

接下来,就是Navigation和Visualize用来设置UI元素的导航。在EventSystem中,存在一个当前被选中按钮,我们可以通过代码按下的上下左右,使被选中按钮进行更改。Automatic(自动导航):自动识别最近的一个控件并导航到下一个控件。None(关闭):关闭导航。Horizontal(水平导航):水平方向导航到下一个控件。Vertical(垂直导航):垂直方向导航到下一个控件。Explicit(指定导航):特别指定在按下特定方向键时从此按钮导航到哪一个控件。关于这个,我们就不详细介绍了。

接下来就是重点了,也就是我们的On Click() 列表。很多情况下,我们是希望点击按钮(发生点击事件)后执行一段逻辑代码(响应点击事件),那么我们应该如何操作呢?我们首先创建一个“ClickEventScript.cs”的脚本文件,代码如下

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class ClickEventScript : MonoBehaviour
{
    public void testClick()
    {
        Debug.Log("点击了!");
    }
}

我们删除了Start和Update两个方法,同时添加了一个普通的“testClick”方法。然后,我们将这个脚本文件附加到“Main Carmera”游戏对象上面。

第四十章 Unity 按钮 (Button) UI

接下来,我们回到Button组件下的“On Click()”,如下所示

第四十章 Unity 按钮 (Button) UI

我们点击右下角的“+”号来添加“Main Carmera”游戏对象。

第四十章 Unity 按钮 (Button) UI

将“Main Carmera”从Hierarchy层次面板中拖拽到上面的“None (Object)”中。

第四十章 Unity 按钮 (Button) UI

然后,我们点击“No Function”选择我们刚刚创建的脚本“ClickEventScript.cs”中的的“testClick”方法。

第四十章 Unity 按钮 (Button) UI

在On Click的下面的列表中,分为左右两个选框,左边的选框是游戏对象,这个选框我们使用“Main Carmera”,因为我们将“EventScript.cs”脚本附加到它的上面了。右边的选框则是游戏对象身上的组件方法,因此我们可以选取到“EventScript.cs”中定义号的“testClick”方法。最终的效果如下所示

第四十章 Unity 按钮 (Button) UI

上面的Runtime Only 表示仅在运行时,其事件处理功能才起作用。

接下来,我们就可以运行整个项目,点击“Button”来查看是否触发“testClick”方法。

第四十章 Unity 按钮 (Button) UI

控制台已经显示了打印日志了,我们的“testClick”方法被成功调用了。

本课程涉及的内容已经共享到百度网盘:https://pan.baidu.com/s/1e1jClK3MnN66GlxBmqoJWA?pwd=b2id文章来源地址https://www.toymoban.com/news/detail-437446.html

到了这里,关于第四十章 Unity 按钮 (Button) UI的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Unity实现UI按钮Button的按下、抬起、移出、移入事件

    实现思路, 1、重新写类,继承Button,在类中实现相关的事件响应。 2、将类挂载到Cavas下创建的Button按钮上,挂载之前需先移除Button默认的组件button。 3、编写代码给按钮添加事件,这一步与默认的 onClick.AddListener 用法没什么区别。 个人认为这种方法比较灵活,做个记录,方便

    2024年03月14日
    浏览(49)
  • 第四十五章 Unity 滚动视图 (Scroll View) UI

    我们介绍一下滚动条 (Scrollbar),它允许用户滚动由于太大而无法完全看到的图像或其他视图。这种效果在我们网页中经常看到,尤其是网页内容太长的时候,就会在垂直方向出现滚动条。当然,有时候也会在水平方向出现滚动条。我们拖动滚动条就能看到剩余的内容。通常情

    2024年02月05日
    浏览(21)
  • 第四十一章 Unity 输入框 (Input Field) UI

    本章节我们学习输入框 (Input Field),它可以帮助我们获取用户的输入。我们点击菜单栏“GameObject”-“UI”-“Input Field”,我们调整一下它的位置,效果如下 我们在层次面板中发现,这个InputField UI元素包含两个子元素,一个是Placeholder,另一个是Text。如下所示 同样,我们查看

    2024年02月04日
    浏览(27)
  • Android学习之路(5) UI控件之Button (按钮)与 ImageButton (图像按钮)

    本节引言: 今天给大家介绍的Android基本控件中的两个按钮控件,Button普通按钮和ImageButton图像按钮; 其实ImageButton和Button的用法基本类似,至于与图片相关的则和后面ImageView相同,所以本节 只对Button进行讲解,另外Button是TextView的子类,所以TextView上很多属性也可以应用到

    2024年02月12日
    浏览(32)
  • Android学习之路(4) UI控件之Button (按钮)与 ImageButton (图像按钮)

    本节引言: 今天给大家介绍的Android基本控件中的两个按钮控件,Button普通按钮和ImageButton图像按钮; 其实ImageButton和Button的用法基本类似,至于与图片相关的则和后面ImageView相同,所以本节 只对Button进行讲解,另外Button是TextView的子类,所以TextView上很多属性也可以应用到

    2024年02月12日
    浏览(37)
  • 【Unity】Button基础-按钮更换图片样式

    话说,今天修改了一下项目中的内容,发现按钮不怎么好看,想用图片的方式改一改,然后点开Button,忽然发现好多内容都忘记了。。。 Transition(过渡方式):按钮在状态改变时自身的过渡方式: Color Tint(颜色改变)  Sprite Swap(图片切换)  Animation(执行动画)(后面有

    2023年04月14日
    浏览(36)
  • 第四十六章 Unity 布局(上)

    学习了UI元素的使用,并不能构建出一个完整的UI界面,我们需要使用一些方法将这些UI元素按照“设计稿”的效果,将其摆放到对应的位置上。如何摆放这些UI元素,就是我们需要讲的“布局”,当然这需要借助一些布局组件来完成。我们知道在画布Canvas下的每个UI元素都会自

    2024年02月03日
    浏览(24)
  • Unity UGUI之Button按钮点击事件

    组件基本知识:Unity UGUI之Button控件的简单认识-CSDN博客 按钮添加点击事件虽然比较简单,但是使用不同的方法灵活应用开发起来效率会更高。 1、当我们控制Unity一些组件的事件是组件本身自带的,那么我们就可以考虑直接通过Button的On Click()中“+”按钮,添加一个新事件,然

    2024年02月05日
    浏览(34)
  • iOS开发Swift-3-UI与按钮Button-摇骰子App

    1.创建新项目Dice  2.图标  删去AppIcon,将解压后的AppIcon.appiconset文件拖入Assets包。  3.将素材点数1-6通过网页制作成2x,3x版本并拖入Asset。  4.设置对应的UI。  5.拖入Button组件并设置style。  6.Ctrl加拖拽将Button拖拽到ViewController里,并设置Connection,Name等,并点击Connect。  同样

    2024年02月11日
    浏览(31)
  • Unity中,点击按钮Button,控制,动画Animator暂停播放

    在Unity中,你可以使用以下脚本来实现点击按钮时停止动画的功能: using UnityEngine; using UnityEngine.UI; public class StopAnimationOnClick : MonoBehaviour {     public Animator animator;     public Button button;     private bool isAnimationPlaying = true;     private void Start()     {         button.onClick.AddListen

    2024年04月27日
    浏览(31)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包