实现各种效果和功能的按钮,读这篇文章就够了

简介: 本文主要内容包含各种效果和功能的按钮的实现方法,以及应用场景。如果你没有任何的游戏开发经验,欢迎阅读我的“人人都能做游戏”系列教程,它会手把手的教你做出自己的第一个小游戏。

本文主要内容包含各种效果和功能的按钮的实现方法,以及应用场景。

如果你没有任何的游戏开发经验,欢迎阅读我的“人人都能做游戏”系列教程,它会手把手的教你做出自己的第一个小游戏。



按钮是一个在游戏中非常常用的组件,包含各种各样的形态和功能,今天就在这篇文章里汇总一下拥有各种不同点击效果的按钮,以及一些具有不同触发条件的按钮的实现方法。


在游戏设计中有一个名词叫“反馈”,大体就是指当玩家在进行游戏时,游戏所给予玩家的一些东西,比如常见的在点击按钮时,按钮会变换颜色,或进行缩放,或播放音效等等。总之,不论玩家在游戏中进行任何的操作,游戏都应该给予玩家一个合理的反馈。让玩家能够明白他的操作所获得的结果是什么。


一个拥有着合理反馈的游戏一定也伴随着良好的用户体验。我们经常会在游戏中点击各种各样的按钮,所以,对于一个按钮来说,点击后有反馈是很重要的。


首先,我们利用小游戏开发工具提供的各种行为,来实现几个拥有不同动势的按钮。


抖动的按钮


我们使用一个容器来代表一个按钮,容器中包含两部分内容,一个是按钮显示的文字,一个是按钮的图片。



选中“抖动按钮”容器,为其增加一个“抖动”的行为。



设置一下抖动行为的参数。



最后,为抖动按钮容器增加按钮点击的逻辑。



非常的简单,当按钮点击时,我们让其抖动一下即可。


这样一个点击时触发抖动的按钮就做好啦!



弹出的按钮


接下来,我们制作一个弹出按钮,与抖动按钮一样,我们也为弹出按钮新建一个容器,然后为其添加一个“弹出”行为。



设置一下弹出行为的属性。



最后,为弹出按钮容器增加按钮点击逻辑。



一个有弹出效果的按钮就完成啦!



翻转的按钮


同样的创建一个“翻转按钮”的容器,为其增加一个“翻转”行为。



调整翻转行为的属性。



增加翻转逻辑积木。



一个点击可以翻转的按钮就出来啦!




旋转的按钮


创建一个“旋转按钮”的容器,为其增加一个“旋转”行为。



调整旋转行为的属性。



增加旋转逻辑积木。


这里的旋转积木仍然使用了“翻转”来命名,这里大概是工具开发者的疏忽吧!

预览一下可以旋转的按钮。旋转效果比较适合正方形或者圆形的按钮。



上述就是我们可以直接利用工具提供的“行为”实现的不同按钮点击的效果了。可以看到每个行为中都配有不同的参数,大家可以通过调整参数,来实现自己想要的行为效果。


接下来我们介绍一下如何利用“会动的按钮”来吸引玩家的注意力。


在一个页面中,如果你想让用户额外的关注某一部分,通常有三种不同的方法。第一种是通过布局和占用面积,让需要关注的那个部分尽可能的在屏幕上方(打开任何的一个页面,人们总是习惯从上往下看),占用面积尽可能的大。另一个方式是通过颜色的搭配,来重点突出某一区域的颜色,来引起重点关注。除此之外,还有一个方法就是让需要关注的地方“动起来”。想象一下在一个静态的页面中,如果只有一个按钮在跳动,那么你是很难不注意到它的。


下面我们就实现几个拥有不同的“动起来”的效果的按钮,并且介绍一下它们的用途。


不停缩放的按钮


首先,创建一个按钮容器,然后为其增加如下的逻辑。



预览一下按钮的效果。



