【Cocos2d-X游戏实战开发】捕鱼达人之加载场景的创建（五）

本系列学习教程使用的是cocos2d-x-2.1.4（最新版为cocos2d-x-2.1.5）   

 

 

博主发现前两个系列的学习教程被严重抄袭，在这里呼吁大家请尊重开发者的劳动成果，

转载的时候请务必注明出处：http://blog.csdn.net/yangyu20121224/article/details/11826893 

 

 

 

     趁着过节之际，在这里也是祝大家中秋节日快乐！今天我们要开始的内容也是在游戏

中非常常见的一个功能，就是资源的预加载处理，通常都会有一个进度条用来加载资

源，以便进入游戏中的时候不会因为要加载大量的图片而卡死，好的，话不多说，下面

我们就一起来实现这个功能。

 

 

 

一、类的创建

 

1、首先我们新建一个加载场景类，取名为“LoadingLayer”，并继承自CCLayer类。

 

2、添加好了之后，可以在目录中看到“LoadingLayer.h”和“LoadingLayer.cpp”这两个文件。

 

 

 

二、项目编码

 

 

1、在刚刚新建的LoadingLayer类中添加代码， LoadingLayer.h头文件。

#ifndef __LOADING_LAYER_H__
#define __LOADING_LAYER_H__

#include "cocos2d.h"

class LoadingLayer:public cocos2d::CCLayer{
public:
//构造函数
LoadingLayer();

//初始化方法
virtual bool init();

CREATE_FUNC(LoadingLayer);

static cocos2d::CCScene* scene();

void loadCallBack(cocos2d::CCObject* ped);//异步加载图片时的回调函数
private:
int loadingNum;//用来记录当前的加载图片的数量

int totalNum;//一共要加载的图片数量

bool setUpdateView();//用来初始化页面的基本的纹理
};
#endif

 

2、LoadingLayer.cpp文件，这段代码有很详细的注释，相信有编程基础的同学都能一看就懂。

#include "LoadingLayer.h"
#include "StaticData.h"

USING_NS_CC;

//构造函数
LoadingLayer::LoadingLayer(){
this->loadingNum = 0;
this->totalNum = 2;
}

//创建加载场景
CCScene* LoadingLayer::scene(){
CCScene* scene = CCScene::create();
LoadingLayer* layer = LoadingLayer::create();
scene->addChild(layer);
return scene;
}

//初始化方法
bool LoadingLayer::init(){
bool isRet = false;
do 
{
CC_BREAK_IF(!this->setUpdateView());

//加入plist文件至缓存
CCSpriteFrameCache::sharedSpriteFrameCache()->addSpriteFramesWithFile(STATIC_DATA_STRING("cannon_plist"));

//加入图片至缓存
CCTextureCache::sharedTextureCache()->addImageAsync(STATIC_DATA_STRING("game_background"),this,callfuncO_selector(LoadingLayer::loadCallBack)); 

CCSpriteFrameCache::sharedSpriteFrameCache()->addSpriteFramesWithFile(STATIC_DATA_STRING("GameLayer_plist"));

CCTextureCache::sharedTextureCache()->addImageAsync(STATIC_DATA_STRING("game_ui_2p"),this,callfuncO_selector(LoadingLayer::loadCallBack)); 

isRet = true;
} while (0);
return isRet;
}

//加载图片时的回调函数
void LoadingLayer::loadCallBack(CCObject* ped){
loadingNum++; 

//得到上面进度条对象
CCProgressTimer* pt1 = (CCProgressTimer*)this->getChildByTag(1);

//得到下面进度条对象
CCProgressTimer* pt2 = (CCProgressTimer*)this->getChildByTag(2);

//得到当前进度条的百分比
float now = pt1->getPercentage();

pt1->setPercentage(100 / totalNum + now);
pt2->setPercentage(100 / totalNum + now);

if(loadingNum < totalNum){

}else{
// 加载完的时候跳转到相应的界面
CCLOG("loading over");
}
}

