Unity UI -- (5)增加基础按钮功能

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

分析分析一些常见UI

        良好的UI设计会清晰地和用户沟通。用户知道他们能和屏幕上哪些东西交互,哪些不能。如果他们进行了交互,他们也要清楚地知道交互是否成功。换句话说,UI要提供给用户很多反馈。

        我们可以来看看在Unity里或者在计算机上的任何应用程序:

  •         将鼠标悬停在一个按钮上,会发生什么?
  •         选择一个按钮会发生什么?
  •         当一个物体被选中,你是怎么知道它被选中的?

        下面是一些实例:

Unity UI -- (5)增加基础按钮功能

        当鼠标悬停在Google Docs里的Edit按钮时,按钮底色会加深,让其更加显目。当然在某些应用中,改变的是文字的颜色而不是背景色。一般来说,如果按钮是浅色的,则通常在悬停时会让它的颜色变深色以便对比突出。 

        如果按钮本身是深色的,则通常会让其变成浅色。

Unity UI -- (5)增加基础按钮功能

         当我们点击或选中了一个按钮,它会再次变色,通常会是一个更加醒目的颜色。

Unity UI -- (5)增加基础按钮功能

Unity UI -- (5)增加基础按钮功能

         我们可以尝试观察一下电脑上的其他应用程序的UI的相关变化。

编辑按钮的颜色转换

        Unity允许我们控制按钮的颜色反馈,以便更好地和用户沟通。

        1. 保持Settings Button游戏物体处于选中状态,在Button组件中定位到Transition属性。这个属性默认值应该是Color Tint。

Unity UI -- (5)增加基础按钮功能

            当使用Color Tint时,当用户和按钮交互时,按钮的颜色可以发生变化。我们也可以使用Sprite Swap在进行交互时改变按钮所使用的的图片,或者使用Animation选项播放自定义的按钮动画。

            下图展示了Color Tint方式的默认颜色配置:

Unity UI -- (5)增加基础按钮功能

                Normal Color:纯白。表示按钮在普通状态下的颜色。

                Highlighted Color: 对比Normal Color,只有一点点灰(具体数值可以点击颜色条查看)。当用户悬停在按钮上时的颜色。

                Pressed Color:更加醒目的灰色。用户按住按钮时的颜色(比如鼠标按下不放)。

                Selected Color:和Highlighted Color一样的颜色。当用户点击了按钮后的颜色,如果用户再次点击了其它按钮或屏幕的空白处,则按钮会恢复到Normal Color。本案例中这个颜色没有什么作用,因为后面我们实现的功能是当设置按钮被点击后,按钮会隐藏。

                Disabled Color:深灰色。当按钮被禁用时的颜色。本案例中不涉及这种颜色的使用。

                Color Multiplier:增加按钮上颜色色调的效果。如果我们有一个深色按钮或半透明按钮,这个属性会比较有帮助。

        2. 运行场景,和设置按钮进行交互看看效果。

            在Play模式中,可以尝试去改改这些颜色,看看效果。

增加On Click事件的action

        接下来我们让应用能响应用户的点击。本案例中,用户可以通过点击设置按钮进入设置菜单界面。

        当用户点击了设置按钮时,设置菜单会出现。

Unity UI -- (5)增加基础按钮功能

        当用户点击了设置菜单里的退出按钮时,会返回标题界面。

Unity UI -- (5)增加基础按钮功能

        首先我们来完成点击设置按钮,进入设置菜单的功能。

        1. 在Hierarchy中,激活Title Text和Settings Button游戏物体,关闭Settings Menu游戏物体(可以右键点击此物体选择Toggle Active state,也可以选中游戏物体后在Inspector中的勾选或去勾选最上面的复选框)。

Unity UI -- (5)增加基础按钮功能

            现在设置菜单会被隐藏掉。

Unity UI -- (5)增加基础按钮功能

        2. 选择Settings Button,在Button组件中定位到On Click()部分。 

Unity UI -- (5)增加基础按钮功能

            在On Click框中,我们会看到“List is Empty"。这意味着当按钮被选择时(点击),不会发生任何事情。

            On Click是一个UnityEvent。UnityEvents可以在特定事件发生时,触发任意数量的动作。在本案例中,“Event”是指按钮的点击。

        3. 选择“+”按钮,添加一个新的动作。

Unity UI -- (5)增加基础按钮功能

            默认情况下,action是空的。

在设置按钮被点击时让设置菜单出现

        为一个UnityEvent选择一个功能有两步:

                1. 选择我们要执行功能的物体。

                2. 从这个物体中选择一个我们想要执行的功能。

        默认情况下,Object字段没有赋值,显示的是None(Object)。由于我们想要的是设置菜单出现,因此我们要将它赋值到这里。

        1. 在Hierarchy中,点击并拖拽Settins Menu游戏物体到前面说的空Object字段。

