瓦片地圖-Cocos2dx

瓦片地圖

在遊戲開發過程中，我們會遇到超過屏幕大小的地圖，例如即時戰略遊戲，使得玩家可以在地圖中滾動遊戲畫面。這類遊戲通常會有豐富的背景元素，如果直接使用背景圖切換的方式，需要爲每個不同的場景準備一張背景圖，而且每個背景圖都不小，這樣會造成資源浪費。

瓦片地圖就是爲了解決這問題而產生的。一張大的世界地圖或者背景圖可以由幾種地形來表示，每種地形對應一張小的的圖片，我們稱這些小的地形圖片爲瓦片。把這些瓦片拼接在一起，一個完整的地圖就組合出來了，這就是瓦片地圖的原理。

TileMap方案

在Cocos2d-x中，瓦片地圖實現的是TileMap方案，TileMap要求每個瓦片佔據地圖上一個四邊形或六邊形的區域。把不同的瓦片拼接在一起，就可以組成完整的地圖了。我們需要很多較小的紋理來創建瓦片。通常我們會將這些較小的紋理放在一張圖片中，這樣做會提高繪圖性能。

瓦片地圖編輯器

Cocos2d-x支持由瓦片地圖編輯器Tiled Map Editor製作並保存爲TMX格式的地圖。Tiled Map Editor是一個開源項目，支持Windows、Linux及Mac OS X多個操作系統，我們可以從官網下載到編輯器的Java和QT版本。

如何使用Tiled工具建立地圖可以參考以下文章：

如何使用Cocos2dx3.0製作基於tilemap的遊戲

地圖方向

Tiled地圖支持直角鳥瞰地圖(90°地圖)、等距斜視地圖（斜45°地圖）和六邊形地圖，不支持左右或上下邊界的六邊形地圖。

地圖資源

• 建議瓦片地圖素材大小爲32*32的倍數
• 瓦片素材組與其他圖片不能混合使用
• 只有瓦片素材圖能被導入TMX文件
• 每個Layer最多支持1套瓦片素材組。

瓦片層

• TMX文件中瓦片層的數量沒有上限
• 每一個瓦片層只能由一種瓦片素材組成
• 每一個瓦片層可以被TMXLayer類表示-爲SpriteSheet的子類
• 每一個單一的瓦片被Sprite表示-父節點爲TMXLayer

對象層

• 瓦片地圖支持對象組
• 用來添加除背景以外的遊戲元素-道具、障礙物等
• 對象組中的對象在TMX文件中以鍵值對形式存在，因此可以直接在TMX文件中對他進行修改

瓦片地圖座標系

對於一個16*16的瓦片地圖文件的座標系統爲

• (0, 0): 左上角
• (15, 15): 右下角

在Cocos2d-x中使用TMX

創建TMX節點

    TMXTiledMap *map = TMXTiledMap::create("bg.tmx");
    addChild(map, 0);

遍歷子節點

    Vector<Node*> pChildrenArray = map->getChildren();

    SpriteBatchNode* child = NULL;

    Ref* pObject = NULL;

    for (Vector<Node*>::iterator it = pChildrenArray.begin(); it != pChildrenArray.end(); it++) {
        pObject = *it;
        child = (SpriteBatchNode*)pObject;

    }

獲取/刪除一個瓦片

    TMXLayer* layer = map->getLayer("layer0");
    Sprite* tile0 = layer->getTileAt(Point(1, 15));
    layer->removeTileAt(Point(1, 15));

遍歷對象層中對象

    TMXObjectGroup* objectGroup = map->getObjectGroup("center");
    ValueVector object = objectGroup->getObjects();

    for (ValueVector::iterator it = object.begin(); it != object.end(); it++) {
        Value obj = *it;
        ValueMap map = obj.asValueMap();
        log("x = %d y = %d", map.at("x").asInt(), map.at("y").asInt());
    }