cocos2dx 加载 进度条样式

在Cocos2d-x开发中，加载进度条是一个常见的需求。虽然TestCpp里有相关例子，但仅涉及label的变化，本文将在此基础上增加进度条的实现。下面将详细介绍实现加载进度条样式的步骤。

实现步骤概述

1. 创建label和progressTimer：用于显示加载信息和进度。
2. 加载资源：异步加载图片资源，每加载一张调用回调函数更新进度。
3. 加载完成：进入新的界面。

代码实现

1. 头文件定义（HelloWorld.h）

#ifndef __HELLOWORLD_SCENE_H__
#define __HELLOWORLD_SCENE_H__

#include "cocos2d.h"

class HelloWorld : public cocos2d::Layer
{
public:
// 构造函数，初始化要加载的精灵数目、已加载的精灵数目和进度条指针
HelloWorld():m_numSp(20),m_loadedSp(0),loadProgress(NULL){};

// 创建场景的静态函数
static cocos2d::Scene* createScene();

// 初始化函数
virtual bool init();

// 加载一张图片完成后的回调函数
void loadingCallback(cocos2d::Object* pSender);

// 加载完后的跳转函数
void gotoNewLayer();

// 自动生成创建对象的函数
CREATE_FUNC(HelloWorld);

private:
// 进度条
cocos2d::ProgressTimer* loadProgress;

// 加载进度label
cocos2d::LabelTTF* percentLabel;

// 显示 "Loading: " 的label
cocos2d::LabelTTF* loadLabel;

// 要加载的精灵数目，初始化为20张
int m_numSp;

// 已加载的精灵数目
int m_loadedSp;
};

#endif // __HELLOWORLD_SCENE_H__

2. 创建label和progressTimer

// 获取可见区域的大小和原点
cocos2d::Size visibleSize = cocos2d::Director::getInstance()->getVisibleSize();
cocos2d::Point origin = cocos2d::Director::getInstance()->getVisibleOrigin();

// 创建显示 "Loading: " 的label
loadLabel = cocos2d::LabelTTF::create("Loading:", "Arial", 20);
loadLabel->setPosition(cocos2d::Point(visibleSize.width/2 - 30, visibleSize.height/2 + 30));
this->addChild(loadLabel, 1);

// 创建显示百分比的label
percentLabel = cocos2d::LabelTTF::create("0%", "Arial", 20);
percentLabel->setPosition(cocos2d::Point(visibleSize.width/2 + 35, visibleSize.height/2 + 30));
this->addChild(percentLabel, 2);

// 进程条的底图
auto loadBg = cocos2d::Sprite::create("sliderTrack.png");
loadBg->setPosition(cocos2d::Point(visibleSize.width/2, visibleSize.height/2));
this->addChild(loadBg, 1);

// 创建一个进度条
loadProgress = cocos2d::ProgressTimer::create(cocos2d::Sprite::create("sliderProgress.png"));
// 设置进度条的变化速率
loadProgress->setBarChangeRate(cocos2d::Point(1, 0));
// 设置进度条的类型
loadProgress->setType(cocos2d::ProgressTimer::Type::BAR);
// 设置进度的运动方向
loadProgress->setMidpoint(cocos2d::Point(0, 1));
loadProgress->setPosition(cocos2d::Point(visibleSize.width/2, visibleSize.height/2));
// 设置初始值为0
loadProgress->setPercentage(0.0f);
this->addChild(loadProgress, 2);

3. 加载图片

// 加载20张图片，每加载完一张就调用回调函数:loadingCallback
cocos2d::Director::getInstance()->getTextureCache()->addImageAsync("HelloWorld.png", this, cocos2d::callfuncO_selector(HelloWorld::loadingCallback));
cocos2d::Director::getInstance()->getTextureCache()->addImageAsync("HelloWorld1.png", this, cocos2d::callfuncO_selector(HelloWorld::loadingCallback));
cocos2d::Director::getInstance()->getTextureCache()->addImageAsync("HelloWorld2.png", this, cocos2d::callfuncO_selector(HelloWorld::loadingCallback));
// 此处省略部分重复代码，可根据实际需求添加更多图片加载
cocos2d::Director::getInstance()->getTextureCache()->addImageAsync("HelloWorld.png", this, cocos2d::callfuncO_selector(HelloWorld::loadingCallback));

4. 图片加载后的回调函数

void HelloWorld::loadingCallback(cocos2d::Object* pSender)
{
// 每进到这个函数一次，让m_loadedSp加1
++m_loadedSp;

// 格式化百分比字符串
char buf_str[16];
sprintf(buf_str, "%d%%", (int)(((float)m_loadedSp / m_numSp) * 100));
// 更新percentLabel的值
percentLabel->setString(buf_str);

// 计算进度条当前的百分比
float newPercent = 100 - ((float)m_numSp - (float)m_loadedSp)/((float)m_numSp/100);
// 因为加载图片速度很快，所以没有使用ProgressTo或ProgressFromTo这种动作来更新进度条
loadProgress->setPercentage(newPercent);

// 图片加载完成后
if (m_loadedSp == m_numSp)
{
// 将添加的几个对象删除掉
this->removeChild(loadProgress);
this->removeChild(percentLabel);
this->removeChild(loadLabel);

// 加载完后跳转到gotoNewLayer，在这里可以创建新的Scene，新的Layer等
this->gotoNewLayer();
}
}

5. 进入新的界面

void HelloWorld::gotoNewLayer()
{
// 获取窗口大小
auto size = cocos2d::Director::getInstance()->getWinSize();

// 用之前加载到缓存中的图片，创建一个精灵
auto sp = cocos2d::Sprite::create("HelloWorld.png");
sp->setPosition(cocos2d::Point(size.width/2, size.height/2));
this->addChild(sp, 1);
}

代码中的注释已经详细解释了各个部分的功能，这里就不再赘述。通过以上步骤，我们就可以在Cocos2d-x中实现一个带有进度条的资源加载界面。