Cocos2d-x学习笔记十六-------->Cocos2d-x引擎中的网格地图

网格地图

2D游戏网格地图介绍：

在网格地图游戏中，地图由称为“瓷砖”(tile)的一小组图片相互排列组成。这些图片放在一个整体的网格中。得到一个令人信服的游戏场景。网格地图技术为开发者提供了很多便利，使用很少的网格图片元素，就可以组成非常大的场景地图，而且这些大场景并不会浪费硬件资源。而且根据网格元素的不同，可以得到多种多样的场景地图。

网格地图主要分为两大类：

第一类是 90度网格地图( Orthogonal Tilemap)，这类地图都是使用正方形或者长方形的瓷砖( Tile)组成的，通常以俯视视角从上到下展示游戏世界。

第二类是斜 45度网格地图( isometric)，这类地图采用棱形的瓷砖，使得显示的内容达到了一种透视的效果，并且可以在游戏中引入上下左右，左上、左下、右上、右下共8个方向，是一种近似于 3D效果的网格地图。

对于这两种主流的网格地图类型， x引擎都可以完美地支持。 Cocos2d-x引擎支持标准的 TMX格式的网格地图文件，这是一种使用网格地图编辑器制作的文件，读取 TMX格式文件后， x引擎就能够在场景中显示出整个网格地图，并对网格地图中的层次信息和各种地图属性进行操作，此时的网格地图，就是 x引擎场景中的一个“ 特大号”的节点。

使用网格地图编辑器( Tiled Map Editor)：

Tiled Map Editor可以轻松地编辑出各种 90度网格地图和 45度网格地图，并将编辑好的内容保存为 TMX格式的文件，由 Cocos2d-x引擎读取解析，显示在游戏场景当中。 Tiled所编辑的网格地图支持多个层，可以在地图中添加触发区域和物体，还可以为每个瓷砖添加类型属性，然后使用 Cocos2d-x在程序中用代码访问瓷砖的属性值。

利用Tiled创建45度地图：

利用Tiled创建90度地图：

在Cocos2d-x引擎中使用网格地图：

CCTMXTiledMap* map = CCTMXTiledMap::create("iso-test1.tmx");
addChild(map,0);

这部分代码将网格文件载入，在x引擎中网格地图对应CCTMXTiledMap类型，通过这一类型的对象可以对网格地图进行各种操作。接下来的代码将网格地图对象作为场景的一个子节点添加到游戏场景当中。

效果：

将地图居中显示，为地图对象设置锚点。

CCTMXTiledMap* map = CCTMXTiledMap::create("iso-test1.tmx");
map->setAnchorPoint(ccp(0.5f,0.5f));
map->setPosition(ccp(visibleSize.width/2,visibleSize.height/2));
addChild(map,0);

效果：

网格地图的层次控制：

在 Cocos2d-x引擎中，可以通过 CCTMXLayer类型来对网格地图中的 layer对象进行各种操作，包括显示 隐藏、 缩放等操作。在操作具体的 layer对象之前，需要通过 CCTMXTiledMap类型的 map对象得到 layer对象，然后才能够对 layer对象进行控制操作。

CCTMXTiledMap* map = CCTMXTiledMap::create("iso-test1.tmx");
map->setPosition(ccp(visibleSize.width/2,visibleSize.height/2));
map->setAnchorPoint(ccp(0.5f,0.5f));

CCTMXLayer* layer1 = map->layerNamed("layer1");
CCTMXLayer* layer2 = map->layerNamed("layer2");
CCTMXLayer* layer3 = map->layerNamed("layer3");

layer2->setVisible(false);

addChild(map,0);

首先是要 CCTMXTiledMap类型对象的 layerName方法以及每个层的名称作为参数，取得 CCTMXLayer类型的 layer对象，然后我们就可以使用 layer对象进行 隐藏、 缩小及 放大操作了。
除了对 layer整体进行控制以外，还可以进一步取得 layer中某一个具体的网格单元，得到的是一个独立的精灵对象，拿到对象后，就可以对它进行各种精灵操作，比如变换颜色等等，这样就可以最终控制网格地图的每个网格单元。

