cocos2d-x学习 之二

上次已经弄好了cocos2d-x的开发环境，接下来就学习一个实际点的项目练习一下。需要说明的是该学习项目来自龙灵修的视频，所有的版权类都归龙灵修所有，在此向这位哥们致敬。

按照我们上次的方法我们新建一个SpaceWar的项目。

./create_project.py  -project SpaceWar -package com.simple.demo -language cpp

创建好项目之后我们就可以编译了，因为我是在linux系统下，所以所有的操作都是在linux下操作的，在之后的操作中不在说明。等整个项目完成后，会将其移植到Android平台。

我们进入proj.linux目录就可以编译我们的项目了。make一下就可以执行出可执行文件了。

我们先大致看一下入口函数，其位于proj.linux目录下的main.cpp文件，定义如下：

#include "../Classes/AppDelegate.h"
#include "cocos2d.h"
#include "CCEGLView.h"

#include <stdlib.h>
#include <stdio.h>
#include <unistd.h>
#include <string>

USING_NS_CC;

int main(int argc, char **argv)
{
// create the application instance
AppDelegate app;
CCEGLView* eglView = CCEGLView::sharedOpenGLView();
eglView->setFrameSize(320, 480);
return CCApplication::sharedApplication()->run();
}

其中USING_NS_CC用来声明命名空间，AppDelegate app是声明的一个Applicaton对象。接着声明了一个OpenGL的窗口。需要注意的是最后一个函数，这个函数开始初始化我们自己的代码，并进入主循环。在这个函数中会调用app对象的applicationDidFinishLaunching函数。其中AppDelegate定义在项目根目录的Classes文件夹下。函数定义如下:

bool AppDelegate::applicationDidFinishLaunching() {
// initialize director
CCDirector* pDirector = CCDirector::sharedDirector();
CCEGLView* pEGLView = CCEGLView::sharedOpenGLView();

pDirector->setOpenGLView(pEGLView);

// turn on display FPS
pDirector->setDisplayStats(true);

// set FPS. the default value is 1.0/60 if you don't call this
pDirector->setAnimationInterval(1.0 / 60);

// create a scene. it's an autorelease object
CCScene *pScene = WelcomeLayer::scene();

// run
pDirector->runWithScene(pScene);

return true;
}

在这个函数里，我们看到了几个新的对象。CCDirector是一个导演类，CCScene是一个场景类。其中第9行和第12行的代码主要是用来调试的，也就是我们创建了项目后，在我们创建窗口的左下角会显示当前场景中有几张图片和刷新率之类的。下面说一下导演和场景的概念。在一个游戏当中通常是由一个导演和多个场景来组成的。导演用来实现场景的切换，场景用来实现游戏的内容。游戏刚进入时一般都会有一个游戏菜单，我们首先看那一下这个游戏菜单是怎么实现的。游戏菜单的实现类为WelcomeLayer。

在看这个菜单图层实现之前首先我们来看一下，抽象出的一个公共类：BaserLayer

我们看一下它头文件和源文件的实现

BaserLayer.h

#ifndef _BASER_LAYER_H
#define _BASER_LAYER_H
#include "cocos2d.h"
#include "SimpleAudioEngine.h"

USING_NS_CC;

using namespace CocosDenshion;

class BaserLayer : public CCLayer
{
public:
BaserLayer();
~BaserLayer();

virtual bool init();

CCSize getWinSize();

CREATE_FUNC(BaserLayer);

void setBackGroundImage(CCSprite *back);
void setBackGroundImage(const char* image);
};

#endif

BaserLayer.cpp

#include "BaserLayer.h"

BaserLayer::BaserLayer()
{
}

BaserLayer::~BaserLayer()
{
}

bool BaserLayer::init()
{
bool sRect = false;

do
{
CC_BREAK_IF(!CCLayer::init());

sRect = true;
}while(0);

return sRect;
}

CCSize  BaserLayer::getWinSize()
{
return CCDirector::sharedDirector()->getWinSize();
}

void BaserLayer::setBackGroundImage(CCSprite *back)
{
back->setPosition(ccp(getWinSize().width/2,getWinSize().height/2));
}

