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

第一个版本的《跑跑跑》源码+资源下载地址：

云盘下载： 

CSDN下载（稍后补上）：

 

Cocos2d-x游戏实例-《跑跑跑》制作教程（第一篇）——加载地图

 

本篇要做的事情很简单，就是利用TiledMap创建一张很长的地图，噗，我就不考虑占内存的因素哈，我还不太懂怎么优化一张大地图的加载。

1.      新建我们的项目

我想把它命名为RunRunRun，是的，我们这是要做一个奔跑游戏，最近有些累，尽情跑一回吧~

2.      稍微调整一些参数，我把屏幕定为800 * 500的大小：

不准问我在哪改啊，我才不会告诉你是在main.cpp里的，然后找到下面两句：

1 CCEGLView* eglView = CCEGLView::sharedOpenGLView();
2 eglView->setFrameSize(800, 500);</pre>
3 <span style="font-family: Calibri; font-size: 14px;">setFrameSize(800, 500); 
OK~  3. 我们来创建几个文件夹，以便为我们的代码分类：     哈哈，是的，接下来我要逐渐建立3块很重要的的模块：场景、实体、控制器。    4. 先不管其他，我们先来创建场景——跑步的场景。   如上图，大家新建一个TollgateScene.cpp以及头文件TollgateScene.h。
01 // TollgateScene.h
02  
03 #ifndef __TOLLGATE_SCENE_H__
04 #define __TOLLGATE_SCENE_H__
05  
06 #include "cocos2d.h"
07  
08 using namespace cocos2d;
09  
10 class TollgateScene : public CCLayer {
11 public:
12     CREATE_FUNC(TollgateScene);
13  
14     virtual bool init();
15     static CCScene* scene();
16  
17 };
18  
19 #endif
01 // TollgateScene.cpp
02  
03 #include "TollgateScene.h"
04  
05 CCScene* TollgateScene::scene()
06 {
07     CCScene* mScene = CCScene::create();
08  
09     TollgateScene* mLayer = TollgateScene::create();
10  
11     mScene->addChild(mLayer);
12  
13     return mScene;
14 }
15  
16 bool TollgateScene::init()
17 {
18     CCTMXTiledMap* map = CCTMXTiledMap::create("map/level01.tmx");
19     this->addChild(map);
20     return true;
21 } 
  代码很简单，我不做过分的解释，主要看看init函数。 CCTMXTiledMap是cocos2d-x提供给我们用来加载tmx地图文件的，tmx地图文件从哪里来呢？我要介绍一个很厉害的软件了: Tiled Map Editor。很厉害的，官网是：  大家下载一下，我们要利用它来创建我们的地图，也就是上面代码里的level01.tmx文件。     5.      用Tiled Map Editor创建地图文件   打开这个软件，新建一个文件，我们的把地图设长一点，宽120块，高20块，宽高像素都是32。     我们需要一些素材（请下载游戏demo源码，里面的resource文件夹有素材）：         把ground.png图片拖入软件的图块区域：       块的宽高都是32像素，点确定，ok~        现在我们可以开始创建我们的地图了，在图块里选择一个元素，然后就可以在地图区域绘制地图：      下面是我画的（很丑，不要介意~噗）：     6.      准备运行项目   现在，把我们的level01.tmx以及ground.png文件放到项目资源目录下，我建了一个map目录：Resourcesmap，地图的资源都放这了。 然后，还记得我们要怎么加载地图吗？
1 bool TollgateScene::init()
2 {
3     CCTMXTiledMap* map = CCTMXTiledMap::create("map/level01.tmx");
4     this->addChild(map);
5     return true;
6 } 
  然后把我们默认启动场景设置为TollgateScene：  
01 bool AppDelegate::applicationDidFinishLaunching()
02 {
03     // initialize director
04     CCDirector *pDirector = CCDirector::sharedDirector();
05     pDirector->setOpenGLView(CCEGLView::sharedOpenGLView());
06  
07     CCEGLView::sharedOpenGLView()->setDesignResolutionSize(1024, 640, kResolutionExactFit);
08  
09     // turn on display FPS
10     pDirector->setDisplayStats(true);
11  
12     // set FPS. the default value is 1.0/60 if you don't call this
13     pDirector->setAnimationInterval(1.0 / 60);
14  
15     // create a scene. it's an autorelease object
16     CCScene *pScene = TollgateScene::scene();
17  
18     // run
19     pDirector->runWithScene(pScene);
20     return true;
21 } 
  OK，编译运行，我们会看到我们的地图，帅呆了，噗…才怪啊~！丑死了~       7. 部分朋友可能会报错   也许有人运行项目时会报错，说找不到png图片，没关系，用文本编辑器打开我们level01.tmx文件，找到下面这段数据：

看看我们的image source里的ground.png是不是绝对路径，是的话，改成相对路径。