cocos2d-x 3.3 之卡牌设计 NO.6 Loading界面（异步加载图片，plist）

刚开始做卡牌的时候没有想到要做loading，因为小游戏资源不多。

但是后来不断的加图片，直到在真机上发现卡顿的问题，我才知道该需要加loading了......

首先，我们先定义类：

class Loading : public Layer
{
public:
	bool init();
	CREATE_FUNC( Loading);
	static Scene* CreateScene();

	int total_pic_num;//需加载图片数
	int total_sound_num;//需加载声音数
	int all_num;//总共需要加载的数量
	int load_num;//已加载数量
	std::vector<std::string> plist_name;//plist名
	int load_plist_num;//加载了几个plist

	void load_sound(int num);
	void load_pic(Object* pSender);
	void load_plist(Object* pSender);

};

在cpp中先初始化一些参数：

total_pic_num=BACKGROUND_NUM+CARD_HERO_NUM+CARD_EQUIP_NUM+CARD_BACK_NUM+BUTTON_ACTION_NUM+TOUCH_ACTION_NUM+CARD_SKILL_NUM;
total_sound_num=BGM_NUM+EFFECT_NUM;
all_num=total_pic_num+total_sound_num;
load_num=0;
load_plist_num=0;

//plist名
plist_name.push_back("UI/button_action/button_action");
plist_name.push_back("UI/touch_action/touch_act_three");
plist_name.push_back("skill/atk/flame");
plist_name.push_back("skill/atk/freeze");
plist_name.push_back("skill/atk/lightning");
plist_name.push_back("skill/atk/wind");

然后开始加载资源吧：

//-------------------------------------------------------------预加载背景音乐

	CocosDenshion::SimpleAudioEngine::getInstance()->preloadBackgroundMusic("sound/bgm/bgm_start.mp3");
	CocosDenshion::SimpleAudioEngine::getInstance()->preloadBackgroundMusic("sound/bgm/bgm_game.mp3");
	load_sound(BGM_NUM);
	
//-------------------------------------------------------------预加载音效

	CocosDenshion::SimpleAudioEngine::getInstance()->preloadEffect("sound/effect/button_1.mp3");

	//攻击音效

	CocosDenshion::SimpleAudioEngine::getInstance()->preloadEffect("sound/effect/button_out.mp3");
	CocosDenshion::SimpleAudioEngine::getInstance()->preloadEffect("sound/effect/flame_shoot.mp3");
	CocosDenshion::SimpleAudioEngine::getInstance()->preloadEffect("sound/effect/freeze_shoot.mp3");
	CocosDenshion::SimpleAudioEngine::getInstance()->preloadEffect("sound/effect/lightning_shoot.mp3");
	CocosDenshion::SimpleAudioEngine::getInstance()->preloadEffect("sound/effect/wind_shoot.mp3");

	//控制音效

	CocosDenshion::SimpleAudioEngine::getInstance()->preloadEffect("sound/effect/open_card.mp3");
	CocosDenshion::SimpleAudioEngine::getInstance()->preloadEffect("sound/effect/card_out.mp3");
	CocosDenshion::SimpleAudioEngine::getInstance()->preloadEffect("sound/effect/equip_out.mp3");
	CocosDenshion::SimpleAudioEngine::getInstance()->preloadEffect("sound/effect/no.mp3");
	CocosDenshion::SimpleAudioEngine::getInstance()->preloadEffect("sound/effect/card_die.mp3");
	load_sound(EFFECT_NUM);

//-------------------------------------------------------------背景
	CCTextureCache::sharedTextureCache()->addImageAsync("UI/background/background_start.jpg", CC_CALLBACK_1(Loading::load_pic, this));
	CCTextureCache::sharedTextureCache()->addImageAsync("UI/background/background_help.jpg",CC_CALLBACK_1(Loading::load_pic, this));
	CCTextureCache::sharedTextureCache()->addImageAsync("UI/background/background_about.jpg",CC_CALLBACK_1(Loading::load_pic, this));
	CCTextureCache::sharedTextureCache()->addImageAsync("UI/background/help_word.jpg",CC_CALLBACK_1(Loading::load_pic, this));
	CCTextureCache::sharedTextureCache()->addImageAsync("UI/background/background_game.jpg",CC_CALLBACK_1(Loading::load_pic, this));
	CCTextureCache::sharedTextureCache()->addImageAsync("UI/background/setting_back.png",CC_CALLBACK_1(Loading::load_pic, this));
	CCTextureCache::sharedTextureCache()->addImageAsync("UI/background/setting_face.png",CC_CALLBACK_1(Loading::load_pic, this));
	CCTextureCache::sharedTextureCache()->addImageAsync("UI/background/title.png",CC_CALLBACK_1(Loading::load_pic, this));

