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

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

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

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


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


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


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


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


抖动的按钮


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


640.png


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


640.png


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


640.png


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


640.png


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


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


640.gif


弹出按钮


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


640.png


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


640.png


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


640.png


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


640.gif


转的按


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


640.png


调整翻转行为的属性。


c4020ee6da0c180c643ba851926f3349.png


增加翻转逻辑积木。


e8a093366a793096549818d0bfd76ec4.png


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


image.gif2c023ca933cf7f88e5ab30f5edb39bb1.gif



转的按钮


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


e1da382f9a455d14be2f9dfe2bec5725.png


调整旋转行为的属性。


68aaf3257784f903fce413cca8f176dd.png


增加旋转逻辑积木。


eed5ddade670e7de209179cfdf09b99f.png

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

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


8ad94778f30e5d6c2863aabe5ea11fac.gif


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


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


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


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


不停缩放的按钮


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


abcdab2d9b2bf504568cd9dc65e9b472.png


预览一下按钮的效果。


56a9de8dbcc1ef04f8a221688e497831.gif


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


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


d38189da99f4aee6dbfbd528f6c71b25.gif


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


ac6d5cc0b0ec8ed3f0ff87dd82202f40.gif

相关文章
|
4月前
|
数据可视化 测试技术 API
阅读源码有哪些好方式与好步骤
阅读源码是理解软件工作原理的关键。首先,了解背景、目的和技术栈。从文件头部的文档注释开始,逐步深入到复杂代码。利用Git、调试器和分析工具辅助理解。保持批判性思维,质疑代码设计并验证理解。拆分代码块,画图展示结构,使用版本控制追踪变更。搜索、阅读文档、API和单元测试以深化理解。参与讨论,做笔记,回顾历史版本,了解上下文,并通过实践加强领悟。每个人的方法可能不同,关键是持续学习和适应。
49 1
|
4月前
|
缓存
Quarto 入门教程 (3):细节设置
Quarto 入门教程 (3):细节设置
181 1
|
小程序 开发工具 UED
实现各种效果和功能的按钮,读这篇文章就够了
本文主要内容包含各种效果和功能的按钮的实现方法,以及应用场景。 如果你没有任何的游戏开发经验,欢迎阅读我的“人人都能做游戏”系列教程,它会手把手的教你做出自己的第一个小游戏。
139 0
|
存储 小程序 容器
想做个答题类的微信小游戏?读这篇文章就够了
本文重要内容包含答题类小游戏的制作原理和制作方法,在掌握实现原理和方法后,你也能够根据自己的需要,制作自己的答题类小游戏。 如果你没有任何的游戏开发经验,欢迎阅读我的“人人都能做游戏”系列教程,它会手把手的教你做出自己的第一个小游戏。
197 0
|
存储 开发者
彻底搞懂函数,读这篇文章就够了
如果你之前使用过任何一门编程语言,那么对于你来讲想必已经知道什么是函数,以及如何使用函数了,那你大可不必往下读了。这篇文章是写给新手看的,也就是说我假设你对于函数没有任何的概念。 我们就先从什么是函数来说起吧!
105 0
|
小程序
关于游戏背景图的调整,读这篇文章就够了
嗨!大叫好,我是小蚂蚁。最近看有很多问关于游戏背景图的问题,是该选择适应还是选择拉伸?是该适配宽度还是适配高度?不想要背景图去自动适配,想要自定义怎么办?这篇文章就分享一下与调整游戏背景图有关的那些事儿。
104 0
|
SQL 数据库
CRUP为后面使用框架在页面上增删改查做下铺垫.(一)
CRUP为后面使用框架在页面上增删改查做下铺垫.(一)
138 0
CRUP为后面使用框架在页面上增删改查做下铺垫.(一)
|
数据库
【高效编码】查询日志的命令老是记不住?没关系,这篇文章帮你记
您好,我是码农飞哥,一直想飞暂时在跑个那个老哥。
250 0
【高效编码】查询日志的命令老是记不住?没关系,这篇文章帮你记
|
iOS开发
iOS开发 - 写一个刷新的控件(未封装,适合新手学习,查看原理)
iOS开发 - 写一个刷新的控件(未封装,适合新手学习,查看原理)
143 0
iOS开发 - 写一个刷新的控件(未封装,适合新手学习,查看原理)
CRUP为后面使用框架在页面上增删改查做下铺垫.(二)
CRUP为后面使用框架在页面上增删改查做下铺垫.(二)
93 0