Cocos2d-x制作跳棋第二步:工程建立与界面编写

上次为大家分享了跳棋素材的制作方法，这次为大家讲一讲建立工程和游戏界 面的编写。

首先进入dos界面输入指令。例(cocos new -p game.com.tutuANE -d e:\cocosstudy -l cpp 名字).

其中-d后面是工程文件所在目录，cpp之后是工程的名字可以随意填写。

工程建立好后就来总结我们一共需要多少个界面:

1· 游戏选择界面

2· 进行游戏界面

3· 游戏帮助界面

因此我们需要建立三个头文件和三个.cpp文件，分别为:

1· MainMenu.h、MainMenu.cpp（主界面）

2· GameScene.h、GameScene.cpp（游戏界面）

3· HelpScene.h、HelpScene.cpp（帮助界面）

一、编写主界面

主界面中我们需要背景图片和三个按钮(开始按钮、帮助按钮、退出按钮)，在MainMenu.h中对 类的定义代码如下:

<span style="font-size:14px;">class MainMenu:public Layer
{
public:
	static Scene * createScene();
	virtual bool init();
	void menuCallBack(Ref *object);
	void StartCallBack(Ref *object);
	void HelpCallBack(Ref *object);
	void DoubleCallBack(Ref *object);
	void ManyCallBack(Ref *object);
	void ColorCallBack(Ref *object);
	CREATE_FUNC(MainMenu);
};</span>

其中menuCallBack是退出按钮的回调函数，StartCallBack是开始按钮的回调函数，HelpCallBack是帮 助按钮的回调函数。

CREATE_FUNC(MainMenu)是对类MainMenu的create函数的宏定义，一般不需要自己重载，只有在 create函数需要参数时才会重载，后面会有需要重载的情况。

在跳棋游戏中会有双人游戏模式和多人游戏模式，在这里需要在点击开始按钮后又弹出两个按钮来选择 游戏模式。

我用MenuItemImage对象来定义按钮加载两张图片，一个是显示在界面上的图片一个发生点击时显示的 图片，然后再添加一个回调函数的声明，然后将MenuItemImag对象添加到Menu对象中，最后将Menu对象添 加到MainMenu图层中。定义如下:

<span style="font-size:14px;">auto StartItem = MenuItemImage::create("目录1","目录2",CallFunc::create(this,callfunc_selector(MainMenu::xxx)));
 auto menu = Menu::create(StartItem,xxx,NULL);
 menu->setPostion(Point::ZERO);</span>

在开始按钮的回调函数中我们可以用同样的方法将双人模式的按钮和多人模式按钮加入到MainMenu图层 中。

当点击双人按钮时我们还要选择我们需要哪两种颜色的棋子，所以我们要把六种不同颜色的棋子以按钮 的形式加载到界面中供玩家选择。最后效果图如下:

因为跳棋游戏规则是棋子占领对角线方向的区域，而我们的棋盘各个角已经上好颜色，所以在显示 所有棋子按钮时要严格要求是棋盘图片上的颜色顺序，然后我们对棋子进行编号，每对角线的棋子是

一对，我设置的是每一对棋子的编号是一个正数和其对应的相反数，这样好分辨，当然这个正数也是

有特殊要求的，因为我们要把这个编号带入到第二个场景中以便我们对棋盘图片进行旋转来使双方棋

子出现在屏幕的上下对角线位置。

二、游戏界面

在游戏界面中我们需要一个返回按钮和棋盘图片以及相应要摆放的棋子。

添加返回按钮的方法在主界面中已经介绍过了，主要是说明棋盘的摆放和棋子的摆放。

在游戏界面中我们需要知道主界面中我们选择的到底是双人模式还是多人模式，在双人模式下我们 又选择了哪两种颜色的棋子，所以在游戏界面类的定义中我们就不能用类似CREATE_FUNC(xxx)的方法 了。因为我们要向create函数中传入参数来判断模式和颜色。代码如下:

<span style="font-size:14px;">/****************
函数名:create
参数:type(双人或者多人的标志)
返回值:Game *
作用:创建Game对象并返回
****************/
Game * Game::create(int type)
{
	Game * pRet = new Game();
	if(pRet && pRet->init(type))
	{
		pRet->autorelease();
		return pRet;
	}else
	{
		delete pRet;
		pRet = NULL;
		return pRet;
	}
}</span>

其中type为0则表示多人模式，1、-1、2、-2、3、-3则表示双人模式，其中的正数则表示棋盘图片 应该旋转的角度。旋转代码如下:

<span style="font-size:14px;">	auto sprite1 = Sprite::create("Board/Board1.png");		                        //创建Sprite对象加载棋盘图片
	sprite1->setPosition(Point(420,320));					                //设置棋盘图片坐标
	if(type != 0)										//判断是否为双人模式
	{
		ActionInterval * rotateto = RotateTo::create(0,60*(abs(type)-1));		//根据type大小设置棋盘图片旋转角度
		sprite1->runAction(rotateto);							//执行棋盘图片旋转动作
	}
	this->addChild(sprite1);								//将棋盘图片加载进图层中

</span>

rotateto是旋转动作变量，runAction(xxx)是用来执行动作的函数。

