【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

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

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

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

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

Unity TiledMap 游戏开发日记 1

之前列举的内容最近在一一执行,因为近期要找房子租住,所以忙得有些手忙脚乱。毕业的分分合合,还是安心做游戏。 原作杀人速写移植于之前使用RPGMakerXP引擎制作的解密类游戏,是老王像大连十五中致敬的...
  • zhe13
  • zhe13
  • 2016年06月30日 18:22
  • 6452

Tiled结合Unity实现瓦片地图——Tiled2Unity篇

前段时间应公司需求做瓦片地图,cocos与瓦片地图的结合案例很多,但unity的却少之又少,做瓦片地图少不了Tiled Map Editor(下载地址),这个教程很多,也自带例子,关于怎么拼地图,这里...
  • lzhq1982
  • lzhq1982
  • 2017年07月19日 17:45
  • 3447

Tiled Map 地图素材大全下载

这都是我以前收集的哈。 全部都是提供打包下载的哈~ 大家喜欢请留言支持~ 谢谢大家的支持~ Tiled Map 地图素材大全的下载地址是:www.2...
  • luju5
  • luju5
  • 2013年12月26日 10:48
  • 4384

cocos2d-x + TiledMap 详解

瓦片地图类之CCTMXTiledMap 瓦片地图就是游戏的背景。 这篇文章为大家介绍,瓦片地图类CCTMXTiledMap,我们先来学习它的初始化方法,代码如下: 根据一个TMX...
  • hitwhylz
  • hitwhylz
  • 2014年01月18日 23:33
  • 4036

Tiled Map(瓦片地图)

Tiled Map(瓦片地图) Legendof19912014-06-12 14:57:28383 次阅读 Tiled Map(瓦片地图)编辑器的使用,详见:http://b...
  • w18767104183
  • w18767104183
  • 2014年09月28日 02:27
  • 859

Cocos2dx——瓦片地图(Tiled Map)

瓦片地图(Tiled Map) 瓦片地图(Tile Map) 不但生成简单,并且可以灵活的用于Cocos2d-x引擎。不论你的游戏是角色扮演游戏, 平台动作游戏或仿打砖块游戏,这些游戏地图可以使...
  • u014696234
  • u014696234
  • 2015年08月15日 21:05
  • 381

Tiled结合Unity实现瓦片地图——Unity实战篇

上文说道,Tiled2Unity可以方便的把Tiled编辑器做的地图文件导出到Unity中,这方面文章不少,可是这个地图文件我们在Unity中怎么用,这方面的介绍太少了,这篇是Unity实战篇,如果觉...
  • lzhq1982
  • lzhq1982
  • 2017年07月20日 15:11
  • 4981

《Cocos2d学习之路》八、瓦片地图TiledMap的基本使用

github地址:https://github.com/teffy/cocos2dx TiledMap的基本使用
  • lsmfeixiang
  • lsmfeixiang
  • 2015年02月09日 18:23
  • 2253
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【cocos2d-x官方文档】瓦片地图 Tiled Map
举报原因:
原因补充:

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