CCSprite* sprite;
sprite = layer3->tileAt(ccp(8,7));
sprite->setColor(ccc3(200,0));

还可以实时修改某个层次 layer指定单元格的内容。

layer3->setTileGID(32,ccp(8,7));

以上代码修改了 layer3层次中坐标为 (12,12)的这个单元格的图像 ID，当新的 ID指定为 32时，其对应的图像就是图源中索引为 32的图片单元。

效果：

网格地图的移动控制：

网格地图对象在 Cocos2d-x引擎中，实质上就是场景内的一个特殊类型的节点。所以针对节点的所有操作，都可以放在网格地图对象上进行。

网格地图往往都比较大，显示的内容非常多，全部地图的整体尺寸通常是游戏屏幕的几倍甚至是几十倍，如果想要在游戏中便遍历整个地图，就必须要对地图做移动控制操作，让游戏屏幕的主摄像头(也就是当前屏幕窗口)从地图的一点移动到另一点，其实质操作就是摄像头位置固定，让网格地图在场景中从一个点移向另一个点，这种反向操作也可以得到相同的效果。

以下代码实现对地图的触摸移动操作：

在 HelloWorldScene.h头文件加入：

virtual void ccTouchesMoved(CCSet *pTouches,CCEvent *pEvent);

然后在 HelloWorldScene.cpp中加入：

void HelloWorld::ccTouchesMoved(CCSet *pTouches,CCEvent *pEvent){
	CCTouch* touch = (CCTouch *)pTouches->anyObject();
	CCPoint diff = touch->getDelta();
	CCNode* node = getChildByTag(1);
	CCPoint currentPos = node->getPosition();
	node->setPosition(ccpAdd(currentPos,diff));
}

这个函数中首先得到了用户的触摸点，在 x引擎中使用 CCTouch类型代表触摸点信息，接下来使用触摸点对象 touch的 getDelta方法，得到当前触摸点在两帧间隔时间内在 X轴和 Y轴方向上的移动距离。得到每次手指滑动的距离后，根据这个位置变化，更新地图的位置坐标。使用 getChildByTag(1)这个方法得到网格地图节点，之所以能够通过这个方法取得网格地图对象，是因为在向场景中添加网格地图时，使用 addChild(map,1)，第三个参数指定了这个网格地图的 tag标签为 1。再通过标签就能够找回网格地图对象，此时它的类型就是一个场景节点，可以通过 getPosition()取得此节点的坐标位置，通过 setPosition()可以设置它的新位置坐标。

效果：

网格地图的遮挡操作：

在设计采用大地图的游戏时，除了地图上的元素内容以外，我们通常还要加入游戏 主角、 NPC等人物角色。人物在地图行走时，需要注意的一点就是与地图中的物体的遮挡效果。比如：人物在沙漠中行走，人物是在地表的上层，而当任务走入森林时，数目就应该位于人物的上层，表示人物被树木遮挡住了。

首先设置网格地图中每个层次的显示顺序—— ZOrder，通过以下代码设置第一层和第二层的显示级别比较低，会被主角精灵遮挡住，而第三层森林层显示级别要高很多，不会被主角精灵遮挡。

layer1->setZOrder(1);
layer2->setZOrder(2);
layer3->setZOrder(10);

参数1、2、10就是每个层的显示级别，数值越大，级别越高，高级别的会遮挡住低级别的物体。

CCSprite* sprite = CCSprite::create("iso-test.png",CCRectMake(274,48,114));

sprite->setPosition(ccp(350,300));
sprite->setAnchorPoint(ccp(0.5f,0.5f));
map->addChild(sprite,3);

CCActionInterval* move =  CCMoveBy::create(3,ccp(200,-200));
CCActionInterval* back = move->reverse();
CCActionInterval* seq = CCSequence::create(move,back,NULL);
sprite->runAction(CCRepeatForever::create(seq));

效果：