这种按钮比较适合用于游戏中的复活场景,点击按钮进行复活,类似于心脏的起搏,来引导玩家进行复活操作。


精致1010中的复活按钮,就使用了这种效果,另外搭配上了复活的倒计时,可以很好的引导玩家进行复活操作。



另外,在游戏结束后,如果玩家刷新了自己的最高分,同样的也让“分享”按钮动起来,让玩家注意到,这样更有可能产生分享操作。



上下浮动的提示按钮


同样的,先创建按钮容器,然后增加如下的逻辑。



预览看一下效果。



这里我使用的是上下的浮动,大家可以根据需要去实现各个方向上的浮动效果。


这种效果比较适合游戏中的需要提示地方,在新手教程中会经常用到,来告诉玩家点击这里或者是点那里。


精致1010中,我将这种效果用在了提示玩家使用道具上。可以看到同时也是搭配了倒计时一起使用,给予玩家足够的反应和判断时间。



另外,我们上方讲过的利用四种不同的行为实现的按钮效果,同样也可以用于实现各种“动起来”的按钮效果,比如说可以隔一段时间旋转一下,翻转一下或者缩放一下等等,具体的实现逻辑都类似,大家可以根据自己游戏的实际情况,酌情选择不同的按钮效果。


最后,我们来讲一下几个具有不同触发条件的按钮的实现方式。


当前工具已经给我们提供了 5 种不同的触发条件,在此就不再赘述。



长按触发的按钮


首先,我们实现一下长按按钮触发的功能,例如长按按钮 1 秒钟之后才进行触发。


先创建一个按钮,然后为其设置两个局部变量。



触发时间”用于控制按住按钮后多长时间后触发,“开始时间”用于记录当开始点击按钮那一刻的时间。


接着,看一下按钮的实现逻辑。



这里有两块积木需要重点解释一下。


全局计时器:从游戏开始时,这个计时器就开始记录游戏的时间,我们可以通过它来获取到游戏一共进行了多少时间,它的单位是以秒计的。


停止当前精灵的其他事件:这个积木块的作用是可以强行的终止一个事件的运行。例如我们的按下事件正在等待触发时间,此时如果调用“停止事件”积木块,就可以强行的终止按下事件中的逻辑,也就是说我们的按下事件不会再继续执行等待,也不会最终触发。


了解了这两块积木,游戏逻辑就比较好理解了,当按下时,先记录开始时间,然后去不停的判断当前度过的时间是否超过“触发时间”,超过的话,则执行触发逻辑(这里将按钮变红当作触发)。如果在等待期间松手了,那么就强行终止按下的逻辑,按钮也就没有机会被触发了。


预览,看一下长按按钮的效果。



长按按钮 1 秒钟后,按钮变红。


按住后以一定时间间隔触发的按钮


接下来,我们实现一下按住后以一定的时间间隔触发的按钮。


首先还是创建两个需要使用的局部变量。



“开始时间”用于记录每次循环开始的时间,“间隔时间”用于设置触发的间隔。


接着看一下具体的逻辑。



逻辑与长按触发类似,我们通过设置数字的增加来表示逻辑的触发。


点击预览看一下效果。



按住按钮没间隔 0.2 秒触发一次。

在射击游戏中通常不同的武器会有不同的攻击速度,我们可以通过武器的攻击速度来设置触发的间隔时间,实现不同的武器拥有不同射速的功能。

不知道你发现了没有,不论是“长按触发”还是“长按间隔触发”,我都使用的“按下”和“放开”事件,而没有使用“按住”事件,这是为什么呢?留一点儿小疑问,你可以去尝试一下能不能利用“按住”事件实现同样的功能。


按住后可拖动的按钮


最后,我们来实现一个可以按住拖动的按钮。首先创建一个变量。用于记录当前按钮是否被按住。



然后,实现一下逻辑。



逻辑非常的简单,“被按住”变量用于标识当前是否被按住,如果被按住的话,我们就将按钮的位置设置到手指的位置。


