Cocos2d-x 3.2 大富翁游戏项目开发-第六部分 地图设计

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,tableStartPosition_y-2*i*tableHeight), 1,          Color4F(0, 1, 0, 1));    draw->drawSegment(Vec2(tableStartPosition_x,tableStartPosition_y - 2*(i+1)*tableHeight),          Vec2(tableStartPosition_x+ 3*tableWidth,tableStartPosition_y - 2*(i+1)*tableHeight), 1,          Color4F(0, 1, 0, 1));    draw->drawSegment(Vec2(tableStartPosition_x+ tableWidth,tableStartPosition_y - tableHeight-2*i*tableHeight),          Vec2(tableStartPosition_x+ 3*tableWidth,tableStartPosition_y - tableHeight-2*i*tableHeight), 1,          Color4F(0, 1, 0, 1));    draw->drawSegment(Vec2(tableStartPosition_x+ tableWidth,tableStartPosition_y -2*i*tableHeight),          Vec2(tableStartPosition_x+ tableWidth,tableStartPosition_y -2* tableHeight-2*i*tableHeight), 1,          Color4F(0, 1, 0, 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，测试显示效果如图

点击下载代码

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

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