我在上一篇博客中介绍了使用地图编辑器创建瓦片地图：http://www.jb51.cc/article/p-brgdymtl-za.html

在这篇博客中将详细介绍瓦片地图在Cocos2d-X中的应用

先使用地图编辑器创建一个瓦片地图

保存好编辑的瓦片地图后会用一个tmx文件，打开tmx文件后会看到tmx文件其实是一个XML文件

上面编辑的瓦片地图的tmx文件中的内容：

<?xml version="1.0" encoding="UTF-8"?>
<map version="1.0" orientation="orthogonal" width="12" height="12" tilewidth="101" tileheight="81">
 <tileset firstgid="1" source="orthogonal-test1.tsx"/>
 <layer name="Layer 0" width="12" height="12">
  <data encoding="base64" compression="zlib">
   eJxjYBgFQwkIYsH4gDYWjA+oYsH4AACWOAHm
  </data>
 </layer>
</map>

代码解释：

version = "1.0"
地图的版本

encoding = "UTF-8

//地图的编码方式

orientation = "orthogonal"
//地图的方向

width = "12"
//地图中x方向上图块的个数

height = "12"
//地图中y方向上图块的个数

tilewidth = "101"
地图中每个图块的宽度

tileheight = "81"

地图中每个图块的高度

source="orthogonal-test1.tsx"
//地图的源文件

layer name="Layer 0"

图层

添加下面的代码：

 //创建地图
    CCTMXTiledMap* map = CCTMXTiledMap::create("orthogonal-test1.tmx");
    addChild(map);

执行结果：

瓦片地图的应用1：点击砖块砖块会变成宝箱

在制作这个小程序前需要知道一些知识点：

1、窗口的坐标原点位于窗口的左下角

2、地图的坐标原点位于地图的左上角

3、所以在设计创新时需要将地图的坐标转换成窗口坐标

通过图片可知图中的点在窗口上的x坐标和地图上的x坐标一样

图中点在窗口上的y坐标=瓦片地图的高度-点在瓦片地图中的y坐标

实现代码：

#include "TmxMapBasic.h"

CCScene* TmxMapBasic::scene()
{
	CCScene* s = CCScene::create();
	TmxMapBasic* layer = TmxMapBasic::create();
	s->addChild(layer);
	return s;
}

bool TmxMapBasic::init()
{
    CCLayer::init();

	CCSize winSize = CCDirector::sharedDirector()->getWinSize();

    //创建地图
    CCTMXTiledMap* map = CCTMXTiledMap::create("orthogonal-test1.tmx");
    addChild(map);

    _map = map;

    //注册触摸
	setTouchEnabled(true);
	setTouchMode(kCCTouchesOneByOne);

	return true;
}


//触摸响应函数
bool TmxMapBasic::ccTouchBegan(CCTouch* touch,CCEvent*)
{
    //得到触摸点的坐标
    CCPoint ptLocation = touch->getLocation();

    //ptLcocation -> 在tmx地图里的坐标
    //获取地图中每个图块的大小
    CCSize tileSize = _map->getTileSize();

    //获得地图中图块的个数
    CCSize mapSize = _map->getMapSize();

    CCPoint ptInMap;

    //获取触摸点在地图中的坐标
    ptInMap.y = mapSize.height * tileSize.height - ptLocation.y;
    ptInMap.x = ptLocation.x;


    //获取触摸点在窗口中的坐标
   	int tx = ptInMap.x / tileSize.width;
	int ty = ptInMap.y / tileSize.height;

    //通过图层名称获取地图对象
	CCTMXLayer* layer0 = _map->layerNamed("Layer 0");

    //设置瓷砖的编号0表示隐藏瓷砖
	layer0->setTileGID(9,ccp(tx,ty));

	return true;
}

执行结果：

瓦片地图的应用2：点击砖块砖块会变成宝箱宝箱跳跃

程序代码：

#include "TmxMapBasic.h"

CCScene* TmxMapBasic::scene()
{
	CCScene* s = CCScene::create();
	TmxMapBasic* layer = TmxMapBasic::create();
	s->addChild(layer);
	return s;
}

bool TmxMapBasic::init()
{
    CCLayer::init();

	CCSize winSize = CCDirector::sharedDirector()->getWinSize();

    //创建地图
    CCTMXTiledMap* map = CCTMXTiledMap::create("orthogonal-test1.tmx");
    addChild(map);

    _map = map;

    //注册触摸
	setTouchEnabled(true);
	setTouchMode(kCCTouchesOneByOne);

	return true;
}


//触摸响应函数
bool TmxMapBasic::ccTouchBegan(CCTouch* touch,ty));
    
    //使用点中位置的图片创建精灵
    CCSprite* sp = layer0->tileAt(ccp(tx,ty));
    
    //设置精灵跳跃
    CCAction* action = CCJumpBy::create(3,ccp(0,0),30,5);
    
    //执行跳跃动作
    sp->runAction(action);

	return true;
}

执行结果：