Unity UI -- (5)增加基础按钮功能

            我们会看到No Funtion下拉菜单现在会可用。No Funtion意味着还没有从这个物体中选任何功能。我们现在要选择我们希望在按钮点击事件发生时,要使用Settings Menu的哪个功能(也叫函数,方法,动作)。

        2. 在No Funtion处的下拉菜单中选择GameObject > SetActive(bool)。当我们在这个菜单中进行查看时,实际是浏览了在这个物体上关联的脚本中的可用的功能方法。

Unity UI -- (5)增加基础按钮功能

            选择了GameObject > SetActive(bool)之后,意思是当按钮被点击时,执行GameObject脚本里的SetAvctive函数。

            现在我们会注意到,在Settings Menu物体右边会出现一个小的复选框。

Unity UI -- (5)增加基础按钮功能

            由于我们所选择的SetAcive(boiol)函数,需要一个布尔值作为输入参数,因此这里的复选框就表示了这个布尔值。由于我们想要设置菜单变为Active,因此这个布尔值应该为true。

        3. 将这个复选框勾选上,表示我们会传递true到SetAcive()函数,让设置菜单变为Active。

Unity UI -- (5)增加基础按钮功能

         运行场景看看,当我们点击设置按钮时,设置菜单会出现,但设置菜单可能会覆盖在标题上面(取决于你自己所定义的设置菜单位置和大小)。我们想要的效果是进入设置菜单后标题和设置按钮就不显示了。

让标题和设置按钮消失

        当我们点击设置按钮时,我们同时希望标题和设置按钮也消失。这可以通过和上一小节中的类似的方法实现。添加两个On Click的功能函数,分别选择Settings Button和Title Text物体,并且这次将SetActive的参数设置为false即可。

Unity UI -- (5)增加基础按钮功能

挑战:导航回标题界面

        挑战一下,实现从设置菜单点击退出按钮后返回标题界面的功能。返回标题界面后,需要重新显示标题和设置按钮。文章来源地址https://www.toymoban.com/news/detail-492848.html

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

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

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

相关文章

  • UI设计中按钮如何设计,常见的按钮设计类型

    按钮设计在UI工作中十分常见,但细节处理不到位的情况却时有发生。按钮充当了用户与系统之间对话的作用,也是交互设计的基本要素之一。UI中的按钮怎么设计?本文将展开详细的介绍。 UI中的按钮怎么设计? 1、匹配品牌 按钮设计中非常重要的一点就是与它的使用环境相匹

    2024年02月15日
    浏览(23)
  • Unity UI -- (6)增加Toggle和Slider

            在前面的小节中,我们已经有了一个空的设置菜单。现在让我们来添加设置选项。         在本节最后,我们的设置菜单的样子参考如下:         现在让我们来增加一个toggle,让用户能够通过它来对场景的音乐进行开关。         1. 激活Settings Menu有我物体,隐藏

    2024年02月06日
    浏览(26)
  • 第四十章 Unity 按钮 (Button) UI

    本章节我们介绍一下按钮UI。首先,我们创建一个新的场景“SampleScene3.unity”。然后,在菜单栏中点击“GameObject”-“UI”-“Button”,截图如下 我们选中刚刚创建的Button,然后查看它的Inspector检视面板,如下所示 我们发现Button UI元素即拥有Image组件,还拥有自己的Button组件。

    2024年02月03日
    浏览(67)
  • C语言中常见的一些语法概念和功能

    常用代码:  程序入口: int main() 函数用于定义 程序的入口点 。 输出:使用 printf() 函数可以在控制台 打印输出 。 输入:使用 scanf() 函数可以接收 用户的输入 。 条件判断:使用 if-else 语句可以根据 条件执行不同的代码块 。 循环结构:使用 for 循环、 while 循环或 do-whil

    2024年02月11日
    浏览(19)
  • Goland2023版新UI的debug模式调试框按钮功能说明

            Jetbrains家的IDE的UI基本都是一样的,debug模式的调试框按钮排列也是一致的,但是在我使用Goland2023版的新UI时,发现调试框的按钮变化还是很大的,有一些按钮被收起来了,如果看之前的博客会发现有一些文中的旧UI按钮找不到了,即使找到了也对应不上新UI的按钮

    2024年02月09日
    浏览(30)
  • Element ui 里面 Table 通过点击操作按钮实现展开行功能

    1.直接上代码,个人随记   2.script 里的内容 3.实现效果  

    2024年02月10日
    浏览(31)
  • Unity实现UI按钮Button的按下、抬起、移出、移入事件

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

    2024年03月14日
    浏览(49)
  • Godot 4 源码分析 - 增加格式化字符串功能

    Godot 4的主要字符串类型为String,已经设计得比较完善了,但有一个问题,格式化这块没怎么考虑。 String中有一个format函数,但这个函数只有两个参数,这咋用? 查找使用例子,都是这种效果 一看就懵。哪里有之前用的带%s %d...之类的格式化用得舒服。 动手实现一个 提供s

    2024年02月14日
    浏览(30)
  • 【分析绘图】R语言实现一些常见的绘图

    微生信-在线绘图网站 线性图 频率分布直方图 Venn图 柱状累计分布图 箱体图 热图

    2024年02月11日
    浏览(20)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包