【笨木头Cocos2dx 040】战争迷雾效果 第3章_准确地获取屏幕上的瓦片位置

错过了前面章节？

没关系，传送门在这：

战争迷雾效果 第1章_要探索，不要地图全开！

战争迷雾效果 第2章_先把地图加进来

本节我们还是要做一些铺垫，不过这很有意思，我们来试试点击屏幕，获取所点击的瓦片格子的位置。

（小若：听不懂啊！）

 

笨木头花心贡献，啥？花心？不呢，是用心~
转载请注明，原文地址：http://www.benmutou.com/blog/archives/482

 

正文：

1. 什么是瓦片的坐标

这么说吧，前一个小节我们创建了一张10×10的TMX地图，我们所说的瓦片格子的位置，就是指这100个格子里的位置，瓦片格子的位置用二维上的一个点来表示。

（小若：喂，还是不懂！）

最后，看下图，大家一定就懂了：

 

比如，左上角的瓦片格子的坐标就是(0, 0)。

（小若：噗！你早点放图片嘛）

 

2. 进入正题

好了，开始编码吧！

我们要修改HelloWorldScene.cpp的ccTouchBegan函数：

bool HelloWorld::ccTouchBegan( CCTouch *pTouch, CCEvent *pEvent ) 
{
 
CCPoint tiledMapPos = getMapTiledPos(
 
cloudMap,
 
CCDirector::sharedDirector()->convertToGL(pTouch->getLocationInView()));
 
CCLOG("TiledMapPos x = %d, y = %d", tiledMapPos.x, tiledMapPos.y);
 
return true;
 
}

 

convertToGL函数是为了把屏幕点击坐标转换为Cocos2d-x的坐标系。

（小若：我知道，屏幕点击坐标是以左上角为原点的，而Cocos2d-x是笛卡尔坐标系，是以左下角为原点的。）

 

旁白出乎意料的聪明了一次。然后通过getMapTiledPos函数即可将点击坐标转换为瓦片坐标。很简单，不解释了。

（小若：什么啊，getMapTiledPos是怎么回事？你不打算解释了？）

 

为了奖励旁白聪明了一次，我就破例讲解一下吧。我们来看看这个函数：

cocos2d::CCPoint HelloWorld::getMapTiledPos( CCTMXTiledMap* map, CCPoint pos ){
 
CCSize mapSize = map->getMapSize();
 
CCSize tiledSize = map->getTileSize();
 
int iMapHeight = mapSize.height * tiledSize.height;
 
/* pos为笛卡尔坐标系的坐标，所以y轴需要修正 */
 
int x = pos.x / tiledSize.width;
 
int y = (iMapHeight - pos.y) / tiledSize.height;
 
return CCPointMake(x, y);
 
}

其实这是一个简单数学计算，x、y坐标就相当于长度，瓦片格子大小就相当于单位大小，长度除以单位大小，就得到了数量，这个数量就是我们要的瓦片坐标。

（小若：喂，那y坐标又是怎么一回事？）

 

关于y坐标，我做了一个特殊处理，因为参数pos是在笛卡尔坐标系下的坐标，而瓦片地图是以左上角为原点的（前面那张图片，还记得吗？），所以要先把pos.y转换一下，通常转换坐标是用屏幕高减去y，但因为瓦片地图有可能比屏幕大，所以在这里要用瓦片地图的高。

（小若：其实我早就懂了，我刚刚只是不想懂而已！）

 

我们用调式模式运行项目，然后点击屏幕就会看到以下输出：

 

我在屏幕上点击了3次，打印了3条日志：

TiledMapPos x = 0, y = 1072693248

TiledMapPos x = 0, y = 1073741824

TiledMapPos x = 0, y = 1072693248

OK，一切正常。

（小若：啊，才怪啊！X为0就算了，这y的天文数字又是怎么回事？）

 

是的，我故意的，我们来看看打印日志的代码：

CCLOG("TiledMapPos x = %d, y = %d", tiledMapPos.x, tiledMapPos.y);

 

这里有一个很有趣的地方要注意，那就是，CCPoint的x和y属性是float类型的，所以不能用整型的格式输出。我们试试把调试代码改为这样：

CCLOG("TiledMapPos x = %f, y = %f", tiledMapPos.x, tiledMapPos.y);

 

我把%d换成了%f。我们来继续用调试模式运行项目，然后随意点击屏幕，将看到以下输出：

TiledMapPos x = 0.000000, y = 8.000000

TiledMapPos x = 0.000000, y = 7.000000

TiledMapPos x = 1.000000, y = 9.000000

TiledMapPos x = 3.000000, y = 9.000000

这次真的正常了。大家可以自行测试。

（小若：为什么我点击左上角，但是输出的不是(0, 0)？）

 

对了，TMX地图绘制到屏幕上时，也是遵守笛卡尔坐标系的，图绘制到屏幕时，地图的左下角和屏幕的左下角是对齐的，所以，当地图比屏幕大时，地图的（0， 0）坐标是在屏幕的上方并且是看不见的。

好了，铺垫差不多完成了，下一节我们将正式开始编写战争迷雾效果。

（小若：终于等到了，你好唠叨！）