cocos 数字滚动

最新推荐文章于 2024-05-31 18:39:22 发布
最新推荐文章于 2024-05-31 18:39:22 发布
阅读量277 收藏
点赞数
文章标签： javascript vue js canvas web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35516360/article/details/122064784
版权
本文介绍了使用cocos创建数字滚动效果的方法，通过mask显示图片中的单个字符，并利用tween动画实现数字的递增递减，达到无限滚动的视觉效果。在数值达到边界时，数字会自动归位。为了避免在动画进行时的误触，建议在移动过程中禁用点击事件。
摘要由CSDN通过智能技术生成

原文链接: cocos 数字滚动

上一篇: 使用canvas做纯色或渐变色图片优化 img图片拉伸

下一篇: 一个比较好看的彩带飘飞和点击效果 canvas实现

效果如下

up-460c86bc7398d1f3485685a5f5e9761b7b5.gif

基本思想, 用mask只显示图片中的一个字符,  每次加减使用tween动画移动里面的图片, 如果移动到0或者9, 移动结束后归位, 这样就造成了无限移动的假象, 这个技巧居然是动效小姐姐教我的 -_-||

注意复原的时候需要在该次动效执行完成后再执行, 然后就是为了逻辑简单, 最好是在移动过程中禁止点击...

首先借助之前那个web的数字滚动生成竖条的数字, 注意首尾都多了一个数字, 用作循环使用

https://my.oschina.net/ahaoboy/blog/4758127 


      // 生成竖条的数字
      const c =
