這是Cocos2D-X磚塊地圖教程系列，你將在此創造一款有關沙漠中的忍者尋找美味的西瓜的簡單游戲。

需要注意的是該教程是關于Cocos2D-X，即Cocos2D-iPhone的跨平臺C++移植。所以你在此編寫的代碼將適用于iPhone，Android和更多平臺上！

在本系列文章的第一部分中，你將學習如何添加磚塊地圖到游戲中，跟著玩家滾動地圖，并使用對象圖層。你將學到如何使用地圖編輯器去創造磚塊地圖本身。

而第二部分是關于如何在地圖上創造碰撞領域，如何使用磚塊屬性，如何創造可收集的道具并動態地修改地圖，以及如何確保你的忍者不會吃太多東西。

注：本篇教程類似于Cocos2D-iPhone教程。

讓我們開始創造磚塊地圖吧！

開始

對于這一教程，你需要安裝最新的Cocos2D-X版本（游戲邦注：在寫本篇教程的時候更新到2.1.4）。如果你還未擁有最新版本的Cocos2D-X，先下載它并在終端運行如下命令去安裝模版：

cd ~/Downloads/cocos2d-x-2.1.4 
./install-templates-xcode.sh -f -u 

然后使用iOS\cocos2d-x\cocos2dx模版在Xcode創造一個新項目。點擊Next，將項目命名為TileGame，將項目設置為Universal，點擊Next然后點擊Create。

你將在這一項目中使用ARC，所以如果這是你第一次聽到ARC，我會鼓勵你先了解下它。模版并不是默認使用ARC，但幸運的是，我們能夠輕松地進行 修改。前往Edit\Refactor\Convert to Objective-C ARC。往下拉并只選擇文件main.m, AppDelegate.cpp, HelloWorldScene.cpp，然后點擊Check并完成向導的步驟。

創建并運行，然后確保一切都還正常運行—-你應該能夠看到標準的“你好世界”屏幕。

接下來下載游戲資源的壓縮文件。壓縮文件包含如下內容：

你將面向玩家對象使用的精靈。

一些伴隨著cfxr效用所創造的音效（你將會在教程中用到）。

一些伴隨著Garage Band所創造的背景音樂。

你將用到的一些磚塊設置—-這將伴隨著你將使用的地圖編輯器，但我認為我們能夠更輕松地將其與其它內容包含在一起。

一些額外的“特別”磚塊，將在之后進行詳細解釋。

當你下載了資源后，打開它并將TileGameResources文件夾拖到項目的Resources群組中。在項目菜單里，右擊 Resources群組，并選擇Add Files to “TileGame”…選擇Resources/TileGameResources文件夾，核實選中了Copy items into destination group’s folder (if needed)以及Create groups for any added folders，然后點擊完成。

如果一切順利的畫，所有的文件都將出現在你的項目中。

你的項目應該如下：

現在我們將開始創造地圖！

創造地圖

Cocos2D-X支持基于開放源Tiled Map Editor去創造地圖并將其以TMX格式進行保存。

下載Tiled Map Editor。在編寫本篇教程的時候，其最新版本是0.9.0。

然后運行Tiled，前往File\New，并如下填寫對話內容：

在定向區域中，你可以在Orthogonal或Isometric間做出選擇。在此你將選擇Orthogonal。

接下來你將設置地圖的大小。記住這是在磚塊中，而不是像素中。你將創造一個較小的地圖，所以在此你應該選擇50×50。Tiled將基于像素呈現給 你總體地圖的大小，即在New Map對話的最底部。這是在長度和寬度的基礎上將地圖大小（50個磚塊）乘以磚塊的大小（32像素）所計算出來的。

最后，你將明確寬度和高度。你在此所選擇的是取決于美術人員所設置的磚塊。對于本篇教程，你將使用一些伴隨著Tiled編輯器的樣本磚塊，即32×32規格，選擇它便點擊OK。

接下來你必須添加磚塊設置去繪制你的地圖。在菜單欄上點擊Map，然后關掉New Tileset…，并如下填寫對話框內容：

為了獲得圖像，點擊Browse并導航至你自己的TileGame/Resources/TileGameResources文件夾，然后選擇你之前從資源壓縮中下載的tmw_desert_spacing.png文件，并將其添加到項目中。它將自動根據文件名填寫名字。

你可以將寬度和高度設置為32×32，因為這也是磚塊的大小。對于邊緣和間隔：

邊緣是關于在Tiled開始尋找真正的磚塊像素前應該為當前的磚塊略過多少多少像素（包括寬度和高度）。

間隔是關于Tiled在明確了實際磚塊像素并轉向下一個磚塊數據之后應該前進多少像素（包括寬度和高度）。

如果你著眼于tmw_desert_spacing.png，你將發現每個磚塊都圍繞著一個1像素的黑色邊緣，這也解釋了邊緣和間隔為1的設置。

當你點擊OK時，你將看到磚塊呈現在Tilesets窗口中。現在你可以開始繪制了。點擊工具欄的Stamp Brush圖標，然后點擊地圖上的任何一個位置去放置一個磚塊。

