Cocos2d-x学习笔记 —— “魔塔”案例之基础篇(一)

1.1 准备工作

我们用到的工具主要包括以下几种。

(1)一台安装了Windows系统的电脑，如果需要编译IOS的版本，那么还需要准备一台安装了Mac系统的电脑。

(2)cocos2d-x的开发环境，关于开发环境的安装请看之前的内容。

(3)TMX地图编辑器，我们使用的是Tiled的QT版本，软件的官方网站是http://www.mapeditor.org/。

(4)图片编辑工具PhotoShop。

 

1.2绘制最简单的游戏地图

首先，我们打开cocos2d-x工程，使用“Cocos2d-win32 Application”模板新建一个基于cocos2d-x引擎的win32项目，命名为MTGame，如图所示

 

　　这款游戏不需要物理引擎Box2D和Chipmunk得支持，可以在新建项目的向导中将它们取消。CocosDenshion声音模块需要选中。新建完工程，我们可以先运行一下，保证一切正常。顺利的话，编译后可以直接看到cocos2d-x的logo，以及一个用来关闭程序的“X”。现在我们把这个新建的工程放在一旁，开始绘制游戏地图。

　　首先打开Tiled编辑器。新建一张地图。地图方向选择“正常”，代表垂直90度视角。地图大小为13 * 13，表示地图的宽和高皆为13个图块。块大小为32 * 32代表每个图块的尺寸，单位是像素，如图所示：

新建完地图后，需要准备一张图片素材用来绘制地面和墙壁。假设我们已经准备好了，素材文件为terrain.png，其中包括了两个图块，第一个是地面（灰色岩石地面），第二个是墙壁（棕色墙壁），宽和高都是像素32像素，如图所示

将素材文件terrain.png复制到MTGame工程下面的Resources目录里，然后通过菜单栏的“地图-》新图块”添加图片素材，如图所示：

　　导入完成后，可以看到Tiled编辑器右侧下方的图块面板中出现了terrain标签。现在我们就可以使用导入的图块进行绘制了。选择工具栏中的填充工具，再选中terrain里的第一个图块，点击地图上任意位置，地面层就被我们填充成为灰色的岩石地面了。

　　接下来开始绘制墙壁。先在右侧图层面板的“块层1”上双击重命名为floor(注意，这个名字需要记住，并且取英文，再cocos2d-x引擎里解析时需要用到)。然后再新建一个块层，重命名为wall。wall层在floor层的上方，将来引擎绘制的时候，上方的层也会覆盖下面的图层。接着选择图章刷工具，选中棕色砖墙图块，开始绘制墙壁。

　　好了，现在是自由发挥时间。编辑完地图之后别忘了将地图保存到MTGame工程下面的Resources目录下面，先命名为0.tmx。我们完成的其中一个地图如图所示

　

 

　　现在，我们把编辑好的游戏地图添加到游戏中。打开MTGame中的HelloWorldScene.cpp，将方法init中多余的代码删除，仅保留“退出”按钮。然后使用cocos2d-x引擎的CCTMXTiledMap类解析地图。

//解析tmx地图
CCTMXTiledMap *map = CCTMXTiledMap::tiledMapWithTMXFile("0.tmx");
       addChild(map);

好了，仅仅需要上面两行代码，地图就可以显示在游戏中了，运行效果图如图所示：

 

　　 最后再提几个在绘制游戏地图时应该注意的问题。

　　（1）Tiled编辑器支持在同一个块层使用多个图块纹理，但cocos2d-x引擎的CCTMXTiledMap类仅支持一个块层对应一个纹理。所以我们需要尽量将图块纹理分类及合并，在每个块层上仅使用一个纹理图来绘制。

　　（2）CCTMXTiledMap类不允许任何一层(CCTMXLayer)中没有任何元素，否则解析TMX时会报错。解决的办法是：要么将空图层删掉，要么在空图层上放置一个透明的图块，让用户无法察觉。

　　（3）关于是否要将图块导出成外部图块(tileset)，这一点需要看游戏本身的需求。如果你在外部图块中给图块配置了大量信息，比如怪物的属性和物品的功能等，这些对每个地图都是通用的，这时导出成外部图块就省去了重复的复制工作。但由于Tiled编辑器不支持加密，外部图块的数据会被其他人看到。所以对于正式发布的游戏，不建议将影响游戏平衡性的数值配置在外部图块中。