如果文章对您有用，麻烦顺手点一下文章的广告吧~

瓦片地图 TMX 使用详解（图文）

Author：东东
发布时间：May 7, 2015
13055 views
No comments
14849 字数
Categories： COCOS2D-X

cocos2d-x 3.0版本以上的请参考这两个文章

[1]瓦片地图官方文档：http://cn.cocos2d-x.org/article/index?type=cocos2d-x&url=/doc/cocos-docs-master/manual/framework/native/v3/tiled-map/zh.md

[2]瓦片地图讲解：http://shahdza.blog.51cto.com/2410787/1613527

我的这个是基于 cocos2d-x 2.2.6说的，因为以前不会用，这两天专门看了看。

【1】瓦片地图的创建

1.首选 tmx 文件

2.大小建议是32*32的倍数

【2】瓦片地图的方向

图2

瓦片地图的开始是从左上角开始，右下角结束的，如图2所示

【3】地图的搭建

地图是分几个层的，然后不同的层的显示也不同，越在上，他的 Zorder 也是越大，也就是显示的最靠外

这个需要注意的是，一个层里面只能用一个切图里的东西，不能使用多个切图里的图片，比如说图层 background用了图1的这个大的贴图，那么就不能在使用图2里面的贴图，否则会报错的

【4】地图属性

属性是地图最有用的，也是主要的功能，通过属性来获得各个不同的特点判断和操作

图4.图层设置属性

在图层里面设置属性，是直接设置的贴图的属性，因为图层主要是用来铺背景或者道路用的，所以直接设置的图块属性

图5.对象层设置属性

对象层是一个个不同的对象，比如说英雄，怪物等，所以是直接针对具体的对象设置属性。

【5】地图gid 的介绍

每一个瓦片素材都有一个全局唯一标识GID，而瓦片的GID就是表示该瓦片所使用的是哪个GID的图块素材。GID的计数从1开始，按顺序编号，一直编号到图块的总数量。如下图的tile图块资源中的 ID = 0 的图块编号 GID = 1，以此类推…… tile图块资源中最后一个 ID = 47 的图块对应的GID = 48。然后对于第二套图块资源中的 ID = 0 的图块，对应的 GID = 49。继续编号下去…

【6】代码操作

地图创建完毕后，就用来使用的

[1]MAP操作

特别要注意的是：

CCSize size = map->getMapSize();//获取瓦片地图数量,单位不是像素
CCSize tilesize =map->getTileSize();//单个瓦片的大小，单位是像素

map 的主要函数

CCTMXLayer* layerNamed(const char *layerName);
CCTMXObjectGroup* objectGroupNamed(const char *groupName);
CCString *propertyNamed(const char *propertyName);
CCDictionary* propertiesForGID(int GID);

map 的创建

CCTMXTiledMap *map=CCTMXTiledMap::create("1.tmx");
    map->setAnchorPoint(CCPoint(0.5, 0.5));
    map->setPosition(CCPoint((origin.x+visibleSize.width)/2, (origin.y+visibleSize.height)/2));
    addChild(map);

然后添加到 layer

[2]CCTMXLayer

图层一般只是做背景，所以一般是判断对应的坐标是否有图层，和图层属性，用来判断是悬崖还是路，所以最主要的是这样用的

//获取 layer
    CCTMXLayer *ground=map->layerNamed("ground");
//属性函数
CCString *propertyNamed(const char *propertyName);

[3]对象层

对象层是主要的操作对象，所以也是主要设置的功能，比如说在指定的那个对象加英雄

 //获取对象层
    CCTMXObjectGroup *obj=map->objectGroupNamed("coin");
    //获取对象名为 huhu 的 b 属性
    CCLog("%d",obj->objectNamed("huhu")->valueForKey("b")->intValue());
    //获取对象层所有对象的坐标
        for (int i=0; i<obj->getObjects()->count(); i++) {
        CCSprite *sprite=CCSprite::create("Icon-s.png");
            float x  = ((CCDictionary*)obj->getObjects()->objectAtIndex(i))->valueForKey("x")->floatValue();
            float y =((CCDictionary*)obj->getObjects()->objectAtIndex(i))->valueForKey("y")->floatValue();
            sprite->setPosition(CCPoint(x, y));
            addChild(sprite);
    }

【7】获取对应坐标对应的属性

