位置: 编程技术 - 正文
推荐整理分享Cocos2dx3.2编写常用UI组件(二)滚动计数器NumberScroller(cocos2dx怎么用),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:cocos2dx schedule,cocos用什么写代码,cocos代码,cocos编程语言,cocos2d schedule,cocos2djs,cocos编程,cocos2djs,内容如对您有帮助,希望把文章链接给更多的朋友!
前言:
废话不多说,先看最终效果图
正文:
1、使用说明:
①引入头文件 “NumberScroller.h"
②用NumberScroller::create(int length,int fontSize) 函数来创建NumberScroller对象
③利用setNumber(int number)函数来设置计时器里面的(这里只实现了向后滚动,即设置的要大于等于当前)
④利用getNumber获得当前计数器显示的
⑤利用setTime(float time)函数来设置计时器滚动的速度,默认为1
2、实现思路:
①根据输入的长度length确定计时器的长度(即多少位)
②根据输入的fontSize确定字体大小
③创建length条并排放置的竖着的从(注意末尾有个零)
④根据设置的数字,不同的竖条移动相应的位置。
⑤利用遮罩层遮罩
3、源码解析:
对应思路①②
先暂时不用看设置遮罩层部分,前面只是保存长度和字体大小到成员变量中,下面的一个for循环就是用来排好length列数字的
其中这里出现了一个NumberColumn类,表示一列数字
具体的初始化函数如下
NumberColumn的init函数里面,除了保存长度和字体大小和启动update外,接下来就是构造一个的竖列
注意,我们这里把所有Label都放在一个Node里面,这样可使我们更方便的操作
最后,回到NumberScroller 初始化完的效果是这样子(无遮罩)的:
NumberScroller最重要的函数还是setNumber
可以看出都是间接地调用NumberColumn的setNumber方法
奇怪啦,NumberColumn也只是简单的把传来的number保存到m_target_num里面,还有计算滚动的速度 也没有实现滚动的动作啊
奥秘在于NumberColumn启动的update函数
update函数便是实现滚动效果的核心,每一行都给了详细的注释
因为我们这里要实现的是类于时钟的滚动效果(秒针转1圈时,分针转1/圈),应用到计时器,个位滚动次,十位才会转一下
所以对应每一条NumberColum,其对应的m_cur_num是不一样的。
例如这个数 ,第一条(百位)对应的m_cur_num应该是9,第二条(十位)对应的m_cur_num应该是,第三条(个位)对应的m_cur_num应该是
由于setNumber时候计算了速度:
间隔越大,速度越快,因此保证了每条NumberColumn均会在m_time时间内完成滚动
有了上面的介绍,再回过头来再看一次NumberScroller的setNumber函数,是不是恍然大悟呢
完成效果后如下:
最后,添加遮罩层,只显示当前数字部分。
关于遮罩的基本知识,推荐一个很好的blog
Cocos2dx3.2编写常用UI组件(三)收集器效果Collector 前言:在游戏中,我们经常可以看到,获取分数后,分数会自动升到对应的分数栏上面。今天我们就来实现这种效果正文:这种效果实现起来其实非常
Cocos2dx3.2编写常用UI组件(四)发光的标题BlinkTitile 前言:如果看了上一节我推荐的blog,并且掌握了遮罩层的运用,那么本节介绍的发光标题就非常的简单了。没有看也没关系,现在我来具体讲一下Clippin
cocos2dx中的AndroidManifest.xml文件详解 原创作品,允许转载,转载时请务必以超链接形式标明文章原始出处、作者信息和本声明。否则将追究法律责任。
标签: cocos2dx怎么用
本文链接地址:https://www.jiuchutong.com/biancheng/372733.html 转载请保留说明!友情链接: 武汉网站建设