战争迷雾效果 第3章_准确地获取屏幕上的瓦片位置

错过了前面章节?

没关系,传送门在这:

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

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

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

(小若:听不懂啊!)

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

 

正文:

1. 什么是瓦片的坐标

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

(小若:喂,还是不懂!)

最后,看下图,大家一定就懂了:



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

(小若:噗!你早点放图片嘛)

2. 进入正题

好了,开始编码吧!

我们要修改HelloWorldScene.cppccTouchBegan函数:

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);

}

 

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

(小若:喂,那y坐标又是怎么一回事?)

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

(小若:其实我早就懂了,我刚刚只是不想懂而已!)

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



我在屏幕上点击了3次,打印了3条日志:

TiledMapPos x = 0, y = 1072693248

TiledMapPos x = 0, y = 1073741824

TiledMapPos x = 0, y = 1072693248

OK,一切正常。

(小若:啊,才怪啊!X0就算了,这y的天文数字又是怎么回事?)

是的,我故意的,我们来看看打印日志的代码:

 

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

这里有一个很有趣的地方要注意,那就是,CCPointxy属性是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)坐标是在屏幕的上方并且是看不见的。

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

(小若:终于等到了,你好唠叨!)

 

 

标签: cocos2d-x

?>