cocos2d x公开课第六章

无脑码农（讲解）龙灵修Cocos2d-x公开课2013-05-26《瓦砖地图》声明《cocos2d-x公开课》系列视频为无脑码农和龙灵修合作录制，二人共同享有此视的版权，此系列视频可自由转载和发布，但任何机构和个人未经许可不得用于盈利和商用。视频地址：优酷：（无脑码农）（龙灵修）百度网盘：教程使用开发环境Cocos2d-x

2.0.4苹果系统xcode*本章目录CONTENTS第6章在Cocos2D-x中使用瓷砖地图瓷砖地图瓷砖地图的用途Tiled地图编辑器用Tiled绘制俯视角度地图在地图中添加对象在项目中使用瓷砖地图TMX文件解析Cocos2D-x中的瓷砖地图类在项目中载入TMX地图使用TMX地图中的对象45°斜角瓷砖地图

*****（下）斜角瓦砖地图Tiled绘制斜角瓦砖地图加载斜角瓦砖地图定位斜角瓦砖地图*6.1.1瓷砖地图的用途什么是瓦砖地图？瓦砖地图也被称为“瓦片地图”。其原理是用小的瓷砖（tile）拼接出一张大的地图。这样做会大大节约内存，大大提高OpenGL

ES的绘制渲染绘图性能。很多游戏开发引擎都内置了对瓦砖地图的支持。瓦砖地图的实现原理是什么？瓦砖地图其实是二维数组，数组中的每一个元素都包含地图中的特点区域的信息。此类信息包括该区域中所显示的图像、瓷砖的碰撞属性等。瓦砖地图能解决的实际问题？假如我们要设计一个大型的RPG地图，瓷砖地图就非常的有用。及时游戏不是很大，如果为了每个关卡创建不同的滚动背景，也需要用到瓷砖地图。举例来说，在游戏中创建一个宽3200px、高3200px的背景，会遇到以下问题：1，OpenGL

ES对于纹理有限制，最大支持2048*2048像素2，需要从零开始创建每一个背景图3，无法分别管理地图中的不同部分4，如果地图中有需要设定特定区域，必须手动调整简而言之，使用瓦砖地图可以将大的地图分成小的碎片，使用这些地图碎片创建地图可以节省大量内存。使用瓦砖地图，无须在程序中直接使用一个无比巨大的图像，而是用很多小图代替，就想铺设地瓷砖一样。*6.1.2

Tiled地图编辑器TiledMapEditor地图编辑器（以下简称Tiled）是一款免费的通用瓷砖地图编辑器，可以帮助创建各种基于瓦砖的游戏地图。使用Tilde可以创建任意数量的层和瓷砖，并为这些层、瓷砖和其他对象设置特殊属性。安装Tiled官网地址：官网上提供了基于C++的Qt应用框架开发的Tiled

Qt版本，以及Java版本的

Tiled。目前Java版本的Tiled没有人专门更新和维护，所以建议直接下载TiledQt版本。Tiled特性1，支持正交地图（俯视图）2，支持等距地图（45°斜视图）3，支持精确放置的定制对象4，支持撤销、重做、复制、粘贴命令5，可以为瓷砖、层、对象或地图添加定制属性6、可以缩放或移动瓷砖地图7、支持输入\输出插件*6.1.3用Tiled绘制俯视角度地图1新建地图文件新建2创建图块需要美工提供，Photoshop绘制或拼图工具拼接小图本讲解图片在百度网盘下载3添加图块地图新图块 弹窗口中浏览边距：Tiled在查找当前瓦砖的真实像素值前，应该忽略的像素值间距：Tiled中，从当前瓦砖的真实像素到相邻的瓦砖所需要间隔的像素4用瓦砖绘制地图视图显示网格（绘制更准确）5保持地图*6.1.4在地图中添加对象Tiled支持两种层：瓦砖图层和对象层

1，瓦砖图层瓦砖图层是充当游戏背景的地图。每个瓦砖图层都会带来额外的系统开销，因此在游戏中使用的瓦砖图层越少越好，一般不超过3个。在添加瓦砖层及地图后，还需要在设备上进行测试，以确保游戏的帧速保持正常。2，对象层对象层用来放置游戏中用到的各种对象。比如，使用对象层触发某些事件，当玩家角色进入某个区域时，系统会自动生成一些怪物；或者当玩家角色进入这些对象所在的区域时，会触发一些特定的事件。*6.2.1

