展会信息港展会大全

Cocos2d-x 3.2 之 进度条 progressTimer
来源:互联网   发布日期:2015-09-27 15:30:10   浏览:1332次  

导读: 好长时间没有更博了。。 有点懒� !� 亲身经历提示广大猿们:换季了,防感冒! 言归正传,最近在做 三消的手游, 关卡设计是没指望了,只能做个限时的,所以,就研究了研究schedul...

好长时间没有更博了。。

有点懒埃。

亲身经历提示广大猿们:换季了,防感冒!

言归正传,最近在做 三消的手游,

关卡设计是没指望了,只能做个限时的,所以,就研究了研究schedule,

这个以后再更新,

度娘搜索的时候,看到了进度条的progressTimer,

这个很好玩的样子,于是就做了下,感觉不错。

1.What?

API解释:

ProgressTimer是Node的子类。 该类根据百分比来渲染显示内部的Sprite对象。 变化方向包括径向,水平或者垂直方向。

就是这样的情况:

2. How?

这个的实现就是通过progressTimer

与之前版本不同,

之前版本类型很多:

kCCProgressTimerTypeRadialCCW, 扇形逆时针形式

kCCProgressTimerTypeRadialCW, 扇形顺时针形式

kCCProgressTimerTypeHorizontalBarLR, 从左往右增张的形式

kCCProgressTimerTypeHorizontalBarRL, 从右往左增张的形式

kCCProgressTimerTypeVerticalBarBT, 从下往上增张的形式

kCCProgressTimerTypeVerticalBarTB, 从上往下增张的形式

而现在Type只有两种:

①条型的设置

就是第三个图:

// 添加图片

auto sprite = Sprite::create(h7.png);

// 新建progressTimer对象,将图片载入进去

ProgressTimer *ct= ProgressTimer::create(sprite);

ct->setPosition(Point(visibleSize.width/2,visibleSize.height/2));

// 设置Tag,为后面更新准备

ct->setTag(10);

ct->setScale(0.2);

this -> addChild(ct);

// 设置初始的百分比,0~100 可以是0或者100

ct->setPercentage(0);

// 选择类型,是条型还是时针型

ct->setType(kCCProgressTimerTypeBar);

//ct->setReverseProgress(true);

// 下面两个条形的进阶

ct->setMidpoint(Point(0,0));

ct->setBarChangeRate(Point(0,1));

scheduleUpdate();

然后,在.h 声明函数 void update( float t )

在.cpp定义函数

void HelloWorld::update( float t )

{

// 通过上面Tag设置,获取对象

CCProgressTimer *ct=(CCProgressTimer*)getChildByTag(10);

// 获取当前进度

int num = ct->getPercentage();

// 设置进度速度(此处为每帧+1)

ct->setPercentage( ++num );

// 设置了循环播放

if( num >= 100 )

ct -> setPercentage(0);

}

此处,我是通过帧数来控制的速度,

当然也可以通过 自己调用的update来设置速度。

条形的可以从上到下,从下向上,或者从中间向两边

这个的控制,就是通过上面代码中,进阶的部分:

ct->setMidpoint(Point(0,0));

ct->setBarChangeRate(Point(0,1));

setMidpoint 是定义从哪开始

这个和锚点的设置一样,0,0左下角,1,1是右上角

setBarChangeRate 是 定义 方向

1,0是自下而上

0,1是自左向右

②时针型的设置

// 添加图片

auto sprite = Sprite::create(h7.png);

// 新建progressTimer对象,将图片载入进去

ProgressTimer *ct= ProgressTimer::create(sprite);

ct->setPosition(Point(visibleSize.width/2,visibleSize.height/2));

// 设置Tag,为后面更新准备

ct->setTag(10);

ct->setScale(0.2);

this -> addChild(ct);

// 设置初始的百分比,0~100 可以是0或者100

ct->setPercentage(0);

// 选择类型,是条型还是时针型

ct->setType(kCCProgressTimerTypeRadial);

ct->setReverseProgress(false);

// 下面两个条形的进阶

// ct->setMidpoint(Point(0,0));

// ct->setBarChangeRate(Point(0,1));

scheduleUpdate();

update函数还是那样,

默认是顺时针,

setReverseProgress

——false 顺时针

——true 逆时针

这样第二个的图片就实现了。

③ 第一个图片那种如何实现呢?

其实,So easy

只需要弄一张暗一点的图片,在底下衬着:

auto sprite2 = Sprite::create(h7_02.png);

sprite2->setScale(0.2);

sprite2->setPosition(Point(visibleSize.width/2,visibleSize.height/2));

this -> addChild(sprite2);

就是这样~

进度条你学会了吗?

同为新手,如有错误,敬请指出,共同进步 O(∩_∩)O~

赞助本站

人工智能实验室
AiLab云推荐
推荐内容
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港