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,如图所示

Cocos2d-x学习笔记 —— “魔塔”案例之基础篇(一)_第1张图片

 

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

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

Cocos2d-x学习笔记 —— “魔塔”案例之基础篇(一)_第2张图片

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

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

Cocos2d-x学习笔记 —— “魔塔”案例之基础篇(一)_第3张图片

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

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

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

 

Cocos2d-x学习笔记 —— “魔塔”案例之基础篇(一)_第4张图片

 

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

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

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

Cocos2d-x学习笔记 —— “魔塔”案例之基础篇(一)_第5张图片

 

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

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

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

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

 

 

转载于:https://www.cnblogs.com/yangyu20121220/archive/2012/07/23/2605019.html

你可能感兴趣的:(Cocos2d-x学习笔记 —— “魔塔”案例之基础篇(一))