位置: 编程技术 - 正文
Cocos2dx3.2编写常用UI组件（二）滚动计数器NumberScroller(cocos2dx怎么用)
编辑：rootadmin推荐整理分享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 转载请保留说明！
](https://www.jiuchutong.com/image/20240129/1706495836.jpg)
