Tiled工具

首先需要Tiled工具，具体使用网上很多博客都写过，我也是搜索的学习的

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

这是cocos官方的demo中的一个地图资源，是以tmx后缀的文件，其实是xml

<?xml version="1.0" encoding="UTF-8"?>
<map version="1.0" orientation="orthogonal" renderorder="right-down" width="12" height="12" tilewidth="101" tileheight="81" nextobjectid="4">
 <tileset firstgid="1" name="Untitled" tilewidth="101" tileheight="171" spacing="2" margin="2">
  <image source="test2_2.png" width="1024" height="1024"/>
 </tileset>
 <tileset firstgid="46" name="tileset2" tilewidth="101" tileheight="171" spacing="2" margin="2">
  <image source="test2.png" width="1024" height="1024"/>
 </tileset>
 <layer name="Layer 0" width="12" height="12">
  <data encoding="base64" compression="gzip">
   H4sIAAAAAAAAC2NgGAX4AB8Q8wOxAJSvBMRcQMyNhHEBZiBmAmIWIGYFYjYS7BUCYmEg1gBiVSBWgYqrImFBINYGYgkgFgFiUah6LiLUw9xOrPncOMwHAN53jmxAAgAA
  </data>
 </layer>
 <layer name="Layer 1" width="12" height="12">
  <data encoding="base64" compression="gzip">
   H4sIAAAAAAAAC2NgGAXUBNZAbAPEtmToNQBifSA2BGIjIDYmQa89GfbhMgcd4wMA7a2boEACAAA=
  </data>
 </layer>
 <layer name="Layer 2" width="12" height="12">
  <data encoding="base64" compression="gzip">
   H4sIAAAAAAAAC2NgGAUDCfiAmB+IBcjQywzETEDMAsSsQMxGgl4hMuzDBgAgyUssQAIAAA==
  </data>
 </layer>
 <objectgroup name="Obj1">
  <object id="1" name="o1" x="254" y="610" width="277" height="130" rotation="7">
   <properties>
    <property name="aa" value="12"/>
   </properties>
  </object>
 </objectgroup>
</map>

其中几个重要的属性，map标签中的width和height是瓦块在横竖方向上的个数，tilewidth和tileheight是每一个瓦块的宽高，tileset是设置图片资源，layer是layer层的一些属性，其中data是具体这一层上面的各个瓦块地图资源位置等数据，objectgroup是obj层的一些属性。

具体在Cocos2d中code使用

1、加载tmx地图

tiledMap = TMXTiledMap::create("res/test2.tmx");
addChild(tiledMap);

然后给地图加上touch监听，后面做打log用

EventListenerTouchOneByOne* listener = EventListenerTouchOneByOne::create();
listener->setSwallowTouches(true);
listener->onTouchBegan = CC_CALLBACK_2(HelloWorld::onTouchBegan, this);
listener->onTouchCancelled = CC_CALLBACK_2(HelloWorld::onTouchCancelled,this);
listener->onTouchEnded = CC_CALLBACK_2(HelloWorld::onTouchEnded, this);
listener->onTouchMoved = CC_CALLBACK_2(HelloWorld::onTouchMoved, this);
Director::getInstance()->getEventDispatcher()->addEventListenerWithSceneGraphPriority(listener, tiledMap);

实现一个小功能，在点击地图的时候，将所点击的图块资源换成一个宝箱，然后跳动几下

bool HelloWorld::onTouchBegan(Touch* touch, Event* event){
Vec2 touchLoaction = touch->getLocation();
Size tiledSize = tiledMap->getTileSize();
Size mapSize = tiledMap->getMapSize();
Vec2 touchLoaction1 = Vec2(touchLoaction.x, tiledSize.height* mapSize.height - touchLoaction.y);
log("tiledSize:%d,%d", tiledSize.width, tiledSize.height);
log("mapSize:%d,%d", mapSize.width, mapSize.height);
int x = touchLoaction1.x / tiledSize.width;
int y = touchLoaction1.y / tiledSize.height;
log("x:%d,y:%d", x,y);//打印出所点击的图块的位置

TMXLayer* layer0 = tiledMap->layerNamed("Layer 0");
layer0->setTileGID(0, Vec2(x, y));
TMXLayer* layer1 = tiledMap->layerNamed("Layer 1");
layer1->setTileGID(0, Vec2(x, y));//设置0是将图块资源设置为空
TMXLayer* layer2 = tiledMap->layerNamed("Layer 2");
layer2->setTileGID(8, Vec2(x, y));//改变图片资源

Sprite * sprite = layer2->tileAt(Vec2(x, y));
sprite->runAction(JumpBy::create(1.5f, Vec2(0,0), 40, 4));
return true;
}

然后我们来获取一下Obj层的一些具体属性，这些可以再游戏中用来设置很多场景

void HelloWorld::onTouchEnded(Touch* touch, Event* event){
TMXObjectGroup* objGroup = tiledMap->getObjectGroup("Obj1");
ValueVector vv = objGroup->getObjects();
auto o1 = objGroup->getObject("o1");
int xxx = o1.at("x").asInt();
int aa = o1.at("aa").asInt();
log("xxxx->%d,aa->%d", xxx,aa);
}

以上是一些简单的使用，具体游戏场景肯定比这复杂的多，后续如果有遇到一些合适的demo会基于这个写一下demo.
点击下载资源

秒客网

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

Tiled工具

具体在Cocos2d中code使用

相关文章