【木頭Cocos2d-x 009】遊戲執行個體-《跑跑跑》製作教程(第一篇)——載入地圖

Cocos2d-x遊戲執行個體-《跑跑跑》製作教程

 

笨木頭花心貢獻，啥？花心？不呢，是用心~

轉載請註明，原文地址：http://blog.csdn.net/musicvs/article/details/8186323

 

本文：

 

 

首先，我是拜讀了以下四篇文章之後，想練練手而萌發了要寫這個系列的教程，大家如果不喜歡我的教程，可以看看以下四篇教程，同樣會獲益匪淺的：

http://blog.csdn.net/fengyun1989/article/details/7526333

http://blog.csdn.net/fengyun1989/article/details/7529606

http://blog.csdn.net/fengyun1989/article/details/7534784

http://blog.csdn.net/fengyun1989/article/details/7537602

 

 

以上四篇是很好的一份教程，強烈推薦大家去看看。

我這系列的教程會稍微寫得繁瑣一些，因為我想寫得維護性好一些。

來吧，開始~！

 

本教程使用Cocos2d-x 2.0.4版本。

 

第一個版本的《跑跑跑》源碼+資源：

雲端硬碟下載： http://yunpan.cn/lk/sV2K9ZKSnIVMC?sid=301

CSDN下載（稍後補上）：http://download.csdn.net/detail/musicvs/4769412

 

Cocos2d-x遊戲執行個體-《跑跑跑》製作教程（第一篇）——載入地圖

 

本篇要做的事情很簡單，就是利用TiledMap建立一張很長的地圖，噗，我就不考慮占記憶體的因素哈，我還不太懂怎麼最佳化一張大地圖的載入。

1.      建立我們的項目

我想把它命名為RunRunRun，是的，我們這是要做一個奔跑遊戲，最近有些累，盡情跑一回吧~

2.      稍微調整一些參數，我把螢幕定為800 * 500的大小：

不準問我在哪改啊，我才不會告訴你是在main.cpp裡的，然後找到下面兩句：

CCEGLView* eglView = CCEGLView::sharedOpenGLView();eglView->setFrameSize(800, 500);

 

setFrameSize(800, 500); OK~

3.      我們來建立幾個檔案夾，以便為我們的代碼分類：

哈哈，是的，接下來我要逐漸建立3塊很重要的的模組：情境、實體、控制器。

 

4.      先不管其他，我們先來建立情境——跑步的情境。

如，大家建立一個TollgateScene.cpp以及標頭檔TollgateScene.h。

// TollgateScene.h#ifndef __TOLLGATE_SCENE_H__#define __TOLLGATE_SCENE_H__#include "cocos2d.h"using namespace cocos2d;class TollgateScene : public CCLayer {public:    CREATE_FUNC(TollgateScene);    virtual bool init();    static CCScene* scene();};#endif

 

// TollgateScene.cpp#include "TollgateScene.h"CCScene* TollgateScene::scene(){    CCScene* mScene = CCScene::create();    TollgateScene* mLayer = TollgateScene::create();    mScene->addChild(mLayer);    return mScene;}bool TollgateScene::init(){    CCTMXTiledMap* map = CCTMXTiledMap::create("map/level01.tmx");    this->addChild(map);    return true;}

 

 

代碼很簡單，我不做過分的解釋，主要看看init函數。

CCTMXTiledMap是cocos2d-x提供給我們用來載入tmx地圖檔案的，tmx地圖檔案從哪裡來呢？我要介紹一個很厲害的軟體了:
Tiled Map Editor。很厲害的，官網是：

http://www.mapeditor.org/

大家下載一下，我們要利用它來建立我們的地圖，也就是上面代碼裡的level01.tmx檔案。

 

5.      用Tiled Map Editor建立地圖檔案

開啟這個軟體，建立一個檔案，我們的把地圖設長一點，寬120塊，高20塊，寬高像素都是32。

 

我們需要一些素材（請下載遊戲demo源碼，裡面的resource檔案夾有素材）：

 

 

把ground.png圖片拖入軟體的圖塊地區：

 

塊的寬高都是32像素，點確定，ok~

 

現在我們可以開始建立我們的地圖了，在圖塊裡選擇一個元素，然後就可以在地圖地區繪製地圖：

 

下面是我畫的（很醜，不要介意~噗）：

 

6.      準備運行項目

現在，把我們的level01.tmx以及ground.png檔案放到項目資來源目錄下，我建了一個map目錄：Resources\map，地圖的資源都放這了。

然後，還記得我們要怎麼載入地圖嗎？

bool TollgateScene::init(){    CCTMXTiledMap* map = CCTMXTiledMap::create("map/level01.tmx");    this->addChild(map);    return true;}

 

 

然後把我們預設啟動情境設定為TollgateScene：

 

bool AppDelegate::applicationDidFinishLaunching(){    // initialize director    CCDirector *pDirector = CCDirector::sharedDirector();    pDirector->setOpenGLView(CCEGLView::sharedOpenGLView());    CCEGLView::sharedOpenGLView()->setDesignResolutionSize(1024, 640, kResolutionExactFit);    // turn on display FPS    pDirector->setDisplayStats(true);    // set FPS. the default value is 1.0/60 if you don't call this    pDirector->setAnimationInterval(1.0 / 60);    // create a scene. it's an autorelease object    CCScene *pScene = TollgateScene::scene();    // run    pDirector->runWithScene(pScene);    return true;}

 

 

OK，編譯運行，我們會看到我們的地圖，帥呆了，噗…才怪啊~！醜死了~

 

7.      部分朋友可能會報錯

也許有人運行項目時會報錯，說找不到png圖片，沒關係，用文字編輯器開啟我們level01.tmx檔案，找到下面這段資料：

<tileset firstgid="1" name="ground" tilewidth="32" tileheight="32">  <image source="ground.png" width="420" height="316"/> </tileset>

 

看看我們的image source裡的ground.png是不是絕對路徑，是的話，改成相對路徑。

 

 

下一篇我們將加入我們的主角，這可不會太簡單呢，因為我們要設計地更好維護一些。

 （發布時間：也許是今天晚上，不，一定是今天晚上~）