码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2015-01-04 10:00:44      阅读:218      评论:0      收藏:0      [点我收藏+]

标签:

网格地图
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,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类型代表触摸点信息,接下来使用触摸点对象touchgetDelta方法,得到当前触摸点在两帧间隔时间内在XY方向上的移动距离。得到每次手指滑动的距离后,根据这个位置变化,更新地图的位置坐标。使用getChildByTag(1)这个方法得到网格地图节点,之所以能够通过这个方法取得网格地图对象,是因为在向场景中添加网格地图时,使用addChild(map,0,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,0,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));
效果
技术分享
技术分享

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

标签:

原文地址:http://blog.csdn.net/liang3472/article/details/42248607

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!