如何利用定时器实现倒计时效果
发表时间: 2018-08-09 14:59:20 阶段:高级 分类:实例应用
  本教程由闪艺作者【抵不过一个双儿】提供,小伙伴们想分享自己的教程,也可在圈子教程征集活动中参与哦~
 
 

被阉割了的效果图镇楼,好好的倒计时不知道为什么变成了这样QAQ,不过还是能够从中看出一些大致的

效果,希望各位观众老爷不要嫌弃。
 
本效果适用情况:
计时养成、计时密室逃脱、计时小游戏
 
相关教程:
系统时间与定时器介绍
http://www.3000.com/course/118.html
如何使用高级界面数值条
http://www.3000.com/course/6.html
(ps:该教程中计算上限数值和当前数值的横向值与纵向值部分比较复杂,本教程中会细说)
 
1.1该步骤制作思路
 
在想要实现一个效果之前,往往我们必须现在心里有一个大致的构想,我想实现怎样的效果?明确了这个
问题之后,我们就容易构建制作思路。
 
在本教程中,我们要制作的是倒计时效果,那么看到倒计时这三个字,某葵的心中就浮现了一个问题那就
是到底需要计时多少秒?因为我们制作的是倒计时效果,那么需要倒计时的总秒数就是整个效果的开端,
既然如此,设定倒计时总秒数就肯定是我们第一步要做的事。
 
 
1.2设定初始数值
 
在制作工具的基础界面中点选数值设置的选项卡,点击设置初始数值。
 
本教程的制作中涉及到了数值条,为了能够灵活的更改数值条,所以某葵在此处设置时设置了两个数值,
一个是总秒数一个是变化秒数,由于倒计时还没有开始,所以,变化秒数和总秒数是相等的。
点选确定后,第一步就完成了。
 
2.1该步骤制作思路
 
完成第一步后我们已经有了计时总长,接下来就该考虑怎么让它倒起来了,并且这个效果还和定时有关,
在制作工具中除了倒计时选项,我们唯一能想到的就是定时器了。
 
2.2了解定时器功能
 
点选高级界面按钮点击新增界面,点击下图所示定时器按钮。
 
我们会看到界面上出现了一个如上图的小闹钟,双击这个小闹钟得到如下图界面。
 
我们可以从上图看到,定时器设置里有定时时长和运行次数,这两个参数是定时器所特有的,而对这两个
参数的更改决定了定时器的运行方式。
 
为什么这么说呢?因为定时器本身就如同它的图标那样履行着一个闹钟的功能,闹钟到了你设置的时间点
时会通过声响来提醒你起床或者做一些必须要做的事情,而对于定时器来说同理,定时时长即你所设定的
闹钟会响的时间节点,由于在本教程所做的倒计时效果中一般而言都是一秒一秒的倒计时,所以我们把定
时时长设为1s。而运行次数则像你设置几个闹钟,这取决于你需要做多少件需要闹钟提醒的事在这里不论
是循环或者设置特定次数都可以,以倒计时5s为例,我可以选择计数次数为5次也可以选择勾选循环模式,
不过为了方便一个计时器多用,在这里我们就勾选循环模式吧。
 
如果某葵这样说各位观众老爷有不明白的可以察看第一楼计时器相关教程,楼下回复的话某葵看到也会第一
时间回复的。
 
