【木头Cocos2d-x 009】游戏实例-《跑跑跑》制作教程(第一篇)——加载地图

笨木头  2012-11-15 12:50   2.0游戏实例《跑跑跑》,Cocos2d-x2.0   阅读(11,781)   26条评论

Cocos2d-x游戏实例《跑跑跑》制作教程

 

笨木头花心贡献,啥?花心?不呢,是用心~

转载请注明,原文地址
http://www.benmutou.com/archives/27

正文:

首先,我是拜读了以下四篇文章之后,想练练手而萌发了要写这个系列的教程,大家如果不喜欢我的教程,可以看看以下四篇教程,同样会获益匪浅的:

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里的,然后找到下面两句:

1
2
3
CCEGLView* eglView = CCEGLView::sharedOpenGLView();
eglView->setFrameSize(800, 500);</pre>
<span style="font-family: Calibri; font-size: 14px;">setFrameSize(800, 500);
OK~
 3. 我们来创建几个文件夹,以便为我们的代码分类: 
《跑跑跑》制作教程(第一篇)截图 

哈哈,是的,接下来我要逐渐建立3块很重要的的模块:场景、实体、控制器。  
 4. 先不管其他,我们先来创建场景——跑步的场景。 
《跑跑跑》制作教程(第一篇)截图
 如上图,大家新建一个TollgateScene.cpp以及头文件TollgateScene.h

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 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函数。 CCTMXTiledMapcocos2d-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目录:Resourcesmap,地图的资源都放这了。 然后,还记得我们要怎么加载地图吗?

1
2
3
4
5
6
bool TollgateScene::init()
{
    CCTMXTiledMap* map = CCTMXTiledMap::create("map/level01.tmx");
    this->addChild(map);
    return true;
}
  然后把我们默认启动场景设置为TollgateScene  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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是不是绝对路径,是的话,改成相对路径。

 

 

下一篇我们将加入我们的主角,这可不会太简单呢,因为我们要设计地更好维护一些。

 (发布时间:也许是今天晚上,不,一定是今天晚上~)

 

26 评论

  1. 你好,教主。我按照你的步骤做了一下,我想问一下,最后那个“把我们默认启动场景设置为TollgateScene:”这是在AppDelegate.cpp里改吧?把这句: CCScene *pScene = HelloWorld::scene();改为:CCScene *pScene = TollgateScene::scene();。。我是这么改的,但是编译的时候提示出错:error C2653: “TollgateScene”: 不是类或命名空间名称。这是什么原因呢???恳请解释一下啊。本人新手,某有经验

  2. 我是新手,按照教程操作遇到点问题:修改默认启动场景设置为TollgateScene,引用的头文件#include “TollgateScene.h”提示无法打开源文件,不知道是怎么回事?

  3. [reply]ggjj741[/reply]
    好吧,我错了,我是想代码尽量简洁,所以就这么写了。。。以后还是补上吧,避免教坏人,谢谢提醒哈~

  4. 看了下代码,发现你放弃很多cocos2d编程的良好习惯。例如do-while(0)和CC_BREAK_IF()的组合使用。这样你会教坏鸟蛋的……

  5. [reply]lovehzh[/reply]
    这么配置就可以了(我的是2.0.4版本):
    CCEGLView::sharedOpenGLView()->setDesignResolutionSize(800,500, kResolutionExactFit);

    具体的使用可以查看官方文档,或者百度一下,很多资料的,嘿嘿~

  6. 我很是奇怪,你的高度是20个块,每个像素是32,那么20×32=640,为什么你500的高度可以显示出完整的图片呢?

发表评论

电子邮件地址不会被公开。 必填项已用*标注