预览一下效果。



在拖拽的实现中我仍然没有使用“按住”事件,其实是可以通过“按住”事件来设置按钮的位置的。



你可以尝试一下在“按住”事件中设置位置,然后预览游戏,按住按钮进行快速的拖动,试过之后就能明白为什么不在“按住”事件中处理逻辑了。


总结一下, 在这篇文章中我们讲述了各种各样的按钮。我们可以利用工具提供的各种行为来快速的实现不同的按钮点击效果, 也可以通过“会动的按钮”来引导玩家去关注界面中的某些部分。最后,我们讲了一下在不同条件下触发的一些按钮的实现方式。


我把所有的按钮整理到了一个项目中,项目名称叫做:按钮大集合。



**按钮大集合项目已经开源到社区,大家有需要的可以去自行获取进行改编或参考

希望这篇文章可以帮助你了解到各种各样的按钮以及其应用的场景和实现方法。你可以根据自己游戏的实际情况以及自己想要达到的目的来选择不同的按钮进行使用。


最后欢迎支持一下我的微信小游戏作品“精致1010”,一个会不停成长的小游戏。

精致1010

美好的四季送给你

小程序

如果你对游戏开发感兴趣,欢迎关注我,如果你有对游戏开发感兴趣的朋友,也欢迎把这个系列文章推荐给他。

相关文章
|
4月前
|
Java 双11 Nacos
《淘宝双11同款:基于 Sentinel 的微服务流量防卫兵实战》
本文深度解析阿里双11同款微服务防护利器——Sentinel,涵盖流量控制、熔断降级、系统自适应保护及Nacos动态规则等核心实战,助你构建高并发、高可用的韧性架构。(239字)
AutoJs曲线滑动---贝塞尔曲线
AutoJs曲线滑动---贝塞尔曲线
761 0
|
6月前
|
存储 弹性计算 对象存储
阿里云服务器租用费用价格:2026手动整理一年、1个月和1小时收费标准
2026年阿里云服务器租用价格出炉,涵盖轻量应用服务器、ECS、GPU服务器等多种类型。提供38元/年起秒杀价,99元/年起爆款套餐,支持按年、月、小时计费,覆盖个人开发者至企业级应用场景,附带详细选型建议与附加费用说明。
814 10
|
弹性计算 JavaScript 应用服务中间件
在一台ECS服务器上优雅部署多环境:实践攻略
在ECS上部署多环境应用,通过Nginx反向代理实现。规划端口或子域名区分开发、测试和生产环境。配置应用监听不同端口,如Node.js应用修改启动脚本。【6月更文挑战第21天】
843 3
|
设计模式 安全 测试技术
编程中常见的技术难题有哪些?
编程中常见的技术难题有哪些?
|
人工智能 API Android开发
LLM大模型知识整理大全
本文介绍了多个大模型训练和部署工具及教程。使用unsloth支持llama3,显存占用约8G;GPT4ALL加载训练好的大模型;llama.cpp进行4bit量化后可用CPU运行。MAID手机App和MLC软件可在安卓设备上本地运行大模型或调用API。FASTGPT用于客制化大模型和AI私有化客服。相关教程链接已提供。
630 12
|
前端开发 算法 JavaScript
React原理之Diff算法
【8月更文挑战第24天】
|
图形学
【实现100个unity特效】shader实现3D物品闪光和描边效果
【实现100个unity特效】shader实现3D物品闪光和描边效果
679 0
|
机器学习/深度学习 存储 自然语言处理
大模型面经答案—强化学习:理论解释与讲解
微信上偷来的文章(哈哈(ಡωಡ)hiahiahiahiahiahia),我可是选的转载的,收藏起来自己偷偷复习大模型,希望能赶上下一波风口。
|
UED
Axure中继器实战篇:让数据展示和交互设计更上一层楼!
Axure中继器实战篇:让数据展示和交互设计更上一层楼!
866 0

热门文章

最新文章