//获取对应坐标对应的属性,比如获取（200，100）这个坐标对应的瓦片的属性；
    
    CCSize size = map->getMapSize();//获取瓦片地图数量,单位不是像素
    CCSize tilesize =map->getTileSize();//单个瓦片的大小，单位是像素
    int x= 200/tilesize.width;
    int y= size.height-100/tilesize.height-1;//记得要减一
    CCLog("%d,%d",x,y);
    int gid = ground->tileGIDAt(ccp(x, y));//获取 gid
    CCLog("%d",gid);
    if (gid!=0) {
        map->propertiesForGID(gid);//一个字典
        //获取 x 坐标
        map->propertiesForGID(gid)->valueForKey("x")->intValue();
    }

【8】为什么 y 轴减一

图7

【9】Tile坐标与 OpenGL坐标相互转换

普通瓦片（直90°）的坐标转换

//
    // OpenGL坐标：原点为屏幕左下角（单位：像素）
    // tile坐标：原点为瓦片地图的左上角（单位：瓦片）
 
    // OpenGL坐标 转成 格子坐标
    Vec2 tileCoordForPosition(const Vec2& position) {
        Size mapSize = tiledMap->getMapSize(); 
        Size tileSize = tiledMap->getTileSize();
        int x = position.x / tileSize.width;
        int y = (mapSize.height * tileSize.height - position.y) / tileSize.height-1;
        return Vec2(x, y);
    }
 
    // tile坐标 转成 瓦片格子中心的OpenGL坐标
    Vec2 positionForTileCoord(const Vec2& tileCoord) {
        Size mapSize = tiledMap->getMapSize(); 
        Size tileSize = tiledMap->getTileSize();
        int x = tileCoord.x * tileSize.width + tileSize.width/2;
        int y = (mapSize.height - tileCoord.y) * tileSize.height - tileSize.height/2;
        return Vec2(x, y);
    }
//

Demo下载

Github下载：https://github.com/DamonHu/HudongTmxDemo

GitOsc下载：http://git.oschina.net/DamonHoo/HudongTmxDemo

版权属于：胡东东博客
本文链接：http://blog.hudongdong.com/cocos2d/129.html
自2017年12月26日起，『转载以及大段采集进行后续编辑』须注明本文标题和链接！否则禁止所有转载和采集行为！

☟☟如文章有用，可点击一次下方广告支持一下☟☟

Last modification：January 1st, 1970 at 08:00 am

如果觉得我的文章对你有用，请随意打赏: ☞已打赏列表

瓦片地图 TMX 使用详解（图文）

东东 • 2015 年 05 月 07 日

cocos2d-x 3.0版本以上的请参考这两个文章

[1]瓦片地图官方文档：http://cn.cocos2d-x.org/article/index?type=cocos2d-x&url=/doc/cocos-docs-master/manual/framework/native/v3/tiled-map/zh.md

[2]瓦片地图讲解：http://shahdza.blog.51cto.com/2410787/1613527

我的这个是基于 cocos2d-x 2.2.6说的，因为以前不会用，这两天专门看了看。

【1】瓦片地图的创建

1.首选 tmx 文件

2.大小建议是32*32的倍数

【2】瓦片地图的方向

图2

瓦片地图的开始是从左上角开始，右下角结束的，如图2所示

【3】地图的搭建

地图是分几个层的，然后不同的层的显示也不同，越在上，他的 Zorder 也是越大，也就是显示的最靠外

【4】地图属性

属性是地图最有用的，也是主要的功能，通过属性来获得各个不同的特点判断和操作

图4.图层设置属性

在图层里面设置属性，是直接设置的贴图的属性，因为图层主要是用来铺背景或者道路用的，所以直接设置的图块属性

图5.对象层设置属性

对象层是一个个不同的对象，比如说英雄，怪物等，所以是直接针对具体的对象设置属性。

【5】地图gid 的介绍

【6】代码操作

地图创建完毕后，就用来使用的

[1]MAP操作

特别要注意的是：

CCSize size = map->getMapSize();//获取瓦片地图数量,单位不是像素
CCSize tilesize =map->getTileSize();//单个瓦片的大小，单位是像素

map 的主要函数

CCTMXLayer* layerNamed(const char *layerName);
CCTMXObjectGroup* objectGroupNamed(const char *groupName);
CCString *propertyNamed(const char *propertyName);
CCDictionary* propertiesForGID(int GID);

map 的创建

