【cocos2d-x官方文档】瓦片地图 Tiled Map

转载 2014年02月09日 23:18:29

【cocos2d-x官方文档】瓦片地图 Tiled Map

瓦片地图(Tiled Map)

瓦片地图(Tile Map) 不但生成简单,并且可以灵活的用于Cocos2d-x引擎。不论你的游戏是角色扮演游戏, 平台动作游戏或仿打砖块游戏,这些游戏地图可以使用开源的瓦片地图编辑器Tiled Map Editor生成并保存为TMX文件格式,被Cocos2d-x支持。

 

TMX 瓦片地图格式

Cocos2d 支持被Tiled创建的地图文件(TMX)。

 

Tiled 的2个版本:

 

  • Java版较为稳定,可以在Mac OS X, Windows 以及Linux运行。

 

  • QT(native)版本支持绝大多数Java版本的功能。在此帮助文档建立时,最新的QT版本为0.4.0并支持除六边形地图(hexagonal maps)以外的所有功能。

 

开发者可以自由的选择使用Tiled的两种不同版本,我们建议你使用Tiled团队主要开发的QT版本以保证你获得最好的支持及更新。但因为目前Java版一些特性还未完全移植到QT版本中,一些开发者仍然喜欢使用Java版本的Tiled。

【Ray教程】 如何使用Tiled工具建立地图:

How To Make a Tile-Based Game with Cocos2D

Cocos2d supports the following TMX maps:(Cocos2d 支持如下TMX地图形式)

地图定向( Orientation):

  • Orthogonal maps 直角鸟瞰地图(90°地图)
  • Isometric maps  等距斜视地图(斜45°地图)
  • Hexagonal maps  六边形地图 ( 左右或上下边界的六边形地图不被Tiled支持)(edges on left-right. edges at top-bottom are not supported… it seems that Tiled doesn’t support them either)

 

地图形式(Tiles):

  • 被嵌套的瓦片地图不被支持(如 使用瓦片素材组与其他图片)
  • 仅支持封装瓦片地图组(仅有瓦片素材组被导入地图文件)
  • 每个Layer最多支持1套瓦片素材组。

 

地图层(Layers):

  • Tiles中Layer的数量没有上限。
  • 每一个Layer可以被CCTMXLayer类表示( 为CCSpriteSheet的子类)
  • 每一个单一的瓦片被CCSprite表示(父节点为CCTMXLayer)

 

对象组 (Object Groups):

  • 瓦片地图支持对象组

 

 

坐标(Coordinates) 和 全局标识(GIDS)

坐标

64*32的Tiled瓦片地图文件的坐标系统为:

  • (0,0): 左上角
  • (63,31): 右下角

 

全局标识(GIDS)

 

瓦片的GID是一个全局标识量,他的范围从正整数1开始,到瓦片地图中tile的总量。

 

如果你的地图中有5个不同的瓦片,那么:

  • 瓦片0的GID为1
  • 瓦片1的GID为2
  • 瓦片3 的GID为3
  • 以此类推

 

瓦片的GID 为 0 被用来表示此瓦片为空。

 

如何建立一个TMX节点

  1. // create a TMX map
  2. CCTMXTiledMap *map = CCTMXTiledMap::create("TileMaps/iso-test-vertexz.tmx");
  3.  
  4. addChild(map, 0, kTagTileMap);
  5.  
  6. // All the tiles by default will be aliased. If you want to create anti-alias tiles, you should do:
  7.  
  8. // iterate over all the "layers" (atlas sprite managers)
  9.  
  10. // and set them as 'antialias'
  11.  
  12. CCArray * pChildrenArray = map->getChildren();
  13.  
  14. CCSpriteBatchNode* child = NULL;
  15.  
  16. CCObject* pObject = NULL;
  17.  
  18. CCARRAY_FOREACH(pChildrenArray, pObject)
  19. {
  20. child = (CCSpriteBatchNode*)pObject;
  21.  
  22. if(!child)
  23. break;
  24.  
  25. child->getTexture()->setAntiAliasTexParameters();
  26. }

如何获取/添加/删除/修改一个瓦片

指定坐标获取Tile:

  1. CCTMXLayer* layer = map->layerNamed("Layer 0");
  2.  
  3. CCSprite *tile0 = layer->tileAt(ccp(1,63));

指定坐标获取GID

  1. unsigned int m_gid = layer->tileGIDAt(ccp(0,63));

指定坐标设置一个新的GID

  1. layer->setTileGID(m_gid, ccp((float)3, (float)3));
  2. // To remove a tile at a certain coordinate
  3. layer->removeTileAt( ccp(5.0, 5.0) );

遍历Layer中的瓦片

  1. CGSize s = layer->getLayerSize();
  2.  
  3. for( int x=0; xtileGIDAt(ccp(x,y));
  4.  
  5. layer->setTileGID(tmpgid+1,ccp(x,y));
  6.  
  7. }
  8.  
  9. }

Z序列和深度缓冲

 

以下信息仅针对俯视地图( Orthogonal)和斜视地图(Isometric)。对六边形地图(Hexagonal)无效。

 

如果你的游戏需要根据精灵的Y坐标把精灵放置到一些特定瓦片的前面或后面(在斜视地图中常见,同时出现在一些俯视地图中),那么你有2个选择:

  • 使用OpenGL ES 深度缓冲
  • 使用多Layer的TMX设置Z序列

 

深度缓冲(Depth Buffer)

 

