cocos create 实现圆形的进度条

最新推荐文章于 2024-05-22 20:35:16 发布
最新推荐文章于 2024-05-22 20:35:16 发布
阅读量8.8k 收藏 10
点赞数 5
文章标签： cocoscreate 圆形进度条
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/erweimac/article/details/80453170
版权

注意:可以不需要创建进度条直接使用图片即可实现效果，步奏不变

在编辑器上创建一个进度条，修改bar里sprite的属性

如图所示 设置图片的type = FILLED,Fill Type = RADIAL,FillCenter(0.5,0.5),FillStart=0.25(让图片从最高点开始）

获取bar 这个精灵 然后this.bar.fillRange = 0.8  

以上步骤就可以实现create的圆形进度条

淡乄
关注
  • 5
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CocosCreator 正多边形遮罩Shader
01-22
CocosCreator2.4.7 我经常用来把sprite裁剪成正多边形显示，代替导致高DrawCall的mask裁剪。
Cocos Creator之进度条功能（一）
programmer_trip的博客
11-17 6775
激发我写这个博客的原因是因为当时想做一个进度条（图形不是方方正正的，两侧是圆角，通过使用ProgressBar组件，在伸缩时会发生变形，不能满足进度条功能，通过同事的指点，发现这个圆角图片实现进度条可以使用Sprite组件的Filled渲染模式，因此将这个问题总结以帮助和我一样遇到这个问题的人，或者至少我可以从这里总结经验） 使用Sprite组件实现进度条功能： Sprite组件的渲染模式有五种类...
cocos creator做圆形进度条
最新发布
silent_F的博客
05-22 411
效果图：我们在开发过程中经常要用到圆形进度条，例如技能CD之前写了一篇,这里简单记录下在cocosCreator中如何制作。
【Qt】Qt产生随机数
热门推荐
C/C++软件工程师、嵌入式软件工程师、物联网研发工程师、C/C++讲师、物联网讲师、嵌入式讲师---欢迎大家一起交流(私信添加博主微信)
03-23 1万+
00. 目录 文章目录00. 目录01. 概述02. 开发环境03. QRandomGenerator类介绍04. 程序示例05. 执行结果06. 附录 01. 概述 随机数就是就随机数种子中取出的数。 种子就是个序号，这个序号交给一个数列管理器，通过这个序号，你从管理器中取出一个数列，这个数列就是你通过那个序号得到的随机数。 但这个随技术并不真正随机。因为它是通过某个算法的得到。也就是说你给数列管理器同一个序号将得到同样一个“随机”数列。也就是说种子和随机数列是一一对应的。 {An}=f(x), x 就是
cocos creator shader 方形头像变为圆形头像
lck8989的博客
12-27 2727
将方形头像转变为圆形头像我起初的思路就是，先在一个图片上绘制一个在中心点带颜色的圆： 1：如果uv坐标在圆内的话就会和图片的颜色进行混合只不过混合的时候，带颜色的圆的插值为0，图片的插值为1 2：如果uv坐标不在圆内的话就将图片颜色的插值设置为0并且将圆的颜色的插值也设置为0 用到的数学知识是：r < 在圆内，否则在圆外 // Copyright (c) 2017...
Cocos Creator之微信小游戏的进度条（填充模式）
weixin_40855248的博客
04-18 3181
1、在需要的地方添加UI组件进度条（ProgressBar）： 图中将进度条背景和进度条分开，便于观察理解。 2、将进度条显示图的渲染模式改为Filled（填充模式），填充起始位置（Fill Start）改为0，填充总量（Fill Range）改为1（截图中为0.5，即进度条加载到50%）：3、代码控制加载进度条的填充总量： //获取到进度条图片 let btn_leftPosition = cc...
【游戏客户端】如何实现环形进度条
Lampard的博客
01-24 2298
今天主要是分享如何在cocos制作一个环形的进度条
Cocos Create 实现下拉框效果
11-07
博主自创的下拉框样式，有需要的带走，或发邮箱1014250276@qq.com联系
cocos2d实现progress(进度条效果)
02-28
如slider(滑块),button(按钮),RollNumber(数字滚动),Progress(进度条)....控件一一在我的博客里面公布，可以直接使用.源码打包下载 开发人员:Jason's.Alex QQ:531401335 csdn博客:http://blog.csdn.net/RuShrooM
cocos creator 图片圆形shader
11-18
cocos creator 图片圆形shader
cocos create js 黄金矿工
03-14
cocos create 最新学习demo
cocoscreator 实现的 开心消消乐
11-03
用creator实现的三消游戏，creator1.8 版本。算是比较完整的版本。实现了很多特效，效果。
Dart数组常用方法
大灰狼的小绵羊哥哥的博客
11-28 6570
一、数组的定义 1、定义固定类型数组 // 定义固定类型的数组 var list = List<int>(); print('$list - length: ${list.length}'); // 输出 [] - 0 复制代码 2、定义固定长度数组 var list2 = List(2); print('$list2'); // [null, null] 复制代码 3、定义混合类型数组 var list3 = List<dynamic>(); list3.a
COCOS2D-X之圆形进度条的一个简单Demo
源码剖析之COCOS2D-X
09-10 4636
这应该是游戏中很常见的一个效果.显示某个事件的进度等.加载资源或者联网的时候经常用到. 一、我们直接在COCOS2D-X自带的HelloCpp的工程中添加代码即可.我们在初始化中添加如下代码: CCSprite* pSprite = CCSprite::create("A.png");//暂且说是蓝色背景吧 pSprite->setPosition(CCPointMake(szWin.
Cocos Creater 自定义倒计时
Damien_J_Scott的博客
12-13 595
最近游戏里需要一个道具倒计时的功能提供玩家可以和道具持续时间的交互，于是记录下，方便以后查看 进度条UI制作 首先进度条只是个普通的样式，直接拿Photoshop画了个圆角矩形，给了无填充和20px边。 加入组件 注意这里Type要选择Filled，这样之后才能使用后面的根据百分比绘制 当然图片给了一点opacity，要不然太亮了。 Code 接下来就是代码块了，实现了代码，只用在启用的时候call 一下startCountDown()就可以了。 // Learn TypeScript: // .
Creator 设置圆形进度条
WLinyi的博客
09-14 3574
如图设置图片的Type 为FILLED ，FillType 为RADIAL ，FillCenter（图片扇形中心）为cc.p（0.5,0.5） ，FillStart（开始部分）为0.25（最高点开始） 注：yuanxing为拖进去的图片节点 //圆形滚动条     _yuangundontiao:function(){         this.yuanxing.getCompon
【cocos creator】cocos create 图片实现圆形的进度条
烧仙草奶茶的博客
07-20 1727
转载自https://blog.csdn.net/erweimac/article/details/80453170 注意:可以不需要创建进度条直接使用图片即可实现效果，步奏不变 在编辑器上创建一个进度条，修改bar里sprite的属性 如图所示 设置图片的type = FILLED,Fill Type = RADIAL,FillCenter(0.5,0.5),FillStart=0.25(让图片从最高点开始） 获取bar 这个精灵 然后this.bar.fillRange = 0.8 以上步骤就可以.
《Cocos Creator游戏实战》实现环形进度条
热爱代码
01-09 3276
实现环形进度条 准备图片 添加并设置节点 编写脚本 在本节教程中笔者会带大家做一个环形进度条，炒鸡简单的啦。 运行效果如下： Cocos Creator版本：2.2.0 后台回复"环形进度条"，获取该项目完整文件： 准备图片 首先我们在PhotoShop中制作一张圆环图片(在上面加些渐变会更好看点)，做好后存储为png格式： 添加并设置节点 在层...
flutter基础 dart语言学习笔记
呵呵的牛
08-11 759
1.JIT(Just-In-Time 动态编译) 即时编译为什么能大幅度提升性能 JIT，即Just-in-time,动态(即时)编译，边运行边编译； https://book.flutterchina.club/chapter1/dart.html flutter中文网 或者让演员表演两分钟，再看两分钟脚本，思考一下，再表演两分钟，再看一会脚本，思考一下。。。恩。。。 这就是 JIT 的原理。批量的把一件事情先整理成为目标能够直接接受的方式，然后直接运行。 2.AOT (Ahead-Of-Time-预先
cocos2.7数据加载进度条
06-10
在 Cocos2d-x 2.7 版本中，你可以使用 `CCProgressTimer` 类来创建一个进度条来显示数据加载的进度。具体的实现步骤如下： 1. 创建一个进度条对象 ``` CCProgressTimer* progress = CCProgressTimer::create(CCSprite::create("progressbar.png")); progress->setType(kCCProgressTimerTypeBar); progress->setMidpoint(ccp(0, 0.5)); progress->setBarChangeRate(ccp(1, 0)); progress->setPosition(ccp(winSize.width / 2, winSize.height / 2)); this->addChild(progress); ``` 其中，`progressbar.png` 是进度条的图片，可以自己定义。`setType` 方法设置进度条的类型为水平条，`setMidpoint` 方法设置进度条的起点为左侧中间位置，`setBarChangeRate` 方法设置进度条的变化速率为水平方向。 2. 加载数据时更新进度条 在加载数据时，可以根据已经加载的数据量和总数据量来计算加载进度，并将进度条的百分比设置为相应的值。 ``` // 加载数据的过程中 int loadedData = 0; // 已经加载的数据量 int totalData = 100; // 总数据量 float percent = (float)loadedData / totalData * 100; // 计算进度百分比 progress->setPercentage(percent); // 设置进度条的百分比 ``` 其中，`loadedData` 表示已经加载的数据量，`totalData` 表示总数据量，`percent` 表示已经加载的数据量占总数据量的百分比，`setPercentage` 方法将进度条的百分比设置为相应的值。 3. 加载完成时隐藏进度条 当数据加载完成时，可以将进度条隐藏起来。 ``` // 数据加载完成后 progress->setVisible(false); // 隐藏进度条 ``` 这样，你就可以在 Cocos2d-x 2.7 中使用 `CCProgressTimer` 类来创建一个数据加载进度条了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值