CCTMXTiledMap *map=CCTMXTiledMap::create("1.tmx");
    map->setAnchorPoint(CCPoint(0.5, 0.5));
    map->setPosition(CCPoint((origin.x+visibleSize.width)/2, (origin.y+visibleSize.height)/2));
    addChild(map);

然后添加到 layer

[2]CCTMXLayer

图层一般只是做背景，所以一般是判断对应的坐标是否有图层，和图层属性，用来判断是悬崖还是路，所以最主要的是这样用的

//获取 layer
    CCTMXLayer *ground=map->layerNamed("ground");
//属性函数
CCString *propertyNamed(const char *propertyName);

[3]对象层

对象层是主要的操作对象，所以也是主要设置的功能，比如说在指定的那个对象加英雄

 //获取对象层
    CCTMXObjectGroup *obj=map->objectGroupNamed("coin");
    //获取对象名为 huhu 的 b 属性
    CCLog("%d",obj->objectNamed("huhu")->valueForKey("b")->intValue());
    //获取对象层所有对象的坐标
        for (int i=0; i<obj->getObjects()->count(); i++) {
        CCSprite *sprite=CCSprite::create("Icon-s.png");
            float x  = ((CCDictionary*)obj->getObjects()->objectAtIndex(i))->valueForKey("x")->floatValue();
            float y =((CCDictionary*)obj->getObjects()->objectAtIndex(i))->valueForKey("y")->floatValue();
            sprite->setPosition(CCPoint(x, y));
            addChild(sprite);
    }

【7】获取对应坐标对应的属性

//获取对应坐标对应的属性,比如获取（200，100）这个坐标对应的瓦片的属性；
    
    CCSize size = map->getMapSize();//获取瓦片地图数量,单位不是像素
    CCSize tilesize =map->getTileSize();//单个瓦片的大小，单位是像素
    int x= 200/tilesize.width;
    int y= size.height-100/tilesize.height-1;//记得要减一
    CCLog("%d,%d",x,y);
    int gid = ground->tileGIDAt(ccp(x, y));//获取 gid
    CCLog("%d",gid);
    if (gid!=0) {
        map->propertiesForGID(gid);//一个字典
        //获取 x 坐标
        map->propertiesForGID(gid)->valueForKey("x")->intValue();
    }

【8】为什么 y 轴减一

图7

【9】Tile坐标与 OpenGL坐标相互转换

普通瓦片（直90°）的坐标转换

//
    // OpenGL坐标：原点为屏幕左下角（单位：像素）
    // tile坐标：原点为瓦片地图的左上角（单位：瓦片）
 
    // OpenGL坐标 转成 格子坐标
    Vec2 tileCoordForPosition(const Vec2& position) {
        Size mapSize = tiledMap->getMapSize(); 
        Size tileSize = tiledMap->getTileSize();
        int x = position.x / tileSize.width;
        int y = (mapSize.height * tileSize.height - position.y) / tileSize.height-1;
        return Vec2(x, y);
    }
 
    // tile坐标 转成 瓦片格子中心的OpenGL坐标
    Vec2 positionForTileCoord(const Vec2& tileCoord) {
        Size mapSize = tiledMap->getMapSize(); 
        Size tileSize = tiledMap->getTileSize();
        int x = tileCoord.x * tileSize.width + tileSize.width/2;
        int y = (mapSize.height - tileCoord.y) * tileSize.height - tileSize.height/2;
        return Vec2(x, y);
    }
//

Demo下载

Github下载：https://github.com/DamonHu/HudongTmxDemo

GitOsc下载：http://git.oschina.net/DamonHoo/HudongTmxDemo

版权属于：胡东东博客
本文链接：http://blog.hudongdong.com/cocos2d/129.html
自2017年12月26日起，『转载以及大段采集进行后续编辑』须注明本文标题和链接！否则禁止所有转载和采集行为！

☟☟如文章有用，可点击一次下方广告支持一下☟☟

瓦片地图 TMX 使用详解（图文）

Demo下载

Leave a Comment Cancel reply

IOS监测其他APP是否打开的思路

IOS视频编辑功能详解下篇-视频裁剪、视频拼接、音视频的处理

友情链接说明和申请

IOS视频编辑功能详解上篇-添加水印

iOS屏幕适配和设计流程分析

font字体和美术字制作

通过预编译实现不同的编译条件

cocos2d-x3.9增加触摸事件

支付宝找不到头文件的解决办法

iOS软件启动图的多语言化

瓦片地图 TMX 使用详解（图文）

Demo下载