void BaserLayer::setBackGroundImage(const char *image)
{

CCSprite *sp = CCSprite::create(image);
sp->setPosition(ccp(getWinSize().width/2,getWinSize().height/2));
this->addChild(sp);
}

在这个类里，我们主要实现了一个getWinSize函数用来获得窗口的大小，setBackGroundImage用来设置图层的背景。

其中WelcomeLayer继承了BaserLayer类，CCLayer是一个图层类，用来实现游戏不同层次的元素。需要注意的是在此处图层只是一个容器，并不是真的有一张图片的元素。其头文件定义如下：

#ifndef WELCOME_LAYER_H
#define WELCOME_LAYER_H

#include "cocos2d.h"
#include "BaserLayer.h"

USING_NS_CC;

class WelcomeLayer : public BaserLayer
{
public:
WelcomeLayer();
~WelcomeLayer();

virtual bool init();

virtual void onEnter();

static CCScene* scene();

CREATE_FUNC(WelcomeLayer);

void setViews();

void startGameCallback(CCObject *sender );
void aboutGameCallback(CCObject *sender );
void optionGameCallback(CCObject *sender );
};

#endif

在上面的代码中我们继承CCLayer类创建了一个图层对象，在这个类中我们实现了一个静态函数scene用来创建一个游戏场景。其中init函数和onEnter函数是继承自父类的函数。接这个我们看到了一个宏定义CREATE_FUNC，这个宏的具体作用我们看了源文件在来了解，我们看一下创建场景的静态函数：

CCScene * WelcomeLayer::scene()
{
CCScene *scene = NULL;

do
{
scene = CCScene::create();
CC_BREAK_IF(!scene);

WelcomeLayer *layer = WelcomeLayer::create();
CC_BREAK_IF(!layer);

scene->addChild(layer);

}while(0);

return scene;
}

第7行的代码创建了新的场景对象，第8行CC_BREAK_IF宏用来检查我们创建的场景对象是否成功。第10行的代码用来创建我们自定义的图层对象，在这里需要注意的是我们在实现WelcomeLayer类的时候，并没有定义过create方法，那么这个方法究竟是在哪里创建的呢。大家可以尝试把头文件的CREATE_FUNC这一行代码注释掉，在编译代码看看。这个时候编译器会提示找不到WelcomeLayer::create这个函数。这个函数是由CREATE_FUNC来创建的，我们看一下这个宏的定义：

#define CREATE_FUNC(__TYPE__) \
static __TYPE__* create() \
{ \
__TYPE__ *pRet = new __TYPE__(); \
if (pRet && pRet->init()) \
{ \
pRet->autorelease(); \
return pRet; \
} \
else \
{ \
delete pRet; \
pRet = NULL; \
return NULL; \
} \
}

看到这里大家想必就明白了，实际上这个宏实现了一个静态的create函数用来返回一个__TYPE__的对象，这里的__TYPE__实际上就是我们传递的WelcomeLayer对象。接着我们看一下它的init函数实现。代码定义如下：

bool WelcomeLayer::init()
{
bool sRect = false;

do
{
CC_BREAK_IF(!BaserLayer::init());

setViews();

sRect = true;

}while(0);

return sRect;
}

在这个函数里，我们首先调用了其父类的init函数，接着调用setViews函数同来初始化界面元素。setViews函数定义如下：

