tilemapwin教程

『壹』 android cocos2d x 怎麼創建地圖

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

cd ~/Downloads/cocos2d-x-2.1.4 ./install-templates-xcode.sh -f -u 然後使用iOScocos2d-xcocos2dx模版在Xcode創造一個新項目。點擊Next，將項目命名為TileGame，將項目設置為Universal，點擊Next然後點擊Create。

你將在這一項目中使用ARC，所以如果這是你第一次聽到ARC，我會鼓勵你先了解下它。模版並不是默認使用ARC，但幸運的是，我們能夠輕松地進行 修改。前往EditRefactorConvert 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，前往FileNew，並如下填寫對話內容：

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選擇器中圍繞著一系列磚塊拖曳一個盒子，並同時放下多個相鄰的磚塊。

你可以通過Viewoom In和Viewoom Out進行放大和縮小。

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

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

tileset（from raywenderlich）

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

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

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

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

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

打開HelloWorldScene.h，在#include 「cocos2d.h」之後添加如下內容：

usingnamespacecocos2d;

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

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

private:CCTMXTiledMap*_tileMap;CCTMXLayer*_background;

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

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

CCTMXObjectGroup*objectGroup=_tileMap->objectGroupNamed(「Objects」);if(objectGroup==NULL){CCLog(「」);returnfalse;}CCDictionary*spawnPoint=objectGroup->objectNamed(「SpawnPoint」);intx=((CCString)*spawnPoint->valueForKey(「x」)).intValue();inty=((CCString)*spawnPoint->valueForKey(「y」)).intValue();_player=newCCSprite();_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中：

//(CCPointposition);

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

voidHelloWorld::setViewPointCenter(CCPointposition){CCSizewinSize=CCDirector::sharedDirector()->getWinSize();intx=MAX(position.x,winSize.width/2);inty=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);CCPointactualPosition=ccp(x,y);CCPointcenterOfView=ccp(winSize.width/2,winSize.height/2);CCPointviewPoint=ccpSub(centerOfView,actualPosition);this->setPosition(viewPoint);}

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