對於這壹教程，妳需要安裝最新的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並完成向導的步驟。
select targets（from raywenderlich）
創建並運行，然後確保壹切都還正常運行—-妳應該能夠看到標準的“妳好世界”屏幕。
接下來下載遊戲資源的壓縮文件。壓縮文件包含如下內容：
妳將面向玩家對象使用的精靈。
壹些伴隨著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，然後點擊完成。
如果壹切順利的畫，所有的文件都將出現在妳的項目中。
tile game（from raywenderlich）
現在我們將開始創造地圖！
創造地圖
Cocos2D-X支持基於開放源Tiled Map Editor去創造地圖並將其以TMX格式進行保存。
下載Tiled Map Editor。在編寫本篇教程的時候，其最新版本是0.9.0。
然後運行Tiled，前往File\New，並如下填寫對話內容：
new map（from raywenderlich）
在定向區域中，妳可以在Orthogonal或Isometric間做出選擇。在此妳將選擇Orthogonal。
接下來妳將設置地圖的大小。記住這是在磚塊中，而不是像素中。妳將創造壹個較小的地圖，所以在此妳應該選擇50×50。Tiled將基於像素呈現給
妳總體地圖的大小，即在New Map對話的最底部。這是在長度和寬度的基礎上將地圖大小（50個磚塊）乘以磚塊的大小（32像素）所計算出來的。
最後，妳將明確寬度和高度。妳在此所選擇的是取決於美術人員所設置的磚塊。對於本篇教程，妳將使用壹些伴隨著Tiled編輯器的樣本磚塊，即32×32規格，選擇它便點擊OK。
接下來妳必須添加磚塊設置去繪制妳的地圖。在菜單欄上點擊Map，然後關掉New Tileset…，並如下填寫對話框內容：
new tileset（from raywenderlich）
為了獲得圖像，點擊Browse並導航至妳自己的TileGame/Resources/TileGameResources文件夾，然後選擇妳之前從資源壓縮中下載的tmw_desert_spacing.png文件，並將其添加到項目中。它將自動根據文件名填寫名字。
妳可以將寬度和高度設置為32×32，因為這也是磚塊的大小。對於邊緣和間隔：
邊緣是關於在Tiled開始尋找真正的磚塊像素前應該為當前的磚塊略過多少多少像素（包括寬度和高度）。
間隔是關於Tiled在明確了實際磚塊像素並轉向下壹個磚塊數據之後應該前進多少像素（包括寬度和高度）。
如果妳著眼於tmw_desert_spacing.png，妳將發現每個磚塊都圍繞著壹個1像素的黑色邊緣，這也解釋了邊緣和間隔為1的設置。
tile（from raywenderlich）
當妳點擊OK時，妳將看到磚塊呈現在Tilesets窗口中。現在妳可以開始繪制了。點擊工具欄的Stamp
Brush圖標，然後點擊地圖上的任何壹個位置去放置壹個磚塊。
tileset（from raywenderlich）
所以繼續繪制地圖—-盡可能發揮創造性！確保添加至少壹些建築到地圖上，因為妳在之後將需要壹些碰撞內容。
tileset（from raywenderlich）
為了更輕松地繪制內容，妳可以著眼於壹些快捷方法。以下是最常用到的壹些方法：
妳可以在Tileset選擇器中圍繞著壹系列磚塊拖曳壹個盒子，並同時放下多個相鄰的磚塊。
妳可以通過View\Zoom In和View\Zoom Out進行放大和縮小。
z鍵將在基於Stamp Brush工具編輯地圖時進行旋轉。
在壹些新功能中妳可能會註意到Mini-map。這是壹個很棒的功能，它讓妳能夠看到壹個迷妳地圖！著眼於我在Mini-map最下方的迷宮中的糟糕嘗試。紅色盒子代表妳在主要編輯窗口中看到的區域。
tileset（from raywenderlich）
當妳在閱讀下壹個區域中的滾動時牢牢記住這壹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軸的任何位置—-但是妳有可能不想呈現出某些點，如妳可能不想要屏幕超過地圖的邊緣（那麽它便只會呈現出黑邊！）。