学习开发cocos2d-x 游戏 实战篇（1）之 loading 界面编写

在游戏开发中有些资源需要预先加载在内存中这样方便我们在以后的使用。从而加快游戏的速度。特别 是预先从网络上下载资源的更需要一个友好的界面来告诉用户程序正在加载中。这个时候就需要我们做一个loading 界面

废话不多说下面开始讲解思路

1 当加载图片的时候使用 CCTextureCache::sharedTextureCache()->addImageAsync("gmbg/longding.png",this,callfuncO_selector(LoadingLayer::loadCallBack));

这个方法 其中 loadCallBack 是回调函数 当然在使用网络加载图片资源的时候 回调方法也设置成这个 就OK

2 加载特效使用的 是cocos2d-x 中进度条

部分代码如下

 

// 添加进度条
CCSprite* loadimg=CCSprite::create("gmbg/longding.png");
CC_BREAK_IF(!loadimg);
CCProgressTimer* pt = CCProgressTimer::create(loadimg);
pt->setType(kCCProgressTimerTypeBar);// 设置成横向的
//可以看作是按矩形显示效果的进度条类型
pt->setMidpoint(ccp(0,0));
// 用来设定进度条横向前进的方向从左向右或是从右向左
pt->setBarChangeRate(ccp(1,0));
//重新设置锚点
float tex=getWinSize().width/2+getWinOrigin().x;
float tey=getWinSize().height/5+getWinOrigin().y-5;
pt->setPosition(ccp(tex,tey));
pt->setPercentage(0);
this->addChild(pt,2,1);

        // 添加进度条
	CCSprite* loadimg=CCSprite::create("gmbg/longding.png");
	CC_BREAK_IF(!loadimg);	
	CCProgressTimer* pt = CCProgressTimer::create(loadimg);
	pt->setType(kCCProgressTimerTypeBar);// 设置成横向的
	//可以看作是按矩形显示效果的进度条类型
	pt->setMidpoint(ccp(0,0)); 
	//  用来设定进度条横向前进的方向从左向右或是从右向左
	pt->setBarChangeRate(ccp(1,0));
	//重新设置锚点
	float tex=getWinSize().width/2+getWinOrigin().x;
	float tey=getWinSize().height/5+getWinOrigin().y-5;
	pt->setPosition(ccp(tex,tey));
	pt->setPercentage(0);
	this->addChild(pt,2,1);

上面两点是主要的技术点 可以看做是鲜花不过在美的鲜花也需要 绿叶的衬托 对于一些别的 准备工作 就可以看做是 绿叶 这个是loadingLayer 类的生命

 

 

#ifndef __LOADING_LAYER_H__
#define __LOADING_LAYER_H__
#include "BaseLayer.h"
class LoadingLayer:public BaseLayer{
public:
 virtualbool init();
 CREATE_FUNC(LoadingLayer);
 static cocos2d::CCScene* scene();
 void loadCallBack(cocos2d::CCObject* ped);// 异步加载图片时 的回调函数
 LoadingLayer();
private:
 int loadingNum;//用来记录当前的加载图片的数量
 int totalNum;// 一共要加载的图片数量
 bool setUpdateView();// 用来初始化页面的 基本的纹理
};
#endif

#ifndef __LOADING_LAYER_H__
#define __LOADING_LAYER_H__
#include "BaseLayer.h"
class LoadingLayer:public BaseLayer{
public:
	virtual bool init();
	CREATE_FUNC(LoadingLayer);
	static cocos2d::CCScene* scene();
	void loadCallBack(cocos2d::CCObject* ped);// 异步加载图片时 的回调函数
	LoadingLayer();
private:
	int loadingNum;//用来记录当前的加载图片的数量
	int totalNum;// 一共要加载的图片数量
	bool setUpdateView();// 用来初始化页面的 基本的纹理
};
#endif

下面在贴出init 方法

 

 

bool LoadingLayer::init(){
 bool isRet=false;
 do
 {
 CC_BREAK_IF(!BaseLayer::init());
 CC_BREAK_IF(!this->setUpdateView());
 CCTextureCache::sharedTextureCache()->addImageAsync("gmbg/longding.png",this,callfuncO_selector(LoadingLayer::loadCallBack));
 isRet=true;
 } while (0);
 return isRet;
}

bool LoadingLayer::init(){
	bool isRet=false;
	do 
	{
	CC_BREAK_IF(!BaseLayer::init());
	CC_BREAK_IF(!this->setUpdateView());
	CCTextureCache::sharedTextureCache()->addImageAsync("gmbg/longding.png",this,callfuncO_selector(LoadingLayer::loadCallBack));
	isRet=true;
	} while (0);
	return isRet;
}

