在选择地图后，我们将进入游戏地图，所以我们必须先把地图编辑一下，使用Tiled地图编辑工具。

1、打开Tiled工具，新建文件，设置

地图大小：宽20块高 15块

块大小： 宽和高都是32像素

这样地图宽为 20 X 32 = 640 高 15 X 32 =480

我们调试的视图尺寸为 800 X 480 宽度剩余160像素 ，我们用来放置游戏控制控件和 显示人物的一些信息

2、点击地图—新图块

选择sea.png图片，图片上部中我放置了15个道具，分别是空白地块、道路、增加体力的分值、偶然事件等，后续使用的时候我再具体说明

3、选择除道具之外的图片填充满空白图块。并修改本图层名称为“ground”

4、新建图层，命名为”way” ，这一层我们主要放置道路以及各种道具

5、新建图层，命名为“land” ，这一层放置空白地块

6、保存文件为”sea.tmx”

下面开始加载地图

由于每个关卡场景都需要加载地图，所以我们写一个基类GameBaseScene，用来加载地图，每个游戏关卡场景只有继承该类即可

GameBaseScene.h文件

//定义画表格的初始位置 和 每行每列的宽高值
const int tableStartPosition_x = 650; 
const int tableStartPosition_y = 450;
const int tableWidth = 50;
const int tableHeight = 40;

class GameBaseScene: public Layer
{
public:
    static Scene* createScene();
   TMXTiledMap* _map; //定义地图
    virtual bool init();  
virtual void addMap();//添加地图方法 

    CREATE_FUNC(GameBaseScene);

private:

	void drawTable(int playerNumber); //画表格，用来放置角色，根据上边定义的变量画
	void addPlayer();//添加游戏角色部分信息方法，在控制栏先显示头像，资金 体力值等
	void addRightBanner();//添加右边地图空白部分背景，上方放置人物等信息
};

#endif

GameBaseScene.cpp文件

//调用了添加地图方法，添加banner背景 ，画表格 ，添加游戏人物部分信息方法
bool GameBaseScene::init()
{
	if ( !Layer::init() )
	{
		return false;
	}
	addMap();
	addRightBanner();
	drawTable(2);
	addPlayer();
	return true;
}

void  GameBaseScene::addRightBanner()
{
	Sprite* rightBanner = Sprite::create(RIGHT_BANNER);
	rightBanner->setAnchorPoint(ccp(0,0));
	rightBanner->setPosition( ccp(tableStartPosition_x,0));//根据头文件定义的初始x值设置位置
	addChild(rightBanner);
}

//绘制表格，这部分代码可以不用看，只要知道是根据游戏人物数量，绘制表格 ，可以采用图片替换这个绘制。自己感觉用图片不如表格计算位置精确。
void GameBaseScene:: drawTable(int playerNumber)
{
	auto s = Director::getInstance()->getWinSize();
	
	auto draw = DrawNode::create();
	this->addChild(draw);

	for(int i=0;i<playerNumber;i++)
	{
		draw->drawSegment(Vec2(tableStartPosition_x,tableStartPosition_y-2*i*tableHeight),Vec2(tableStartPosition_x+ 3*tableWidth,1,Color4F(0,1));

		draw->drawSegment(Vec2(tableStartPosition_x,tableStartPosition_y - 2*(i+1)*tableHeight),1));

		draw->drawSegment(Vec2(tableStartPosition_x+ tableWidth,tableStartPosition_y - tableHeight-2*i*tableHeight),tableStartPosition_y -2*i*tableHeight),Vec2(tableStartPosition_x+ tableWidth,tableStartPosition_y -2* tableHeight-2*i*tableHeight),1));
	}
}

//添加人物信息的方法，就是根据绘制的表格位置，把人物头像 、资金 、体力等信息同表格对齐显示，主要是坐标计算。
void GameBaseScene:: addPlayer()
{
	Sprite* player_me = Sprite::create(PLAYER_ME);
	player_me->setPosition(tableStartPosition_x+tableWidth/2,tableStartPosition_y-tableHeight);
	addChild(player_me);


    LabelTTF *player_me_money = LabelTTF::create();
    player_me_money->setString("$");
	player_me_money->setAnchorPoint(ccp(0,0.5));
    player_me_money->setFontSize(25);
    player_me_money->setPosition(tableStartPosition_x+tableWidth,tableStartPosition_y-tableHeight/2);
    addChild(player_me_money);

    LabelTTF *player_me_strength = LabelTTF::create();
    player_me_strength->setString("+");
	player_me_strength->setAnchorPoint(ccp(0,0.5));
    player_me_strength->setFontSize(28);
    player_me_strength->setPosition(tableStartPosition_x+tableWidth,tableStartPosition_y-tableHeight/2*3);
    addChild(player_me_strength);

	Sprite* player_enemy1 = Sprite::create(PLAYER_ENEMY1);
	player_enemy1->setPosition(tableStartPosition_x+tableWidth/2,tableStartPosition_y-3*tableHeight);
	addChild(player_enemy1);

    LabelTTF *player_enemy1_money = LabelTTF::create();
    player_enemy1_money->setString("$");
	player_enemy1_money->setAnchorPoint(ccp(0,0.5));
    player_enemy1_money->setFontSize(25);
    player_enemy1_money->setPosition(tableStartPosition_x+tableWidth,tableStartPosition_y-tableHeight/2*5);
    addChild(player_enemy1_money);

    LabelTTF *player_enemy1_strength = LabelTTF::create();
    player_enemy1_strength->setString("+");
	player_enemy1_strength->setAnchorPoint(ccp(0,0.5));
    player_enemy1_strength->setFontSize(28);
    player_enemy1_strength->setPosition(tableStartPosition_x+tableWidth,tableStartPosition_y-tableHeight/2*7);
    addChild(player_enemy1_strength);
}

基类做好了，我们就可以编写具体关卡场景类了，编写SeaScene类

//继承自基类GameBaseScene
class SeaScene: public GameBaseScene
{
public:
    static Scene* createScene();
  
    virtual bool init();  
 
    CREATE_FUNC(SeaScene);
};

#endif

//初始化方法需要调用基类的init方法
bool SeaScene::init()
{
	if ( !GameBaseScene::init() )
	{
		return false;
	}

	return true;
}

//编写继承自父类的addMap方法
void GameBaseScene::addMap()
{
	_map = TMXTiledMap::create( "map/sea.tmx");
	addChild(_map);
}	

修改MapChooseScene的onTouchEnded（）方法，添加进入关卡场景代码，为了不至于进入场景太突然，我们添加了TransitionFadeBL场景切换动画

void MapChooseScene::onTouchEnded(Touch*touch,Event *unused_event)
{

	Point endPoint = Director::getInstance()->convertToGL(touch->getLocationInView());
    float distance = endPoint.x - beginTouchPoint.x;
    if(fabs(distance) > TOUCH_DISTANCE)
    {
        adjustScrollView(distance);
    }else
	{
		if(currentPage == 2)
		{
			auto  scene = 	TransitionFadeBL::create(2,SeaScene::createScene());
	
			Director::getInstance()->pushScene(scene);
		}

		
	}
}

Ok，测试显示效果如图

点击下载代码

http://download.csdn.net/detail/lideguo1979/8272005

未完待续....................