//-------------------------------------------------------------卡牌
	//back
	char file_name_c[100];
	for(int i=0;i<=CARD_BACK_NUM;i++)
	{
		sprintf(file_name_c,"card/back/card_need_magic_%d.jpg",i);
		std::string	file_name(file_name_c);
		CCTextureCache::sharedTextureCache()->addImageAsync(file_name, CC_CALLBACK_1(Loading::load_pic, this));
	}
	//equip
	for(int i=0;i<=CARD_EQUIP_NUM;i++)
	{
		sprintf(file_name_c,"card/equip/card_equip_%d.jpg",i);
		std::string	file_name(file_name_c);
		CCTextureCache::sharedTextureCache()->addImageAsync(file_name, CC_CALLBACK_1(Loading::load_pic, this));
	}
	
	//hero
	for(int i=0;i<=CARD_HERO_NUM;i++)
	{
		sprintf(file_name_c,"card/people/card_hero_%d.jpg",i);
		std::string	file_name(file_name_c);
		CCTextureCache::sharedTextureCache()->addImageAsync(file_name, CC_CALLBACK_1(Loading::load_pic, this));
	}

//-------------------------------------------------------------加载精灵表
	for(std::string a : plist_name)
	{
		CCTextureCache::sharedTextureCache()->addImageAsync(a+".png", CC_CALLBACK_1(Loading::load_plist, this));
		//load_plist_num++;
	}

注意加载图片和精灵表的回调函数是不一样的，因为加载这两种资源需要不同的方式

以下为一个自定义函数和两个回调函数（用于动态显示加载进度和加载）：

void Loading::load_sound(int num)//这个函数可以忽略不看
{
	load_num+=num;
	int percent=((float)load_num/(float)all_num)*100;
	auto loading_font = (Label*)getChildByTag(1);
	loading_font->setString(String::createWithFormat("Loading......%d%%",percent)->_string);
}
void Loading::load_pic(Object* pSender)//加载图片的回调函数
{
	load_num+=1;
	int percent=((float)load_num/(float)all_num)*100;
	this->runAction(DelayTime::create(15));//休息
	auto loading_font = (Label*)getChildByTag(1);
	loading_font->setString(String::createWithFormat("Loading......%d%%",percent)->_string);

	if(percent>=100)
	{
		Director::getInstance()->replaceScene(Start::CreateScene());//如果加载完成跳转
	}

}
void Loading::load_plist(Object* pSender)//加载精灵表的回调函数
{
	SpriteFrameCache::getInstance()->addSpriteFramesWithFile(plist_name.at(load_plist_num)+".plist",plist_name.at(load_plist_num)+".png");//图片已经加载过貌似会直接从缓存中读取，目的是把图片和plist一起加载
	load_plist_num++;
	this->runAction(DelayTime::create(15));
	load_num+=1;
	int percent=((float)load_num/(float)all_num)*100;
	this->runAction(DelayTime::create(15));
	auto loading_font = (Label*)getChildByTag(1);
	loading_font->setString(String::createWithFormat("Loading......%d%%",percent)->_string);

	if(percent>=100)
	{
		Director::getInstance()->replaceScene(Start::CreateScene());
	}
	
}

如上就是异步加载的方法，现在我们需要知道如何从缓存中获取：

获取图片：

Sprite *BK=Sprite::createWithTexture(TextureCache::sharedTextureCache()->textureForKey("UI/background/background_start.jpg"));  

获取精灵表：

CCSpriteFrameCache *frameCache=CCSpriteFrameCache::sharedSpriteFrameCache();
frameCache->getSpriteFrameByName("UI/touch_action/touch_act_three.plist");

这样就能从缓存中获取资源了，我测试了下真的快很多