直接进入主题,公式如下
this.cellXCount = tmxMap.getMapSize().width;this.cellYCount = tmxMap.getMapSize().height;this.cellWidth = tmxMap.getTileSize().width;this.cellHeight = tmxMap.getTileSize().height;this.mapPixWidth = this.cellWidth * this.cellXCount;this.mapPixHeight = this.cellHeight * this.cellYCount;// cellX和cellY是tilemap中的单元格。posX = this.mapPixWidth / 2 + (cellX - cellY) * this.cellWidth / 2;posY = this.mapPixHeight - (cellX + cellY) * this.cellHeight / 2;
推理过程
首先声明,推理过程没有复杂的数学公式,请各位放心 O(∩_∩)O
以下分三步来对tiledMap配置文件的数据进行拆解,变为能够在Cocos2d-JS中使用的坐标系。
数据来源
tiledmap中经常会使用到对象层,通常使用以下代码获取对象层的数据
var objectGroup = this.tmxMap.getObjectGroup("Object");var aryObjects = objectGroup.getObjects();
aryObjects 是一个数组,存储了对象层中的所有对象。
对象中的数据结构为

其中的name
,param
,type
为自定义属性,可以忽略
这里就拿到了一个对象层的基础数据结构,而这里的x,y并不是tiledmap中的坐标系。所以我们在这里需要先将其转换成tiledMap中的坐标
var tiledMapPos = obj["x"], this.mapPixHeight - obj["y"] - obj["height"]
原来Object的坐标代表的是什么意思,我暂时还没弄清楚。希望知道的同学,可以留言回复。
转换tiledMap坐标为格子坐标

tiledMap的坐标是以其顶点作为初始目标的。无法被用于Cocos2d-JS的坐标体系中,这里我们先将其转换为格子坐标。再通过最前面提到的公式将其转换为真正游戏中使用的坐标系。
this.cellWidth = tmxMap.getTileSize().width;this.cellHeight = tmxMap.getTileSize().height;var cellX = parseInt(objPos.x / (this.mapObj.cellWidth / 2));var cellY = parseInt(objPos.y / this.mapObj.cellHeight);
通过上述方式,将其转换成了tiledMap中的格子坐标
将格子坐标转换为游戏坐标

根据上图分析,我们先来分析x坐标
查看0,9
0,0
9,0
这三个点,我们发现,影响游戏X坐标的不仅仅跟格子X坐标相关,还跟格子的Y坐标相关。
0,9
到0,0
的过程,在格子X不变的情况。格子Y减少。会让游戏X坐标增加,每减少一个格子Y,增加1/2的格子宽度的游戏X。
0,0
到9,0
的过程,在格子Y不变的情况,格子X增加,会让游戏X坐标增加,每增加一个格子X,增加1/2的格子宽度的游戏X。
总上能得出公式:(cellX - cellY) * this.cellWidth / 2
而tiledMap起始的坐标0,0
的游戏X坐标为地图宽度的一半。所以最终公式为
posX = this.mapPixWidth / 2 + (cellX - cellY) * this.cellWidth / 2;
根据上图分析,我们先来分析Y坐标
同样以0,9
0,0
9,0
这三个点来分析Y坐标, 影响游戏Y坐标的不仅仅跟格子Y坐标相关,还跟格子的X坐标相关。
不管是格子的X增加还是格子的Y增加。都会减少游戏Y坐标,减少的数值为1/2的格子高度。所以能得到公式
-(cellX + cellY) * this.cellHeight / 2;
而tiledMap起始的坐标0,0
的游戏Y坐标为地图高度。所以最终公式为
posY = this.mapPixHeight - (cellX + cellY) * this.cellHeight / 2;
综上所述,最后得出的公式如下
this.cellXCount = tmxMap.getMapSize().width;this.cellYCount = tmxMap.getMapSize().height;this.cellWidth = tmxMap.getTileSize().width;this.cellHeight = tmxMap.getTileSize().height;this.mapPixWidth = this.cellWidth * this.cellXCount;this.mapPixHeight = this.cellHeight * this.cellYCount;// cellX和cellY是tilemap中的单元格。posX = this.mapPixWidth / 2 + (cellX - cellY) * this.cellWidth / 2;posY = this.mapPixHeight - (cellX + cellY) * this.cellHeight / 2;
附送一个小技巧,作为结尾彩蛋:
在游戏开发的过程中情况会遇到,点击一个按钮或者精灵。没有任何响应,这个时候通常就会处于懵逼状态。
这时只要去eventManager.js
这个引擎文件中找到_dispatchEventToListeners
这个函数,在此处下一个断点

事件如果被其他控件接受后。会有断点

查看node属性,一般就能确定事件被哪个控件抢走了

实战第一,绝不忽悠。欢迎大家留言交流