Cocos2dx:自定义进度条显示.

在cocos2dx中显示进度条是不太难的,当然也可以利用进度条的特性,来做一些别的事情.比如:慢慢的显示图片的一部分等等.
下面看代码:

auto visibleSize = Director::getInstance()->getVisibleSize();
    Vec2 origin = Director::getInstance()->getVisibleOrigin();


    auto sp = Sprite::create("HelloWorld.png");
    //把精灵放到进度条中显示.
    auto progress = ProgressTimer::create(sp);
    //设置位置.
    progress->setPosition(Vec2(origin.x + visibleSize.width / 2, origin.y + visibleSize.height / 2));
    //设置类型.
    progress->setType(ProgressTimer::Type::BAR);
    //设置起始位置.
    progress->setMidpoint(Vec2(0,0));
    //设置进度条滚动的方向.
    progress->setBarChangeRate(Vec2(0,1));
    //设置初始进度为0.
    progress->setPercentage(0);
    //加入到层中去.
    this->addChild(progress, 1, 10);


    schedule(CC_CALLBACK_1(HelloWorld::updateProgress, this), 1.0f, "progress");

void HelloWorld::updateProgress(float )
{
    //获取进度条.
    auto progress = (ProgressTimer*)this->getChildByTag(10);
    Percentage += 10;
    if (Percentage <= 100)
        //修改进度条进度.
        progress->setPercentage(Percentage);
}

看完代码,关于setMidpoint()和setBarChangeRate()这两个方法可能会有一点的疑惑:
他们的参数到底是什么意思呢?

我们都知道一个矩形,有四个点构成,我们自然而然的把左下角的点坐标看成(0,0),左上角(0,1),右下角(1,0),右上角(1,1).发现了吗.这和Node的锚点是一样的.

setMidpoint(Vec2);方法实质上就是,进度条从精灵的哪个位置开始显示.是从左下角呢,还是左上角呢,亦或是其他地方.比如(0.5,0.5),毫无疑问的,是从中心点开始显示精灵的纹理图.而(1,0)则是从右下角开始显示精灵的纹理.

而setBarChangeRate(Vec2);方法实质上则是控制了进度条水平和垂直方向上的延伸速度.如Vec2(0,1)则表示,进度条是向右边延伸的.比如是(0.5,0.5)则是向四周延伸的.

当我们把以上几点组合起来看时,就会发现这几点是设置了精灵纹理图的具体如何去慢慢的显示出来的方法.

比如:

//则是从左往右显示的.
progress->setMidpoint(Vec2(0,0));
progress->setBarChangeRate(Vec2(0,1));

比如:

//则是从左往右显示的.
progress->setMidpoint(Vec2(1,0));
progress->setBarChangeRate(Vec2(0,1));

比如:

//则是从内而外显示的
progress->setMidpoint(Vec2(0.5,0.5));
progress->setBarChangeRate(Vec2(0.5,0.5));

理解之后是不是觉得更加好玩了呢~~