cocos2d-x学习笔记(15)--地图的使用1(TMX)


cocos2d-x学习笔记(15)--地图的使用1(TMX)

本文出自https://shuwoom.com博客,欢迎访问!

         在讲地图的使用方法前,我先向大家介绍一个cocos2d-x下的开源地图编辑软件(.tmx),下载地址:http://www.mapeditor.org/。这里我使用的是QT版本。

打开软件后的界面如下

这里我使用了游戏引擎中自带例子下的图片资源(在...C:\cocos2d-x\tests\Resources\TileMaps下的ortho-test2.png)。

首先第一步是创建新文件,这里我把新地图的大小和块大小设置如下:

在地图选项下,选择新图层,设置如下:

最终的效果图如下:

编辑好地图后,命名为map并保存,将map.tmx和ortho-test2保存到新建项目下的Resources文件夹中,接下来就是代码部分了:

 

step1:创建cocos2d-win32项目,并命名为tileMap;

step2:在HelloWorldScene.h中添加如下类:

class MapLayer:public CCLayer
{

protected:
	CCSprite* m_player;
public:
	MapLayer();
	~MapLayer();
};


step3:在HelloWorldScene.cpp中添加下面几个函数:

首先在MapLayer()构造函数中添加下面的代码:

setIsTouchEnabled(true);
	CCTMXTiledMap* map  = CCTMXTiledMap::tiledMapWithTMXFile("map.tmx");
	addChild(map, 1, tagTileMap);
	map->setPosition(ccp(0, 0));

这时编译运行代码,就可以看到地图的一部分效果图,无法看到其他部分;

 

接下来,为了能够看到地图的其他部分,需要添加屏幕响应函数:

因此,在MapLayer类中添加下面几个函数:

class MapLayer:public CCLayer
{

protected:
	CCSprite* m_player;
public:
	MapLayer();
	~MapLayer();

	void registerWithTouchDispatcher();
	bool ccTouchBegan(CCTouch *pTouch, CCEvent *pEvent);
	void ccTouchEnded(CCTouch *pTouch, CCEvent *pEvent);
	void ccTouchCancelled(CCTouch *pTouch, CCEvent *pEvent);
	void ccTouchMoved(CCTouch *pTouch, CCEvent *pEvent);
};

然后再HelloWorldScene.cpp中添加响应函数:

MapLayer::~MapLayer()
{
	m_player->release();
}

void MapLayer::registerWithTouchDispatcher()
{
	CCTouchDispatcher::sharedDispatcher()->addTargetedDelegate(this, 0, true);
}

bool MapLayer::ccTouchBegan(CCTouch *pTouch, CCEvent *pEvent)
{
	return true;
}

void MapLayer::ccTouchMoved(CCTouch *pTouch, CCEvent *pEvent)
{
	CCPoint touchLocation = pTouch->locationInView(pTouch->view());
	CCPoint prevLocation = pTouch->previousLocationInView(pTouch->view());

	touchLocation  = CCDirector::sharedDirector()->convertToGL(touchLocation);
	prevLocation  = CCDirector::sharedDirector()->convertToGL(prevLocation);

	CCPoint diff = ccpSub(touchLocation, prevLocation);
	//ccpAdd是对currentPos和diff的x y坐标进行相减

	CCNode* node = getChildByTag(tagTileMap);
	CCPoint currentPos = node->getPosition();
	node->setPosition(ccpAdd(currentPos, diff));
	//ccpAdd是对currentPos和diff的x y坐标进行相加
	
	//这里主要的意思就是对鼠标开始点击的坐标prevLocation(x1, y1)
	//鼠标移动到某一点的坐标touchLocation(x2, y2),
	//而两坐标的差值,就是地图要移动的距离和方向
	//node->setPosition(ccpAdd(currentPos, diff));就是在地图原来的坐标上移动x2-x1, y2-y1


}

void MapLayer::ccTouchCancelled(CCTouch* touch, CCEvent* event)
{
}

