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

【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> 预加载资源场景界面，这里有两个进度条，但效果是一样的。

源码下载地址（百度云）