void WelcomeLayer::setViews()
{
/**
*设置背景
*/
setBackGroundImage("loading.png");

CCSprite *logo = CCSprite::create("logo.png");
logo->setAnchorPoint(ccp(0.5,1.0));
logo->setPosition(ccp(getWinSize().width/2,getWinSize().height-20));
this->addChild(logo);

/**
*创建menu
*/
CCSprite *startGameNormal = CCSprite::create("menu.png",CCRectMake(0,0,126,33));
CCSprite *startGamePress = CCSprite::create("menu.png",CCRectMake(0,33,126,33));
CCSprite *startGameDisable = CCSprite::create("menu.png",CCRectMake(0,66,126,33));

CCMenuItemSprite *startGmae = CCMenuItemSprite::create(startGameNormal,startGamePress,startGameDisable,this,
menu_selector(WelcomeLayer::startGameCallback));

CCSprite *aboutGameNormal = CCSprite::create("menu.png",CCRectMake(252,0,126,33));
CCSprite *aboutGamePress = CCSprite::create("menu.png",CCRectMake(252,33,126,33));
CCSprite *aboutGameDisable = CCSprite::create("menu.png",CCRectMake(252,66,126,33));

CCMenuItemSprite *aboutGmae = CCMenuItemSprite::create(aboutGameNormal,aboutGamePress,aboutGameDisable,this,
menu_selector(WelcomeLayer::aboutGameCallback));

CCSprite *optionGameNormal = CCSprite::create("menu.png",CCRectMake(126,0,126,33));
CCSprite *optionGamePress = CCSprite::create("menu.png",CCRectMake(126,33,126,33));
CCSprite *optionGameDisable = CCSprite::create("menu.png",CCRectMake(126,66,126,33));

CCMenuItemSprite *optionGmae = CCMenuItemSprite::create(optionGameNormal,optionGamePress,optionGameDisable,this,
menu_selector(WelcomeLayer::optionGameCallback));

CCMenu *menu = CCMenu::create(startGmae,optionGmae,aboutGmae,NULL);
menu->setPosition(ccp(getWinSize().width/2,getWinSize().height/2));
menu->alignItemsVerticallyWithPadding(10);

this->addChild(menu);
}

在这个函数里我们设置了图层背景，初始化了选项菜单，主要包括三个选项菜单：New Game ，Option ，About。其中设置背景是通过其父类的setBackGroundImage函数实现的。

关于菜单的创建在此处只看其中一个。由于这个菜单是通过三张不同的图片来实现的，通过三张图片我们实现了不同的点，按，禁用效果。所以在此处我们创建了三个精灵(CCSprite)来实现按钮的效果。在这里我们简单看看创建精灵的函数

CCSprite *startGameNormal = CCSprite::create("menu.png",CCRectMake(0,0,126,33));

其中第一个参数为我们要加载的图片，第二个参数为一个CCRect类型的参数，在这个函数里写明了我们将要加载的内容在图片中的位置。在这里要稍微说明一下这个，大家打开menu.png图片文件就知道了。其中CCRectMake的四个参数依次为：起始x坐标，起始y坐标，宽度，高度。在这里在稍微说一下，为什么要把图片搞成这个样子呢，为什么不一张一张弄出来呢。大致的原因网上是这么解释的：假如我们有10张图片，如果我们一张一张加载要调用OpenGL渲染器10次，如果我们只把它加入到一张纹理图片里，加载的时候就只用调用一次OpenGL渲染器1次。

CCMenuItemSprite *startGmae = CCMenuItemSprite::create(startGameNormal,startGamePress,startGameDisable,this,
menu_selector(WelcomeLayer::startGameCallback));

在这里我们创建菜单item时使用了CCMenuItemSprite对象。其参数依次为:初始效果，按下效果，禁用效果，父对象，按下按钮时的回调函数。接着我们创建一个菜单控件，代码如下：

CCMenu *menu = CCMenu::create(startGmae,optionGmae,aboutGmae,NULL);
menu->setPosition(ccp(getWinSize().width/2,getWinSize().height/2));
menu->alignItemsVerticallyWithPadding(10);

此处需要注意的是创建CCMenu的函数，由于这个函数的参数是可变的，所以我们必须保证最后一个参数为NULL，依此来作为参数结束的标志。接着设置了菜单的坐标。其中ccp会生成一个CCPoint的对象。第三行的函数用来设置该菜单是一个垂直的菜单。

接着我们看一下当我们按下某一个菜单选项的回调函数是如何处理的

void WelcomeLayer::aboutGameCallback(CCObject *sender )
{
#ifdef DEBUG
CCLog("aboutGame");
#endif

CCDirector::sharedDirector()->pushScene(CCTransitionFade::create(0.5f, AboutLayer::scene() ));
}

以上的这个函数是当我们点下about按钮时所调用的函数，在这个函数中我们创建了一个新的场景，当前场景则会暂停。需要注意的是我们在加载该场景的时候创建了一个淡入淡出的的动画，其中个第一个参数为持续的时间，第二个参数为需要执行该动画的场景。以上就是游戏的开始场景创建。在这里贴一下效果图吧