所以繼續繪制地圖—-盡可能發揮創造性！確保添加至少一些建筑到地圖上，因為你在之后將需要一些碰撞內容。

為了更輕松地繪制內容，你可以著眼于一些快捷方法。以下是最常用到的一些方法：

你可以在Tileset選擇器中圍繞著一系列磚塊拖曳一個盒子，并同時放下多個相鄰的磚塊。

你可以通過View\Zoom In和View\Zoom Out進行放大和縮小。

z鍵將在基于Stamp Brush工具編輯地圖時進行旋轉。

在一些新功能中你可能會注意到Mini-map。這是一個很棒的功能，它讓你能夠看到一個迷你地圖！著眼于我在Mini-map最下方的迷宮中的糟糕嘗試。紅色盒子代表你在主要編輯窗口中看到的區域。

當你在閱讀下一個區域中的滾動時牢牢記住這一Mini-map視圖。

需要注意的是這一教程的資源是出現在地圖前的——所以如果你很懶的話便可以直接利用它。如果你這么做，你應該在Tiled打開地圖并明確它是如何設置的。

當你完成地圖的繪制時，在Layers視圖中雙擊Tile Layer，將名字改為Background。然后點擊File\Save，并將文件保存到TileGame項目中的TileGame \Resources\TileGameResources，將文件命名為TileMap.tmx，并覆蓋現有的文件。

你將在之后使用Tiled做其它事，但是現在讓我們將這一地圖帶進游戲中！

添加Tiled地圖到Cocos2D-X場景中

打開HelloWorldScene.h，在#include “cocos2d.h”之后添加如下內容：

using namespace cocos2d; 

這能指導編輯器去使用cocos2d命名空間，所以你不需要為所有內容加上cocos2d的前綴。

然后添加以下內容到類定義中，即在花括號之后：

private: 
CCTMXTiledMap *_tileMap; 
CCTMXLayer *_background; 

這創造了一個實例變量去追蹤磚塊地圖本身，并創造了另一個實例變量去追蹤地圖的背景層。你將在之后學到更多有關磚塊地圖層面的內容。

接下來，用如下內容換掉HelloWorldScene.cpp：

CCTMXObjectGroup *objectGroup = _tileMap->objectGroupNamed(“Objects”); 
 
if(objectGroup == NULL){ 
CCLog(“tile map has no objects object layer”); 
return false; 
} 
 
CCDictionary *spawnPoint = objectGroup->objectNamed(“SpawnPoint”); 
 
int x = ((CCString)*spawnPoint->valueForKey(“x”)).intValue(); 
int y = ((CCString)*spawnPoint->valueForKey(“y”)).intValue(); 
 
_player = new CCSprite(); 
_player->initWithFile(“Player.png”); 
_player->setPosition(ccp(x,y)); 
 
this->addChild(_player); 
this->setViewPointCenter(_player->getPosition()); 

最后一行有個預兆——但不要擔心，你很快就能到達那里。

讓我們暫停一會并解釋對象層面和對象群組。首先注意你是通過在CCTMXTiledMap對象中（而不是layerNamed）通過objectGroupNamed方法檢索對象層面。它返回了一個特殊的CCTMXObjectGroup對象。

然后objectGroup調用了objectNamed方法去獲得一個CCDictionary，并包含了一些有關對象的有用信息，如x和y軸，寬度和高度。在教程的這一部分，你需要關心的便是x和y軸，將其設置為玩家精靈的位置。

在代碼塊的最后你設置了視圖去明確玩家的位置。所以現在添加如下內容到HelloWorldScene.h中：

// In the public section 
void setViewPointCenter(CCPoint position); 

并添加一個新方法到HelloWorldScene.cpp（在文件的最下方最好）：

void HelloWorld::setViewPointCenter(CCPoint position) { 
 
CCSize winSize = CCDirector::sharedDirector()->getWinSize(); 
 
int x = MAX(position.x, winSize.width/2); 
int y = MAX(position.y, winSize.height/2); 
x = MIN(x, (_tileMap->getMapSize().width * this->_tileMap->getTileSize().width) – winSize.width / 2); 
y = MIN(y, (_tileMap->getMapSize().height * _tileMap->getTileSize().height) – winSize.height/2); 
CCPoint actualPosition = ccp(x, y); 
 
CCPoint centerOfView = ccp(winSize.width/2, winSize.height/2); 
CCPoint viewPoint = ccpSub(centerOfView, actualPosition); 
this->setPosition(viewPoint); 
} 

這是關于磚塊的解釋。想象這一函數設置了攝像機的中心位置。它讓用戶能夠進入地圖中x，y軸的任何位置—-但是你有可能不想呈現出某些點，如你可能不想要屏幕超過地圖的邊緣（那么它便只會呈現出黑邊！）。

如下圖：

如果攝像機的中心小于winSize.width/2或winSize.height/2，那么部分視角是否會脫離屏幕？同樣的，檢查最上方的界限也很重要，這也是setViewPointCenter所做的。

