Creator | TileMap坐标转换

1地图类型

瓦片地图类型：正常、45度、45度交错、六角交错

正常：

45度：

45度交错：

六角交错：

2坐标系

所有地图类型的坐标都是格子数，X轴向右增加，Y轴向下增加

正常/45度交错/六角交错地图左上角第一个格子为起始点：(0,0)

45度地图上方顶点第一个格子为起始点：(0,0)

TileMap坐标：以地图左上角为原点(0,0)，X轴向右增加，Y轴向下增加

OpenGL坐标：以地图左下角为原点(0,0)，X轴向右增加，Y轴向上增加

Creator坐标：以节点中心点为原点(0,0)，X轴向右增加，向左减少，Y轴向上增加，向下减少

3坐标转换

正常地图：

public tileToOpengl(point: cc.Vec2) {
  let mapSize = this._tileMap.getMapSize();
  let tileSize = this._tileMap.getTileSize();
  let x = point.x * tileSize.width + tileSize.width / 2;
  let y = (mapSize.height - point.y) * tileSize.height - tileSize.height / 2;

  return cc.v2(x, y);
}

public openglToTile(point: cc.Vec2) {
  let mapSize = this._tileMap.getMapSize();
  let tileSize = this._tileMap.getTileSize();
  let x = Math.floor(point.x / tileSize.width);
  let y = Math.floor((mapSize.height * tileSize.height - point.y) / tileSize.height);

  return cc.v2(x, y);
}

45度/45度交错：

public tileToOpengl(point: cc.Vec2) {
  let mapSize = this._tileMap.getMapSize();
  let tileSize = this._tileMap.getTileSize();
  let x = point.x * tileSize.width + Math.floor(point.y % 2) * tileSize.width / 2;
  let y = (mapSize.height - (point.y + 1)) * tileSize.height / 2 - tileSize.height / 2;

  return cc.v2(x, y);
}

public openglToTile(point: cc.Vec2) {
  let mapSize = this._tileMap.getMapSize();
  let tileSize = this._tileMap.getTileSize();
  let y = Math.floor((mapSize.height - 2 - ((2 * Math.floor(point.y) / Math.floor(tileSize.height)))));
  let x = Math.floor(point.x / tileSize.width - (y % 2) / 2);

  return cc.v2(x, y);
}

OpenGL转Creator：

public openglToScreen(point: cc.Vec2) {
  let mapSize = this._tileMap.getMapSize();
  let tileSize = this._tileMap.getTileSize();
  let x = point.x - mapSize.width * tileSize.width / 2;
  let y = point.y - mapSize.height * tileSize.height / 2;

  return cc.v2(x, y);
}

Creator转OpenGL：

public screenToOpengl(point: cc.Vec2) {
  let mapSize = this._tileMap.getMapSize();
  let tileSize = this._tileMap.getTileSize();
  let x = point.x + mapSize.width * tileSize.width / 2;
  let y = point.y + mapSize.height * tileSize.height / 2;

  return cc.v2(x, y);
}

4优化

CocosCreator中可视区域外的节点依然会被渲染，所以屏幕外和mask外的节点需要自己手动active=false，对于TileMap，需要添加：

cc.macro.ENABLE_TILEDMAP_CULLING = true;

—END—

声明：发布此文是出于传递更多知识以供交流学习之目的。若有来源标注错误或侵犯了您的合法权益，请作者持权属证明与我联系，我将及时更正、删除，谢谢。

作者：请容我安眠

更多笔记和源码请关注：【微信公众号】 CocosCreator笔记