最低0.47元/天 解锁文章
阿豪boy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Cocos Creator 开发实战——数字滚动
creator_HY的博客
01-27 1639
Cocos Creator 开发实战——数字滚动代码原理 Cocos Creator 开发实战——数字滚动        国际惯例先看效果： 代码        代码比较简单，先看代码后讲原理 properties: { m_label: cc.Node, //m_label: cc.Label, ...
cocos2d实现RollNunber(数字滚动效果)
02-28
这半年一直在用object-c开发一个ios游戏。使用cocos2d和box2d 。开发游戏变的简单多了。这游戏开发了半年多了。直到最近这个游戏停止了，因为资金问题，老大没法在发更多的工资了。哎，真的非常遗憾，我一个人完成游戏的编辑器开发，脚本开发，游戏代码开发，很不容易，因为我学object-c,coco2d才看了2个星期的书就直接开发了,以前是搞c++的吗。感觉4个人开发游戏真的很累，游戏为了脱颖出更加真实的效果还使用了物理引擎,在老大的同意的情况下，我共享cocos2d自己写的一些大家比较常用的，因为cocos2d有些控件不怎么好用或者没有,反正我觉得是这样的。如slider(滑块),button(按钮),RollNumber(数字滚动),Progress(进度条)....控件一一在我的博客里面公布，可以直接使用.源码打包下载 开发人员:Jason's.Alex QQ:531401335 csdn博客:http://blog.csdn.net/RuShrooM
怎么在安卓布局里设置滚动字体_cocos creator项目实战【滚动的数字】教程
weixin_39851048的博客
11-22 165
待完善，实现多位数的滚动效果）x的ccc引擎的label组件已经自带简单的数字滚动效果，准备自定义字体配合label，详情可查看官方的吃星星案例，下面主要讲自己代码实现的滚动效果自己代码实现的滚动效果1、 准备0~9的素材2、 滚动的数字，数字需要连接起来，可是我们只能显示一个数字范围，所以我们要把其他的数字裁剪掉3、 9—>0的时候，我们需要9-->0，所以需要2个0~9相连接4、 ...
cocosCreator2.x数字滚动组件 开箱即用
最新发布
weixin_42253927的博客
05-31 162
cocosCreator 数字滚动组件
cocos数字滚动
han_ooo的博客
04-11 1086
egret数字滚动 今天分享一个非常简单的小功能：数字滚动，源码地址在底部。先看效果： 这个效果使用cc.tween制作，代码量非常少，下面这些就是全部的功能代码： 当前代码实现的只有整数部分滚动，没有做小数部分，想要实现小数部分也很简单，只要把set部分的Math.floor(text)更改成Math.floor(text * 100) / 100即可实现小数点后两位滚动。总之很简单的一个小功能...
cocos 数字滚动、数字过渡动画
PrimaryColor
04-10 345
/ console.log('修改ing', start + (end - start) * time);console.log('结束了，看看值', sdk.a);
cocos2d-x 滚动数字label
weixin_30567471的博客
03-16 331
游戏中有时候需要滚动计数显示，比如添加金币从100滚动显示到9999，这里封装一个动作，直接传入label即可，方便使用。 使用时调用UtilsLabel里面的方法即可。 // // UtilsLabel.hpp // ActionLabel // // Created by xujw on 16/3/7. // // #ifndef UtilsLab...
Cocos Creator 数字滚动
07-16
Cocos Creator 数字滚动，Cocos Creator 所有版本都已经可使用
Cocos Creator 3.4.2 实现滚动数字效果
04-18
滚动数字可以通过帧动画来实现，将每个数字0-9作为一个单独的帧，然后通过顺序播放这些帧来模拟数字滚动的效果。这需要对`Animation`组件和`Animator`控制器有深入理解。 4. **编程逻辑**： 使用JavaScript或...
cocoscreator中的自定义数字滚动效果
11-02
在Cocos Creator游戏开发框架中，自定义数字滚动效果是一个常见的需求，特别是在表现数值变化、计分系统或者加载进度时。本知识点将深入探讨如何利用Cocos Creator的特性，结合TypeScript编程语言来实现这样的效果。...
cocos2dx 数字滚动特效源码
01-09
cocos2dx 的 数字滚动特效源码 ，xcode 环境编译
cocos2d-x Number(图片显示数字)
04-11
游戏开发的时候，很多地方需要用图片显示数字。我写了一个比较完整的类，给cocos2d-x的朋友使用。 支持浮点数字的显示和整形 创建的时候调用 Number* num = Number::create(); 之后设置一个KeyName 假设你的图片叫 baise0.png,baise1.png...... 小数点的图片是:basep.png (p是point的意思，呵呵) 那么keyName，你写baise. 测试表示图片名不能用中文名字,不然容易出错 属性offsetX是指调整图片之间的空隙。比如写0.1,那么图片之间的空隙缩小0.1 之后还可以设置对其方式，我写了三种，左，中，右 最后吧，我也需要点积分，所以顶份3，大家别吐槽我哈。呵呵 要是着急需要，又没有积分的朋友，可以在csdn 上联系我。
iOS cocos2d 实现RollNumber(数字滚动效果)控件效果源码
Jason's.Alex c++编程的博客
02-28 5713
开发人员:Jason's.Alex   QQ:531401335 csdn博客:http://blog.csdn.net/RuShrooM // // UiNumRoll.h // WheelScore // // 自定义数字精灵 // //开发人员:Jason's.Alex //QQ:531401335 #import #import "cocos2d.h"
Cocos2dx3.2编写常用UI组件（二）滚动计数器NumberScroller
何自健的博客
01-26 2916
前言： 废话不多说，先看最终效果图 正文： 1、使用说明： ①引入头文件 “NumberScroller.h" ②用NumberScroller::create(int length,int fontSize) 函数来创建NumberScroller对象 ③利用setNumber（int number）函数来设置计时器里面的值（这里只实现了向后滚动，即设置的值要大于等于当前值）
游戏中怎么实现滚动数字？Cocos Creator 实现！
一枚小工
11-14 1984
效果预览▌滚动数字的效果预览，位数设置：10，初始值：0，测试时，把显示数字手动修改为 1234567890 的效果，#免费提供代码#，具体获取方法，参考文章结尾部分。使用说明▌创建一...
cocos2d-js 数字自动滚动效果
在代码身上，用心去飞翔
10-12 598
实现方式一： 从数字1滚动到数字2，并显示增加减少数量 rollFightNum: function(num1, num2) { if (!this._powerLabelClone) { this._powerLabelClone = this._powerLabel.clone(); this._powerBg.addChild(this._powerL...
cocoscreator 数字滚动效果
05-20
Cocos Creator 中可以使用动作（Action）来创建数字滚动效果。下面是一个简单的示例代码： 1. 创建一个空节点，将它命名为“NumberRoller”。 2. 在“NumberRoller”节点下创建三个 Label 节点，分别命名为“Num1...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值