TMX文件解析使用Tiled生成的TMX文件其实是XML文件，这个XML文件包含一下信息：1，指定地图的类型、宽度和高度以及瓷砖的宽度和高度2，设置图块的信息，包括图块名称、瓷砖的宽度和高度、边距和间距等。3，指定图块使用的图片的路径4，所建“普通层”的信息，如层的名字、宽度、高度<data></data>中间的长串字符代表着刚刚创建的瓦砖图详细信息。5，所建“对象层”的相关信息，如层的名字、宽度、高度、对象的名字，和对象所在的坐标x、y*6.2.2

Cocos2D-x的瓷砖地图类Cocos2d-x提供了5个类，分别是CCTileMapAtlas、CCTMXLayer、CCTMXObjectGroup、CCTMXTiledMap和CCTMXXMLParser。最常用的到的是CCTMXTiledMap、CCTMXLayer和CCTMXObjectGroup*CCTMXTiledMapCCTMXTiledMap主要的作用是解析和渲染TMX地图，它是CCNode的子类。特性：每个瓦砖块都可以当做一个CCSprite来处理每个瓦砖的精灵，仅当调用tileAt函数才会被创建每个瓦砖都可以旋转、缩放、着色和调整透明度可以实时修改Z轴顺序来改变遮挡关系。每个瓦砖的默认锚点都是（0，0）瓦砖地图的默认锚点是（0，0）瓦砖可以拥有自己的属性每个瓦砖都有单独的z值，其中左上角的瓦砖为1，右下角的瓦砖z值最大每个图素都可以有唯一的tag使用CCTextureCaChe来加载瓦砖图片6.2.2

CCTMXTiledMapCCTMXTiledMap常用函数getMapSizesetMapSizegetTileSizesetTileSizegetObjectGroupsetObjectGroupgetPropertiessetPropertieslayerNamedobjectGroupNamedpropertyNamedpropertyForGID*获得地图的尺寸设置地图的尺寸获得瓷砖的尺寸设置瓷砖的尺寸获得对象数组

设置对象数组

获得对象属性

设置对象属性根据层的名字获得地图层

根据对象组名字获得对象组根据属性名获得属性值根据GID（Global

ID）获得键值对集合*6.2.2

CCTMXLayerCCTMXLayerCCTMXLayer代表了TMX地图中的层，它是CCSpriteBatchNode的子类。默认情况下瓦砖会使用CCTextureAtlas进行渲染。常用函数：getLayerSizesetLayerSizegetMapTileSizesetMapTileSizegetTileSetsetTileSetgetPropertiessetPropertiesreleaseMaptileAttileGIDAtsetTileGIDremoveTileAtpositionAtsetupTilespropertyNamed获得地图层尺寸设置地图层尺寸获得瓷砖尺寸

设置瓷砖尺寸

获得瓦砖集合

设置瓦砖集合

获得地图属性

设置地图属性

删除地图根据瓷砖横纵坐标索引获得瓷砖精灵根据瓷砖横纵坐标索引获得瓷砖的GID值设置瓷砖横纵坐标索引的GID根据瓷砖横纵坐标索引删除瓷砖根据瓷砖横纵坐标索引获取瓷砖位置创建瓦砖根据属性名获得属性值6.2.2

CCTMXObjectGroupCCTMXObjectGroupCCTMXObjectGroup代表TMX地图中的对象组常用函数：*getPositionOffsetsetPositionOffsetgetObjectssetObjectsgetGroupNamesetGroupNamegetPropertiessetPropertiesobjectNamedpropertyNamed获得偏移位置设置偏移位置获得对象数组设置对象数组获取组名设置组名获得属性设置属性根据对象名获得键值对集合根据属性名获得属性值6.2.3在项目中载入TMX地图第一步：将.tmx文件和引用图块png导入项目中，并检查xml内路径是否正确第二步：使用CCTMXTileMap将瓦砖地图读取到项目中CCTMXTileMap*map= CCTMXTiledMap::create(const

char*tmxFile);第三步：根据地图层的名字获得层对象CCTMXLayer*

layer

=

map->layerNamed(const

char

*layerName);第四步：根据索引坐标获得某个瓷砖对象CCSprite*

sprite

=

layer->tileAt(const

cocos2d::CCPoint&tileCoordinate)；*6.2.4使用TMX地图中的对象第一步：将.tmx文件和引用图块png导入项目中，并检查xml内路径是否正确第二步：使用CCTMXTileMap将瓦砖地图读取到项目中CCTMXTileMap*map= CCTMXTiledMap::create(const

char*tmxFile);第三步：根据对象层的名字获得对象层CCTMXObjectGroup*

group

=

map->objectGroupNamed(const

char*layerName);第四步：获得对象层上所有的对象