棋子摆放就需要棋子而且棋子还会有跳跃、移动的动作，所以棋子也必须是一个对象，因此我们还 要在工程文件里面建立Chess.h和Chess.cpp文件来对棋子对象进行定义封装。

棋子对象是一个精灵，所以它继承于Sprite类，棋子有颜色所以它的create函数要传入参数来判断颜色，因此 要create重载，本身棋子还有坐标、颜色和各种动作，当然现阶段还不是对动作进行描述的时候，我们现在只需要 对Chess进行上色和定位功能的实现。代码如下:

/****************
函数名:init
参数:color(棋子的颜色标志)
返回值:bool
作用:初始化棋子的性质
****************/
bool Chess::init(int color)
{
	if(!Sprite::init())
		return false;

	//判断color决定棋子的颜色
	switch (color)
	{
	case 3:
		{
			auto sprite = Sprite::create("chess1/chess.png");		//创建Sprite对象加载棋子图片
			this->addChild(sprite);									//将Sprite对象加载到Chess中
		}
		break;
	case -2:
		{
			auto sprite = Sprite::create("chess2/chess.png");
			this->addChild(sprite);
		}
		break;
	case -3:
		{
			auto sprite = Sprite::create("chess3/chess.png");
			this->addChild(sprite);
		}
		break;
	case 1:
		{
			auto sprite = Sprite::create("chess4/chess.png");
			this->addChild(sprite);
		}
		break;
	case -1:
		{
			auto sprite = Sprite::create("chess5/chess.png");
			this->addChild(sprite);
		}
		break;
	case 2:
		{
			auto sprite = Sprite::create("chess6/chess.png");
			this->addChild(sprite);
		}
		break;
	default:
		break;
	}
	return true;
}

方法就是创建一个Sprite精灵加载棋子图片，然后添加到Chess里。

<span style="font-size:14px;">/****************
函数名:setPostionRC
参数:x(棋子的x坐标) y(棋子的y坐标)
返回值:无
作用:将棋子定位在棋盘上
****************/
void Chess::setPostionRC(int x,int y)
{
	this->x = x;											//将x坐标存到Chess.x中
	this->y = y;											//将y坐标存到Chess.y中
	setPosition(Point(342+x*tmp,185 + 39*y*(sqrt(3)/2)));	//定位棋子
}</span>

方法是调用Sprite中的setPostion函数。其中342、185为棋盘零点在背景图片中的位置，39为相 邻棋子之间的距离，tmp为39一半。

在GameScene中棋子摆放的代码如下:

<span style="font-size:14px;">	//判断是否为双人模式
	if(type != 0)
	{
		//将棋子按规律摆放在棋盘上
		for(int i = 4;i > 0;i--)
		{
			for(int j = 0;j < i;j++)
			{
				auto c1 = Chess::create(type > 0 ? type : -type);		//创建Chess对象通过type初始化颜色
				c1->setPostionRC(j*2+5-i,13-i);				        //设置Chess坐标
				lay[17-i][j*2+13-i] = 1;					//将lay中相应坐标的状态设置成1
				this->addChild(c1);						//将Chess棋子加载入图层中
				auto c2 = Chess::create(type > 0 ? -type : type);
				c2->setPostionRC(j*2+5-i,i-5);
				lay[i-1][j*2+13-i] = 2;
				this->addChild(c2);
				chess1.pushBack(c1);						//将棋子添加到chess1容器中
				chess2.pushBack(c2);						//将棋子添加到chess2容器中
			}	
		}
	}else																//多人模式
	{
		for(int i = 4;i > 0;i--)
		{
			for(int j = 0;j < i;j++)
			{
				auto c1 = Chess::create(1);
				c1->setPostionRC(j*2+5-i,13-i);
				lay[17-i][j*2+13-i] = 1;
				this->addChild(c1);
				auto c2 = Chess::create(-1);
				c2->setPostionRC(j*2+5-i,i-5);
				lay[i-1][j*2+13-i] = 2;
				this->addChild(c2);
				auto c3 = Chess::create(3);
				c3->setPostionRC(2*i-10-j,j);
				lay[j+4][2*i-2-j] = 3;
				this->addChild(c3);
				auto c4 = Chess::create(-3);
				c4->setPostionRC(17-i-j,9+j-i);
				lay[13+j-i][25-i-j] = 4;
				this->addChild(c4);
				auto c5 = Chess::create(2);
				c5->setPostionRC(i+j-9,9+j-i);
				lay[13+j-i][i+j-1] = 5;
				this->addChild(c5);
				auto c6 = Chess::create(-2);
				c6->setPostionRC(18-2*i+j,j);
				lay[j+4][26-2*i+j] = 6;
				this->addChild(c6);
				chess1.pushBack(c1);
				chess2.pushBack(c2);
				chess3.pushBack(c3);
				chess4.pushBack(c4);
				chess5.pushBack(c5);
				chess6.pushBack(c6);
			}
		}
	}</span>

效果图如下

三、 帮助界面

帮助界面比较简单

就是在PS中对背景图片添加游戏介绍，添加精灵加载背景图片。

方法有点偷懒……后期会做一个有拖拽效果的界面。

图如下: