常见游戏Loading界面的实现

来源：互联网发布：阿卡索知乎编辑：程序博客网时间：2024/05/22 11:34

主要使用CCProgressTimer进度条类来实现。截图如下：

最上面是要加载的图片，中间是显示加载百分比，最下面就是进度条显示。

OK，那么让我们来看一下该怎样去实现它。

首先，创建一个Cocos2d-x工程，命名为MyLoading。

首先在HelloWorldScene.h文件中添加将要用到的两个私有成员变量：

private:    int curLoadNum;    int allNum;

在添加public方法：

HelloWorld();//构造函数void loadCallback(CCObject* pSender);//加载的回调方法

切换到HelloWorldScene.cpp：

实现构造函数，并初始化成员变量：

HelloWorld::HelloWorld():curLoadNum(0),allNum(0){}

删除init()中关于helloworld的代码，保留如下代码：

bool HelloWorld::init(){    // 1. super init first    if ( !CCLayer::init() )    {        return false;    }    CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();    CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();    return true;}

然后在return语句的前面添加如下代码：（资源在下面的源码里面有）

//loading 显示标签    CCLabelTTF* pLabel = CCLabelTTF::create("Loading... 0%","Arial", 30);    pLabel->setTag(100);    pLabel->setColor(ccc3(255,0, 0));    pLabel->setPosition(ccp(origin.x + visibleSize.width/2,                            origin.y + visibleSize.height*0.3 + pLabel->getContentSize().height));    this->addChild(pLabel,1);    //进度条背景图片    CCSprite *progressbg = CCSprite::create("progressbg.png");    progressbg->setPosition(ccp(origin.x + visibleSize.width/2, origin.y + visibleSize.height*0.2));    this->addChild(progressbg,1);        //进度条    CCSprite *progress = CCSprite::create("progress.png");    CCProgressTimer *progressTimer =CCProgressTimer::create(progress);    progressTimer->setType(kCCProgressTimerTypeBar);//设置类型为横条形    progressTimer->setBarChangeRate(ccp(1,0));//设置进度条方向，这里为横向    progressTimer->setMidpoint(ccp(0,0)); //设置中心位置    progressTimer->setPercentage(0);//设置当前进度    progressTimer->setTag(200);    progressTimer->setPosition(progressbg->getPosition());    this->addChild(progressTimer,2);    //异步加载图片    for(int i=0;i<15;i++)    {        char fileName[100] = {0};        sprintf(fileName,"%d.png",i);        CCTextureCache::sharedTextureCache()->addImageAsync(fileName,this, callfuncO_selector(HelloWorld::loadCallback));    }    allNum = 15;  //总共15张图

简单易懂，还写了注释。

最后就是实现加载完成的回调函数：

void HelloWorld::loadCallback(cocos2d::CCObject *pSender){    //当前加载图片数量+1    ++curLoadNum;        //更新进度    CCProgressTimer *progress = (CCProgressTimer*)this->getChildByTag(200);    float current = progress->getPercentage();    current = 100.0/allNum + current;    progress->setPercentage(current);        //更新进度显示百分比    CCLabelTTF *label = (CCLabelTTF*)this->getChildByTag(100);    CCString *loadString = CCString::createWithFormat("loading... %.2f%%",current);    label->setString(loadString->getCString());        //显示加载的精灵    char fileName[100] = {0};    sprintf(fileName,"%d.png",curLoadNum-1);    CCTexture2D *texture = CCTextureCache::sharedTextureCache()->textureForKey(fileName);    CCSprite *sprite = CCSprite::createWithTexture(texture);    sprite->setPosition(ccp(70+70*(curLoadNum-1), 500));    this->addChild(sprite);        //加载完成100%    if (curLoadNum == allNum)    {        CCLog("加载完成100%%,跳到别的场景");    }}

点击这里下载源码

0 0