由于本人 不喜欢在 init 方法中写 很多 初始化的东西 所以本人 定义了一个 setUpdateView 的方法 本人写代码习惯把代码封装成一小块 一小块 这纯属个人爱好 下面贴出里面的代码

 

 

bool isRet=false;
 do
 {
 // 设置进度条的背景图片 我们把他放到屏幕下方的1/5处
 CCSprite* loadbackimg=CCSprite::create("gmbg/lodingbg.png");
 CC_BREAK_IF(!loadbackimg);
 loadbackimg->setPosition(ccp(getWinSize().width/2+getWinOrigin().x,getWinSize().height/5+getWinOrigin().y));
 this->addChild(loadbackimg,1);
 // 添加进度条
 CCSprite* loadimg=CCSprite::create("gmbg/longding.png");
 CC_BREAK_IF(!loadimg);
 CCProgressTimer* pt = CCProgressTimer::create(loadimg);
 pt->setType(kCCProgressTimerTypeBar);// 设置成横向的
 //可以看作是按矩形显示效果的进度条类型
 pt->setMidpoint(ccp(0,0));
 // 用来设定进度条横向前进的方向从左向右或是从右向左
 pt->setBarChangeRate(ccp(1,0));
 //重新设置坐标
 float tex=getWinSize().width/2+getWinOrigin().x;
 float tey=getWinSize().height/5+getWinOrigin().y-5;
 pt->setPosition(ccp(tex,tey));
 pt->setPercentage(0);
 this->addChild(pt,2,1);
 isRet=true;
 } while (0);
 return isRet;

bool isRet=false;
	do 
	{
	// 设置进度条的背景图片 我们把他放到屏幕下方的1/5处	
    CCSprite* loadbackimg=CCSprite::create("gmbg/lodingbg.png");
	CC_BREAK_IF(!loadbackimg);	
	loadbackimg->setPosition(ccp(getWinSize().width/2+getWinOrigin().x,getWinSize().height/5+getWinOrigin().y));
	this->addChild(loadbackimg,1);
	
	// 添加进度条
	CCSprite* loadimg=CCSprite::create("gmbg/longding.png");
	CC_BREAK_IF(!loadimg);	
	CCProgressTimer* pt = CCProgressTimer::create(loadimg);
	pt->setType(kCCProgressTimerTypeBar);// 设置成横向的
	//可以看作是按矩形显示效果的进度条类型
	pt->setMidpoint(ccp(0,0)); 
	//  用来设定进度条横向前进的方向从左向右或是从右向左
	pt->setBarChangeRate(ccp(1,0));
	//重新设置坐标
	float tex=getWinSize().width/2+getWinOrigin().x;
	float tey=getWinSize().height/5+getWinOrigin().y-5;
	pt->setPosition(ccp(tex,tey));
	pt->setPercentage(0);
	this->addChild(pt,2,1);

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

回调函数的主要代码

 

 

void LoadingLayer::loadCallBack(CCObject* ped){
 loadingNum++;
 CCProgressTimer* pt=(CCProgressTimer*)this->getChildByTag(1);
 float now=pt->getPercentage();
 pt->setPercentage(100/totalNum+now);
 if(loadingNum<totalNum){
 }else{
 // 加载完的时候跳转到响应的界面
 CCLOG("loading over");
 }
}

void LoadingLayer::loadCallBack(CCObject* ped){
	loadingNum++;	 
    CCProgressTimer* pt=(CCProgressTimer*)this->getChildByTag(1);
	float now=pt->getPercentage();
	pt->setPercentage(100/totalNum+now);
	if(loadingNum<totalNum){
		
	}else{
		// 加载完的时候跳转到响应的界面
		CCLOG("loading over");
	}
}

对于以上代码特别要主要 不要忽略两个特别重要的属性 那就是 loadingNum 和 totalNum 在执行 这个loading 界面的 这两个参数一定要初始化。 特别是对于 totalNum 这个参数 就是你要加载的图片的 个数

 

程序写到这里 基本就完成了一个简答的 loading 界面 收工 下面贴出 运行出来的界面

看完上面的代码有些同学可能会疑惑为什么我的 LoadingLayer 继承了 BaseLayer 其实BaseLayer 继承了 CCLayer 我只是我把一些比较通用的东西封装到 这个BaseLayer 中 方便在后面的程序中调用 在以后的程序中这个类可能会逐渐添加一些通用的属性或者方法。

到这里 我们的一个简单的 LoadingLayer 就OK 了 下一节 我将讲解当loading 完毕之后 跳进 游戏的开始 界面 和开始游戏界面的大家，希望大家耐心看。

附上源码连接地址 里面带图片资源 和class 两个 文件夹 覆盖新创建的项目的目录 即可出现 当前效果

本节源码地址