錯過了前面章節？

沒關係，傳送門在這：

正文：

現在我們要載入一張TMX地圖，這張地圖有點複雜，大家打起精神。

（小若：吼！）

1. 建立TMX地圖

現在，開啟我們的Tiled地圖編輯器，新建一個地圖：【新建】->【新建檔案】，地圖寬為10，地圖高為10。

然後將瓦片圖素拖動到圖塊區域，新增圖塊，寬高分別為128畫素，邊距和間距都為0：

然後，最重要的一步來了！選中第一個圖素，塗滿地圖，效果如下：

（小若：喂，什麼意思？塗滿地圖了？為什麼還是空白的！）

於是，我們完成了這張複雜的TMX地圖了，好好儲存起來吧！【檔案】-【儲存】。

（小若：你是不是故意忽略我的啊！）

啊，對了，圖素圖片如下：

圖素在TMX格式地圖中按從左到右，從上到下，從1開始編號，如下圖所示：

由於圖素1是全透明的，所以我們畫出來的地圖看起來是空白的，實際上全都填充了圖素1的瓦片。

（小若：我就知道有問題！）

OK，我把地圖檔案儲存為“cloudMap.tmx”

2. 在Cocos2d-x載入地圖

好，進入正題，先新建一個Cocos2d-x專案（我就不列出詳細步驟了，預設大家都有基礎）。然後，直接開啟HelloWorldScene.cpp的init函式，把預設的程式碼刪除，新增如下程式碼：

bool HelloWorld::init()
 
{
 
    bool bRet = false;
 
    do 
 
    {
 
        CCLayerColor::initWithColor(ccc4(255, 255, 255, 255));
 
  
 
cloudMap = CCTMXTiledMap::create("cloudMap.tmx");
 
  
 
this->addChild(cloudMap);
 
  
 
this->setTouchEnabled(true);
 
        bRet = true;
 
    } while (0);
 
  
 
    return bRet;
 
}
 

cloudMap是成員變數，我們來看看標頭檔案：

class HelloWorld : public cocos2d::CCLayerColor
 
{
 
public:
 
    virtual bool init();  
 
    static cocos2d::CCScene* scene();
 
    CREATE_FUNC(HelloWorld);
 
  
 
virtual bool ccTouchBegan( CCTouch *pTouch, CCEvent *pEvent );
 
  
 
virtual void registerWithTouchDispatcher( void );
 
  
 
private:
 
CCTMXTiledMap* cloudMap;
 
};
 

（小若：不對！有問題！你是不是寫多了很多東西啊！）

被發現了，是的，因為我們將要用的螢幕觸控事件，所以我在init函式裡添加了一句程式碼：

this->setTouchEnabled(true);

然後重寫了ccTouchBegan和registerWithTouchDispatch函式，在registerWithTouchDispatch函式執行以下程式碼，這樣才能獲取螢幕觸控事件：

void HelloWorld::registerWithTouchDispatcher( void )
 
{
 
CCDirector::sharedDirector()->getTouchDispatcher()->addTargetedDelegate(this, 0, true);
 
}

已經懂的朋友請耐心等待，我得照顧不太熟悉Cocos2d-x的朋友們。

（小若：我知道你在說我，你就直接說吧！）

那麼，編譯執行專案，我們將看到以下效果：

（小若：不對！我發現你剛剛的程式碼是CCLayerColor，而不是CCLayer，這是為什麼？）

是的，在這裡要解釋一下，因為我們的迷霧是黑色，而CCLayer預設的螢幕背景也是黑色的，這樣即使我們的迷霧消失了，那背景還是黑色的，根本看不出效果。

（小若：我明白了！黑布上面蓋一層黑霧，即使黑霧消失了，那看到的還是黑色的！）

好了，這一節基本上是鋪墊，下一節還要繼續鋪墊。

（小若：喂！）