2.3编辑定时器的内部事件(不明白内部事件与外部事件的话可以参考某葵之前写过的
养成教程:http://qz.3000test.com/topic/5418.html或者评论区回复哦。)
 
好了,现在我们已经把定时器设置完了,那么问题就来了我们设置了那么多定时器是要提醒我们做什么事情?
在本教程中当然就是完成倒计时这样一个动作了。那么我们又该如何实现这样的计时功能呢?之前某葵也有提
到过,倒计时一般是一秒一秒倒退的,转换成数值来说就是秒数不断的-1直到为0秒,既然有了这样一个思路
我们就可以开始操作了。
 
点击下图所示位置打开定时器的动作编辑界面
 
选择每次定时结束的选显卡,点击下图所示的小加号添加动作
按照我们之前所分析的加入数值操作:
 
点选确定后,第二步完成。
 
3.1该步骤制作思路
 
现在我们已经拥有了可以倒计时的手段,现在就是如何把你的时间限制表现给玩家,让玩家能够体验到一
种紧迫感从而加强作品体验的时候,此时制作的思路有两种,一种是使用文本框,一种是使用数值条。
 
文本框的好处在于制作简单、看起来也很直观,坏处是紧张感不如数值条强,而数值条的好处就是在紧张
感强,但是就时间的细微流逝来看表现力度不如文本框,而且在小游戏中一般来说使用文本框更多,因为
数值条如果想表现细微的时间流逝必须很长,长到你做一个2分钟的小游戏,这个数值条就必须能被切成
120份,且每一份都用肉眼可以清楚地观察到。
 
不知道大家有没有玩过仙剑奇侠传三,在这部作品中所有的限时选项均用数值条来表示时间的流逝,但是
限时小游戏中却都用文本框来表示时间的流逝也就是因为这个道理,不过由于这两种表现方式都有非常
广泛的应用所以某葵这里都会说到,各位观众老爷也可以有选择性地运用到自己的作品当中。
 
3.2文本框显示
我们完成第2步点选返回上一级,点选下图标红按钮:
 
接下来会出现下图界面,双击下图标红位置
 
会看到文本框的编辑界面,将文本框内部的文字删除干净,选择数值设置选项卡,然后点选插入数值,选
择自己在定时器中存放的数值即可。
 
完成之后别忘了回到编辑计时器的界面修改计时器的内部动作,加上刷新该文本框,才可以让文本框的内
容即时显示。刷新设置如下:
设置完毕后,将文本框和定时器放入你需要的位置,顺带一提,定时器放在任何界面上都不会被显示出来,
所以把它扔在一个小角落里,它就可以发挥作用啦。
 
3.3数值条显示
 
创建一个新的数值条方法与创建文本框类似,在容器编辑界面点选数值条,
双击出现的数值条进入下图编辑界面:
 
先将准备好的数值条前景图与背景图导入,至于什么是前景图什么是背景图,第一楼中关于数值条的教程
有详细描述,所以某葵也就不多赘述了。在上图中可以看到数值条中也和定时器一样有与众不同的可以设
定的参数,那我们不妨点开来看一下,于是我们得到了下图。
 
来一个一个看一下,第一个有很多箭头的东西叫变化方向,顾名思义就是朝哪个方向变化,由于一般情况
下数值条中所呈现的数值都是由大到小在变化的,所以我们可以认为这个变化方向指的就是你数值条中最
小的值所在的方位,这边由于是个条形的数值条所以保持默认就好了。
 
第二个可以改变的是变化方式,个人觉得只要前景图与背景图的大小一致,用拉伸或者填充都没有什么问
题,如果大小不一致的话,长条这样的形状使用拉伸,不规则形状使用填充就好。
 
第三个是改变上限数值的横向值和纵向值,个人理解是,上限数值的横向值决定了一个数值条横过来算的
总长对应的是多大一个数值,在我们的一个横向数值条中,这个值自然就是最大值,纵向值同理,我这里
为了让数值条更灵活从而把上限设为了变量,其实各位观众老爷完全可以根据自己的需求来选择是否使用
固定数值或者别的数值。
 
由于我们这是一个横向数值条,所以可以随意设定大小,注意与当前数值的纵向值一致即可,不过请千万
不要把这个值设成0,你可以简单的把它当作设为0时数值条的宽度就为0了,所以显示不出来。但其实是
因为内部的计算数值条比例的公式导致它显示不出来,这就比较复杂了,想知道详细的可以去参考第一楼
数值条相关教程,其实作为作者我们也不需要知道那么多,基本上只要把前景图和背景图制作成一样的大
小我们是不需要进行公式方面的转换或者运算的。
 
第四个是当前数值的横向值与纵向值设置与第三个类似,不多赘述。
 
好啦,对数值条的参数修改完之后,我们返回上一级对定时器进行修改,其实只要把之前的刷新对话框更
改为刷新数值条即可。
 
4.显示
 
我们现在已经把该做的都做完了,最后只要把数值条、文本框还有定时器放入高级界面/剧情中就可以了,
不过这里我们就又会发现一个小问题,一切都安置完之后,倒计时结束了却不能正常的结束作品,尤其是
在玩家没有任何操作但是时间却到了的情况下这该怎么办呢?
 
我们把需要进行倒计时的剧情设为自动播放,等待时间设置为你需要倒计时的时间即可,1s=1000ms哦
 
设置完毕之后,我们就可以收工了。
 
——————————————————————THE   END——————————————————————
TOP