好长时间没有更博了。。
有点懒埃。
亲身经历提示广大猿们:换季了,防感冒!
言归正传,最近在做 三消的手游,
关卡设计是没指望了,只能做个限时的,所以,就研究了研究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~