到目前為止這一函數被當成設置了攝像機所面對的中心位置。然而，這并不是它真正做的。這是在Cocos2D-X中操控CCNode的攝像機的一種方法，但使用它會比你將使用的解決方法（移動整個層面）更復雜。

著眼于這一圖解：

通過從視圖中心減去實際位置你便能夠做到這點，然后將HelloWorld層面設為該位置。

說了這么多理論，是時候執行它們了！創建并運行項目，如果一切運行正常，你將在屏幕上看到忍者，并且視圖會不斷移動去呈現他的行動。

讓忍者移動

這是個好的開始，但是你的忍者還只是站在那里！這并不像真正的忍者。你將朝著用戶敲打的方向移動忍者而讓他動起來。添加如下代碼到HelloWorldScene.h的公共部分：

void registerWithTouchDispatcher(); 
void setPlayerPosition(CCPoint position); 
bool ccTouchBegan(CCTouch *touch, CCEvent *event); 
void ccTouchEnded(CCTouch *touch, CCEvent *event); 

然后打開HelloWorldScene.cpp并將如下代碼添加到init：

this->setTouchEnabled(true); 

這將層面設置為可碰觸的，所以它將關注于碰觸事件。接下來添加如下方法到文件最底端：

#pragma mark – handle touches 
 
void HelloWorld::registerWithTouchDispatcher() { 
CCDirector::sharedDirector()->getTouchDispatcher()->addTargetedDelegate(this, 0, true); 
} 
 
bool HelloWorld::ccTouchBegan(CCTouch *touch, CCEvent *event) 
{ 
return true; 
} 
 
void HelloWorld::setPlayerPosition(CCPoint position) { 
_player->setPosition(position); 
} 
 
void HelloWorld::ccTouchEnded(CCTouch *touch, CCEvent *event) 
{ 
CCPoint touchLocation = touch->getLocationInView(); 
touchLocation = CCDirector::sharedDirector()->convertToGL(touchLocation); 
touchLocation = this->convertToNodeSpace(touchLocation); 
 
CCPoint playerPos = _player->getPosition(); 
CCPoint diff = ccpSub(touchLocation, playerPos); 
 
if ( abs(diff.x) > abs(diff.y) ) { 
if (diff.x > 0) { 
playerPos.x += _tileMap->getTileSize().width; 
} else { 
playerPos.x -= _tileMap->getTileSize().width; 
} 
} else { 
if (diff.y > 0) { 
playerPos.y += _tileMap->getTileSize().height; 
} else { 
playerPos.y -= _tileMap->getTileSize().height; 
} 
} 
 
// safety check on the bounds of the map 
if (playerPos.x <= (_tileMap->getMapSize().width * _tileMap->getTileSize().width) && 
playerPos.y <= (_tileMap->getMapSize().height * _tileMap->getTileSize().height) && 
playerPos.y >= 0 && 
playerPos.x >= 0 ) 
{ 
this->setPlayerPosition(playerPos); 
} 
 
this->setViewPointCenter(_player->getPosition()); 
} 

在此你覆蓋了registerWithTouchDispatcher方法去處理目標碰觸事件。這將導致ccTouchBegan/ccTouchEnded方法（單數情況）被調用，而不是ccTouchesBegan/ccTouchesEnded方法（復數情況）。

你可能會好奇單數情況和復數情況有什么區別。不過在這種情況下我們沒有必要去弄清楚這些問題。但是我還是想向所有人介紹這一方法，因為它帶有2個主要優勢：

“你不需要處理NSSets，調度程序能夠區分它們。每次調用你將獲得一個UITouch。”

“你可以通過在ccTouchBegan返回YES而要求一個UITouch。要求碰觸的更新只會被發送到要求它們的委托中。所以如果你刪除/結束/取消更新，你就需要確保它是你的碰觸。這將讓你無需在執行多點碰觸時做各種檢查。”

不管怎樣，在你的ccTouchEnded位置上，你像往常那樣將位置轉換成視圖坐標軸，然后再轉換成GL坐標軸。而新任務便是你調用了this->convertToNodeSpace(touchLocation)。

這是因為碰觸位置將提供給你用戶在視口中輕敲的坐標軸（例如100，100）。但是你可能已經滾動了地圖，所以它將匹配（800，800）的位置。所以調用這一方法將基于你如何移動層面而抵消碰觸。

接下來你將明確碰觸點和玩家位置的區別。你將基于碰觸選擇一個方向，所以首先你應該決定是上下移動還是左右移動。然后你將判斷是正數還是復數而進行上下移動。

你將相對地調整玩家位置，然后將視圖中心設置為玩家的位置，這是你在上部分便寫下的內容！

注意你必須添加一個安全檢查以確保不會將玩家帶離地圖外部！

所以創建并運行項目，然后嘗試它！現在你應該能夠輕敲屏幕去移動忍者了！

最后

這時候你已經知道如何創造地圖并將其整合到游戲中了。而在第二部分教程中你將進一步學習如何添加碰撞檢測到地圖中以避免忍者能夠輕松地穿越墻壁。