//初始化组件
bool LoadingLayer::setUpdateView(){
bool isRet = false;
do 
{
//获得窗口尺寸大小
CCSize winSize = CCDirector::sharedDirector()->getWinSize();

//创建标题图片精灵
CCSprite* titleBg = CCSprite::create(STATIC_DATA_STRING("loading_title"));
CC_BREAK_IF(!titleBg);
titleBg->setPosition(ccp(winSize.width * 0.5,winSize.height * 0.65));
this->addChild(titleBg);

//创建上面背景进度条
CCSprite* load_1_1 = CCSprite::create(STATIC_DATA_STRING("loading_1_1"));
CC_BREAK_IF(!load_1_1);
load_1_1->setPosition(ccp(winSize.width * 0.5,winSize.height * 0.25 - 10));
this->addChild(load_1_1,1);

//创建下面背景进度条
CCSprite* load_2_1 = CCSprite::create(STATIC_DATA_STRING("loading_2_1"));
CC_BREAK_IF(!load_2_1);
load_2_1->setPosition(ccp(winSize.width * 0.5,winSize.height * 0.1));
this->addChild(load_2_1,1);

//创建上面前景进度条  
CCSprite* load_1_2 = CCSprite::create(STATIC_DATA_STRING("loading_1_2"));  
CC_BREAK_IF(!load_1_2);  
//创建上面进度条对象
CCProgressTimer* pt1 = CCProgressTimer::create(load_1_2);  
// 设置成横向的 
pt1->setType(kCCProgressTimerTypeBar); 
//可以看作是按矩形显示效果的进度条类型  
pt1->setMidpoint(ccp(0,0));   
//用来设定进度条横向前进的方向从左向右或是从右向左  
pt1->setBarChangeRate(ccp(1,0));  
//重新设置坐标   
pt1->setPosition(ccp(winSize.width * 0.5,winSize.height * 0.25 - 10)); 
//设置初始进度的百分比
pt1->setPercentage(0);  
//添加至场景并设置标志位
this->addChild(pt1,2,1);  

//创建下面前景进度条  
CCSprite* load_2_2 = CCSprite::create(STATIC_DATA_STRING("loading_2_2"));  
CC_BREAK_IF(!load_2_2);  
//创建下面进度条对象
CCProgressTimer* pt2 = CCProgressTimer::create(load_2_2);  
// 设置成横向的 
pt2->setType(kCCProgressTimerTypeBar); 
//可以看作是按矩形显示效果的进度条类型  
pt2->setMidpoint(ccp(0,0));   
//用来设定进度条横向前进的方向从左向右或是从右向左  
pt2->setBarChangeRate(ccp(1,0));  
//重新设置坐标   
pt2->setPosition(ccp(winSize.width * 0.5,winSize.height * 0.1)); 
//设置初始进度的百分比
pt2->setPercentage(0);  
//添加至场景并设置标志位
this->addChild(pt2,2,2);  

isRet=true;
} while (0);
return isRet;
}

      这段代码中，我们就在init函数中添加了几张图片用于演示，但是由于图片比较少所以效果不是很明显，以后在游

戏中需要加载的图片都可以在这里预加载。

 

3、这个类的代码编写好之后，我们再回到之前的开始场景StartScene.cpp文件中，添加点击“开始游戏”按钮的回

调函数。

//点击“开始游戏”按钮的回调
void StartLayer::start_callback(CCObject* pSender){
    CCLOG( "start game");

CCDirector::sharedDirector()->replaceScene(CCTransitionFade::create(0.5f, LoadingLayer::scene()));
}

4、最后别忘了在static_data.plist文件中添加图片的路径。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>default_gold</key>
<string>200</string>
<key>title</key>
<string>title.png</string>
<key>background</key>
<string>background.png</string>
<key>StartScene_Texture</key>
<string>StartScene.plist</string>
<key>start_normal</key>
<string>ui_button_box02_02.png</string>
<key>start_selected</key>
<string>ui_button_box02_01.png</string>
<key>scene_normal</key>
<string>ui_button_box01_02.png</string>
<key>scene_selected</key>
<string>ui_button_box01_01.png</string>
<key>Button_Texture</key>
<string>Button.plist</string>
<key>start</key>
<string>ui_2p_010.png</string>
<key>scene</key>
<string>button_other_014.png</string>

<key>loading_title</key>
<string>loading_title.png</string>
<key>loading_1_1</key>
<string>loading_1_1.png</string>
<key>loading_1_2</key>
<string>loading_1_2.png</string>
<key>loading_2_1</key>
<string>loading_2_1.png</string>
<key>loading_2_2</key>
<string>loading_2_2.png</string>

<key>game_background</key>
<string>game_background.png</string>
<key>cannon_plist</key>
<string>cannon.plist</string>
<key>cannon</key>
<string>cannon.png</string>
<key>cannon10_plist</key>
<string>cannon10.plist</string>
<key>cannon10</key>
<string>cannon10.png</string>
<key>increase_button</key>
<string>increase_button.png</string>
<key>reduce_button</key>
<string>reduce_button.png</string>
<key>GameLayer_plist</key>
<string>GameLayer.plist</string>
<key>game_ui_2p</key>
<string>game_ui_2p.png</string>

</dict>
</plist>

 

5、运行效果图。

 

<1> 开始场景界面，点击“开始游戏”按钮，进入加载场景界面。

 

<2> 预加载资源场景界面，这里有两个进度条，但效果是一样的。

 

 

 

源码下载地址（百度云）