Cocos2d-x 3.2 大富翁遊戲項目開發-第六部分地圖設計

在選擇地圖後，我們將進入遊戲地圖，所以我們必須先把地圖編輯一下，使用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,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，測試顯示效果如圖