建立一个含有至少2个TMX Layer层的瓦片地图很重要:

  • 一个背景层,例如草地
  • 一个前景层,例如树木

草地层会显示在精灵之后,所以他的z序列应该为最小的值,例如-1000. 树木层中的每一个单一瓦片应该有不同的Z序列值,在底部的瓦片的Z序列应该大于顶部的瓦片序列。

 

因此,为了实现分层显示,你只需要做如下步骤:

  • 打开Tiled编辑器
  • 选择背景层(如草地)
  • 选择 Tiled → Layer → Layer Properties  设置Layer的属性
  • 添加: cc_vertexz = -1000
  • 选择前景层(如草地)
  • 选择 Tiled → Layer → Layer Properties
  • 添加 cc_vertexz = automatic 让其根据坐标自动排Z序列。

 

 

范例:

 

斜视地图Z顶点范例。 地图有2个层,”树木“层和”草地“层。 对“树木”设置属性 cc_vertex=automatic。然后对“草地”层添加 cc_vertexz=-1000。

 

俯视地图Z顶点范例。 地图同样有2个层,”树木“层和”草地“层。对“树木”设置属性 cc_vertexz=automatic 并且cc_alpha_func=0.5。 然后对“草地”层添加属性cc_vertexz=-1000。

使用多层TMX地图和Z序列

 

在TXM地图中,每一个层(Layer)都被自动赋值了一个Z序列(zOrder),因此不需要添加任何层的z序列属性在TMX编辑器中。将你的精灵添加为TXMMap的子节点可以让你自动的替换当前Layer上的对象。

  1. CCSprite m_tamara = CCSprite::create(tamara.png);
  2.  
  3. CCPoint p = m_tamara->getPosition();
  4.  
  5. p = CC_POINT_POINTS_TO_PIXELS;
  6.  
  7. float newZ = -(p.y+32) /16;
  8.  
  9. m_tamara->setVertexZ( newZ );

屏幕截图

俯视地图用了3D的投影和抗锯齿瓦片,瓦片被spritesheet-fixer工具处理过,使用3D投影和抗锯齿也不会有人为变化的痕迹。

俯视地图,地图上瓦片尺寸小于实际瓦片大小。

斜视地图 2D投影与抗锯齿瓦片

六边形地图,2D投影和抗锯齿瓦片。边界界定为瓦片的左右边界。以上下为边界的界定暂不支持。

 

参考

cocos2d-iphone tiled_maps

Creating a simple map with Tiled

how to make a tile based game with cocos2d

 

更多内容请见:

- See more at: http://www.cocos2d-x.org/projects/cocos2d-x/wiki/TileMap#TileMap

Xcode8.*的NX特性-调试UI、查看状态机、GPU性能分析

Xcode8.*的3个调试功能

Cocos2d-x Sprite 执行 CCFade~ 这类透明度变化动作的一些有关问题

Cocos2d-x Sprite 执行 CCFade~ 这类透明度变化动作的一些问题 在引擎中提供了几个有关透明度变化的动作:CCFadeIn,CCFadeOut,CCFadeTo ...
  • ctbinzi
  • ctbinzi
  • 2014年03月05日 14:58
  • 7119

【cocos2d-x官方文档】瓦片地图 Tiled Map

【cocos2d-x官方文档】瓦片地图 Tiled Map  分享3 瓦片地图(Tiled Map) 瓦片地图(Tile Map) 不但生成简单,并且可以灵活...
  • zwcwu31
  • zwcwu31
  • 2014年02月20日 12:01
  • 1223

cocos2d-x 基本概念 瓦片地图(Tiled Map)

瓦片地图(Tile Map) 不但生成简单,并且可以灵活的用于Cocos2d-x引擎。不论你的游戏是角色扮演游戏, 平台动作游戏或仿打砖块游戏,这些游戏地图可以使用开源的瓦片地图编辑器Tiled Ma...

【amazing cocos2d-x 3.0之九】Tiled Map(瓦片地图)

Tiled Map(瓦片地图)编辑器的使用,详见:http://blog.csdn.net/legendof1991/article/details/22289857 1. TMX瓦片地图格式 ...

【爱上cocos2d-x之十八】Tiled瓦片地图编辑器的基本使用

Tield瓦片地图编辑器不但生成地图简单,还能灵活运用于cocos2d-x游戏引擎。编辑生成之后保存的TMX文件格式,被cocos2d-x支持。 Tiled瓦片地图编辑器的下载地址:http://w...

cocos2d-x学习笔记3 Tiled Map Editor地图编辑器

源代码下载地址:http://download.csdn.net/detail/danming60520/5296224 本文是参考了无脑码农的视频以及其中(临江仙)的一篇博客http://blog...

Cocos2d-x初入学堂(13)-->Tiled Map Editor地图编辑器

欢迎转载!转载时请注明出处:http://blog.csdn.net/aa4790139/article/details/8135831 我开发的游戏只有第一款游戏,没有用到地图编辑器,那是我刚进公...

cocos2d-x 学习笔记之Tiled Map地图使用时的一些问题

关于TiledMap地图相关的知识这里就不再具体展开说了, 这里主要写一些我在cocos2dx 3.x中使用该地图时遇到的一些问题,这些问题也是cocos2dx 3.x 与2.x中更新所带来的。 ...
  • it_wjw
  • it_wjw
  • 2015年07月24日 16:23
  • 1015
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【cocos2d-x官方文档】瓦片地图 Tiled Map
举报原因:
原因补充:

(最多只允许输入30个字)