void MapLayer::ccTouchEnded(CCTouch *pTouch, CCEvent *pEvent)
{
}
 
 


现在再次运行程序,就可以拖动地图,可以看到地图的其余部分;

接下来,为了让地图上的内容更丰富,我在地图上添加一个人物,并可以随意移动人物;这里就用到对象层的知识。还是回到地图编辑器,点击图层按钮,选择添加对象层。并命名为object,点击插入对象按钮。在地图上选择一个添加人物的位置,这是地图上显示的是一个方框,点击方框,右键单击属性,在名称栏下输入player;

 

 

接下来,在MapLayer构造函数中添加下面的代码:

MapLayer::MapLayer()
{
	setIsTouchEnabled(true);
	CCTMXTiledMap* map  = CCTMXTiledMap::tiledMapWithTMXFile("map.tmx");
	addChild(map, 1, tagTileMap);
	map->setPosition(ccp(0, 0));

	CCTMXObjectGroup* objGroup = map->objectGroupNamed("object");
	CCStringToStringDictionary* spawnPoint = objGroup->objectNamed("player");
	float x = spawnPoint->objectForKey("x")->toFloat();
	float y = spawnPoint->objectForKey("y")->toFloat();

	CCTexture2D* playerTexture = CCTextureCache::sharedTextureCache()->addImage("Player.png");

	m_player = CCSprite::spriteWithTexture(playerTexture);
	m_player->retain();
	m_player->setPosition(ccp(x, y));


	map->addChild(m_player);
}

再次运行代码,随意拖动地图,我们可以看到地图上出现了一个人物;

到这里,地图的基本操作已经讲完。最后,我们修改一下ccTouchEnded函数,让人物根据鼠标点击位置动起来;

 

void MapLayer::ccTouchEnded(CCTouch *pTouch, CCEvent *pEvent)
{
	CCPoint location = pTouch->locationInView(pTouch->view());
	location = CCDirector::sharedDirector()->convertToGL(location);
	
	CCActionInterval* action = CCMoveTo::actionWithDuration(3, location);
	m_player->runAction(action);
}

 

 

 

源代码下载地址:http://download.csdn.net/download/wen294299195/4525829

 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
tIDE是多国语言的免费软件,但是!竟然没有中文,关于它的介绍自己看就不说了,下面来创建第一张地图,用于我们的TD游戏。 你现在需要一张这样的tile图片,来做完地图的基本元件 在Explorer面板Map节点地下的Tile Sheets右键Add,然后浏览选择上面的或者你自己的tile文件。 OK弹出Tile Sheet Properties对话框设置一下Tile Size让Tile完美的切割。这里的值是60x60。 ok,然后会在Tile picher面板里就会出现一个个分割好的Tile。 有了这些tile的支持就可以在map上玩拼图了。在map Explorer面板下的Map节点的Layers上右键Add,在弹出的Layer Properties设置地图的大小Layer Size,因为我现在只打算做一个最简单的也就是一屏幕而且不能拖动所以这里设置14x8 (800/60 x 480/60),OK。 为了方便绘制在工具面板的右上角有一个显示网格的按钮,点下去它 右边的绘图工具栏上有一个很好使用的按钮区域绘制,它能把选择区域填充出当前选择的tile,下面就先在tile Picker选择一块浅色的草地区域绘制到整个地图。然后画上我们的路。 Save as为 tmx类型的文件 中间如果出现警告确定就好了 这里出现了最关键的一步,这里一定要选Base64(gzip compressed),ccx现在的版本还只支持这一种。 把生成的tmx文件以及tile图片加入我们的项目中。 这里可能需要调整一下tmx文件中的Image source的路径 在程序中显示TMX地图 先显示出来看看努力的效果,之后再慢慢完善。 把GameScreen构造函数中的说明Label删除,添加CCTMXTiledMap 代码很简单如下 private GameScreen() { CCTMXTiledMap tmxmap = CCTMXTiledMap.tiledMapWithTMXFile("Map/Level1"); addChild(tmxmap); }

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值