TiledMap.js 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551
  1. cc.Class({
  2. extends: cc.Component,
  3. editor: {
  4. requireComponent: cc.TiledMap
  5. },
  6. properties: {
  7. Show: {
  8. default: null,
  9. type: cc.Label,
  10. },
  11. DrawPathNode: cc.Node,
  12. //场景树木的预制
  13. BarrierPrefab: cc.Prefab,
  14. //场景栏杆的预制
  15. RailingXPrefab: cc.Prefab,
  16. RailingYPrefab: cc.Prefab,
  17. MyMapNode: cc.Node,
  18. //没有激活的节点,也就是还没有深度排序的
  19. MyMapNoActivationNode: cc.Node,
  20. //画网格
  21. isDraw: false,
  22. //记录道路的index
  23. _highwayIndex: {
  24. default: [],
  25. type: [cc.Integer],
  26. visible: false,
  27. },
  28. //记录道路的Node节点
  29. _highwayNodes: {
  30. default: [],
  31. type: [cc.Node],
  32. visible: false,
  33. },
  34. _tiledMap: {
  35. default: null,
  36. type: cc.TiledMap,
  37. serializable: false,
  38. visible: false,
  39. },
  40. // _IndexFromTiledPos: {
  41. // default: [],
  42. // type: [cc.Integer],
  43. // serializable: false,
  44. // visible: false,
  45. // },
  46. DynamicMinBoundary: {
  47. default: cc.v2(),
  48. visible: false,
  49. tooltip: '建筑可建区域边界值,针对上面两边边界越界',
  50. },
  51. },
  52. // use this for initialization
  53. onLoad: function () {
  54. //初始化TiledMap全局变量
  55. GlobalD.TiledMap = this;
  56. this._tiledMap = this.node.getComponent(cc.TiledMap);
  57. // console.log("this._tiledMap:", this._tiledMap);
  58. // let landInfo = this._tiledMap.getObjectGroup('initLand').getObjects();
  59. // console.log("landInf::", landInfo);
  60. // for (let i = 0; i < landInfo.length; i++) {
  61. // let _x = landInfo[i].x + this.node.getPosition().x;
  62. // let _y = landInfo[i].y + this.node.getPosition().y;
  63. // let back = this._tilePosFromLocation(new cc.Vec2(_x, _y));
  64. // console.log(landInfo[i].name,_x,_y ,"(", back.x, ",", back.y, ")");
  65. // }
  66. // let initBreedInfo = this._tiledMap.getObjectGroup('initBreed').getObjects();
  67. // console.log("initBreedInfo::", initBreedInfo);
  68. // for (let i = 0; i < landInfo.length; i++) {
  69. // let _x = landInfo[i].x + this.node.getPosition().x;
  70. // let _y = landInfo[i].y + this.node.getPosition().y;
  71. // let back = this._tilePosFromLocation(new cc.Vec2(_x, _y));
  72. // console.log(landInfo[i].name,_x,_y ,"(", back.x, ",", back.y, ")");
  73. // }
  74. // this.node.on(cc.Node.EventType.TOUCH_START, this.TouchStartFunction, this);
  75. this.node.on(cc.Node.EventType.TOUCH_END, this._touchEndFunction, this);
  76. // this.node.on(cc.Node.EventType.TOUCH_CANCEL, this.TouchCancelFunction, this);
  77. },
  78. onDestroy(){
  79. // this.node.off(cc.Node.EventType.TOUCH_START, this.TouchStartFunction, this);
  80. this.node.off(cc.Node.EventType.TOUCH_END, this._touchEndFunction, this);
  81. // this.node.off(cc.Node.EventType.TOUCH_CANCEL, this.TouchCancelFunction, this);
  82. },
  83. //统一派送 结束事件
  84. _touchEndFunction() {
  85. // console.log('TiledMap_Touch_End');
  86. this.node.dispatchEvent(new cc.Event.EventCustom('TiledMap_Touch_End', true));
  87. },
  88. start: function () {
  89. if (this.isDraw && this.DrawPathNode) {
  90. //画网格
  91. for (let i = 0; i < this._tiledMap.getMapSize().width + 1; i++) {
  92. var tilesPos1 = cc.v2(i, 0);
  93. var pos1 = this._locationFromtilePos(tilesPos1);
  94. var tilesPos2 = cc.v2(i, this._tiledMap.getMapSize().width);
  95. var pos2 = this._locationFromtilePos(tilesPos2);
  96. this.DrawPathNode.getComponent('Draw').onDrawFromTwoPoints(pos1, pos2);
  97. }
  98. for (let j = 0; j < this._tiledMap.getMapSize().width + 1; j++) {
  99. var tilesPos1 = cc.v2(0, j);
  100. var pos1 = this._locationFromtilePos(tilesPos1);
  101. var tilesPos2 = cc.v2(this._tiledMap.getMapSize().width, j);
  102. var pos2 = this._locationFromtilePos(tilesPos2);
  103. this.DrawPathNode.getComponent('Draw').onDrawFromTwoPoints(pos1, pos2);
  104. }
  105. this.DrawPathNode.getComponent('Draw').onStroke();
  106. }
  107. },
  108. /**
  109. * 获取配置的Title坐标数组,index+1 对应 id
  110. * @returns _initTiledPos
  111. */
  112. onGetLandList() {
  113. //获取tiled的配置点
  114. let landInfo = this._tiledMap.getObjectGroup('initLand').getObjects();
  115. // console.log("landInf::", landInfo);
  116. let _initTiledPos = new Array(landInfo.length);
  117. for (let i = 0; i < landInfo.length; i++) {
  118. let _x = landInfo[i].x + this.node.getPosition().x;
  119. let _y = landInfo[i].y + this.node.getPosition().y;
  120. let _backV2 = this._tilePosFromLocation(new cc.Vec2(_x, _y));
  121. // console.log(Number(landInfo[i].name) - 1, _x, _y, "(", _backV2.x, ",", _backV2.y, ")");
  122. _initTiledPos[Number(landInfo[i].name) - 1] = new cc.Vec2(_backV2.x, _backV2.y);
  123. }
  124. return _initTiledPos;
  125. },
  126. /**
  127. * 获取牧场信息
  128. * @returns
  129. */
  130. onGetBreedList() {
  131. //获取tiled的配置点
  132. let initBreedInfo = this._tiledMap.getObjectGroup('initBreed').getObjects();
  133. return initBreedInfo;
  134. },
  135. /**
  136. * 设置显示地图信息
  137. */
  138. setMapInfo(_level) {
  139. let objectGroup1 = this._tiledMap.getObjectGroup('farmer');
  140. let objectGroup2 = this._tiledMap.getObjectGroup('village');
  141. let layer2 = this._tiledMap.getLayer("village_com");
  142. let objectGroup3 = this._tiledMap.getObjectGroup('mayor');
  143. let layer3 = this._tiledMap.getLayer("mayor_com");
  144. if (0 === _level) {
  145. objectGroup1.node.active = true;
  146. objectGroup2.node.active = false;
  147. objectGroup3.node.active = false;
  148. layer2.node.active = false;
  149. layer3.node.active = false;
  150. } else if (1 === _level) {
  151. objectGroup1.node.active = false;
  152. objectGroup2.node.active = true;
  153. objectGroup3.node.active = false;
  154. layer2.node.active = true;
  155. layer3.node.active = false;
  156. } else if (2 === _level) {
  157. objectGroup1.node.active = false;
  158. objectGroup2.node.active = false;
  159. objectGroup3.node.active = true;
  160. layer3.node.active = true;
  161. layer2.node.active = false;
  162. }
  163. },
  164. //初始化TiledMap的障碍物
  165. onInitSolid() {
  166. //设置地图障碍物
  167. //隐藏地图树木
  168. // this._tiledMap.getLayer('Trees').enabled = false;
  169. var objectGroup = this._tiledMap.getObjectGroup('Barrier');
  170. let objects = objectGroup.getObjects();
  171. //-1代表障碍物
  172. let _buildIdSolid = -1;
  173. let length = objects.length;
  174. for (let i = 0; i < length; i++) {
  175. let areaX = objects[i].areaX;
  176. let areaY = objects[i].areaY;
  177. for (let j = 0; j < areaX; j++) {
  178. for (let k = 0; k < areaY; k++) {
  179. let _tilePos = cc.v2(objects[i].startTiledX + j, objects[i].startTiledY + k);
  180. let solidIndex = this.getIndex(_tilePos);
  181. // this.sliblingIndexArray.push(cc.v2(item.node.getSiblingIndex(), buildIndex));
  182. //地图设置障碍物
  183. AStar.setMapSolid(_tilePos.x, _tilePos.y, 1);
  184. // if (objects[i].name == 'TreeBarrier') {
  185. // let BarrierTemp = cc.instantiate(this.BarrierPrefab);
  186. // BarrierTemp.parent = this.MyMapNode;
  187. // let tiledTile = BarrierTemp.addComponent('TiledTile');
  188. // tiledTile.x = _tilePos.x;
  189. // tiledTile.y = _tilePos.y;
  190. // GlobalD.game.onUpdateVertexZFromZIndex(BarrierTemp, _tilePos);
  191. // }
  192. let occupyTemp = cc.v2(_buildIdSolid, solidIndex);
  193. GlobalD.game.OccupyArray.push(occupyTemp);
  194. // console.log('objectGroup objects= ',objects[i].id,targetPosition);
  195. }
  196. }
  197. }
  198. // //栏杆对象
  199. // let _buildIdRailing = -2;
  200. // let RailingXLayer = this._tiledMap.getLayer('RailingX');
  201. // let RailingYLayer = this._tiledMap.getLayer('RailingY');
  202. // RailingXLayer.enabled = false;
  203. // RailingYLayer.enabled = false;
  204. // // let RailingLayer = this._tiledMap.getLayer('Railing');
  205. // // RailingLayer.enabled = false;
  206. // for (let i = 0; i < 32; i++) {
  207. // for (let j = 0; j < 32; j++) {
  208. // let _tilesPos = cc.v2(i, j);
  209. // if (RailingXLayer.getTileGIDAt(_tilesPos)) {
  210. // let solidIndex = this.getIndex(_tilesPos);
  211. // let railingXTemp = cc.instantiate(this.RailingXPrefab);
  212. // railingXTemp.parent = this.MyMapNoActivationNode;
  213. // let tiledTile = railingXTemp.addComponent('TiledTile');
  214. // tiledTile.x = _tilesPos.x;
  215. // tiledTile.y = _tilesPos.y;
  216. // let occupyTemp = cc.v2(_buildIdRailing, solidIndex);
  217. // GlobalD.game.OccupyArray.push(occupyTemp);
  218. // }
  219. // if (RailingYLayer.getTileGIDAt(_tilesPos)) {
  220. // let solidIndex = this.getIndex(_tilesPos);
  221. // let railingYTemp = cc.instantiate(this.RailingYPrefab);
  222. // railingYTemp.parent = this.MyMapNoActivationNode;
  223. // let tiledTile = railingYTemp.addComponent('TiledTile');
  224. // tiledTile.x = _tilesPos.x;
  225. // tiledTile.y = _tilesPos.y;
  226. // let occupyTemp = cc.v2(_buildIdRailing, solidIndex);
  227. // GlobalD.game.OccupyArray.push(occupyTemp);
  228. // }
  229. // if (RailingLayer.getTileGIDAt(_tilesPos)) {
  230. // let railingYTemp = cc.instantiate(this.RailingYPrefab);
  231. // railingYTemp.parent = this.MyMapNoActivationNode;
  232. // let tiledTile = railingYTemp.addComponent('TiledTile');
  233. // tiledTile.x = _tilesPos.x;
  234. // tiledTile.y = _tilesPos.y;
  235. // }
  236. // }
  237. // }
  238. },
  239. //根据tiled坐标清除指定栏杆
  240. onClearRailingFromTilesPos(_regionIndex) {
  241. // cc.log('onClearRailingFromTilesPos', _regionIndex);
  242. var objectGroup = this._tiledMap.getObjectGroup('Region');
  243. let objects = objectGroup.getObjects();
  244. //-1代表障碍物
  245. let _buildIdRailing = -2;
  246. let length = objects.length;
  247. for (let i = 0; i < length; i++) {
  248. if (objects[i].name == 'Region' + _regionIndex) {
  249. // cc.log('清除区域是:', objects[i]);
  250. let areaX = objects[i].areaX;
  251. let areaY = objects[i].areaY;
  252. let startX = objects[i].startTiledX;
  253. let startY = objects[i].startTiledY;
  254. for (let j = 0; j < areaX; j++) {
  255. for (let k = 0; k < areaY; k++) {
  256. // cc.log('清除区域是2:', startX,startY);
  257. let _tilePos = cc.v2(startX + j, startY + k);
  258. let solidIndex = this.getIndex(_tilePos);
  259. //清除栏杆节点
  260. let children = this.MyMapNoActivationNode.children;
  261. let length = children.length;
  262. for (let i = 0; i < length; i++) {
  263. if (cc.isValid(children[i]) && children[i].getComponent('TiledTile').x == _tilePos.x
  264. && children[i].getComponent('TiledTile').y == _tilePos.y) {
  265. children[i].destroy();
  266. }
  267. }
  268. //清除占位信息
  269. let occupyArray = GlobalD.game.OccupyArray;
  270. let length1 = occupyArray.length;
  271. for (let i = length1 - 1; i >= 0; i--) {
  272. if (occupyArray[i].y == solidIndex && occupyArray[i].x == _buildIdRailing) {
  273. GlobalD.game.OccupyArray.splice(i, 1);
  274. }
  275. }
  276. }
  277. }
  278. }
  279. }
  280. },
  281. //根据屏幕坐标获取瓷砖块坐标
  282. _tilePosFromLocation(location) {
  283. //mapsize 目前是50*50
  284. var mapSize = this._tiledMap.getMapSize();
  285. //tilesize 目前是100*50
  286. var tileSize = this._tiledMap.getTileSize();
  287. // 触摸的位置信息必须减去瓷砖地图的位置信息,因为地图的位置可能在滚动变化
  288. var pos = new cc.v2();
  289. pos.x = location.x - this._tiledMap.node.getPosition().x;
  290. pos.y = location.y - this._tiledMap.node.getPosition().y;
  291. var halfMapWidth = mapSize.width * 0.5;
  292. var mapHeight = mapSize.height;
  293. var tileWidth = tileSize.width;
  294. var tileHeight = tileSize.height;
  295. //偏移量
  296. var tilePosDiv = cc.v2(pos.x / tileWidth, pos.y / tileHeight);
  297. var inverseTileY = mapHeight - tilePosDiv.y;
  298. // 将得到的计算结果转换成 int,以确保得到的是整数
  299. var posX = parseInt(inverseTileY + tilePosDiv.x - halfMapWidth);
  300. var posY = parseInt(inverseTileY - tilePosDiv.x + halfMapWidth);//****** */Anchor
  301. //外围不可活动区域的瓷砖块数
  302. var borderSize = 0;
  303. //最小活动区域
  304. var playableAreaMin = cc.v2(borderSize, borderSize);
  305. var playableAreaMax = cc.v2(this._tiledMap.getMapSize().width - 1 - borderSize, this._tiledMap.getMapSize().height - 1 - borderSize);
  306. let DeMinX = this.DynamicMinBoundary.x > 1 ? this.DynamicMinBoundary.x - 1 : 0;
  307. let DeMinY = this.DynamicMinBoundary.y > 1 ? this.DynamicMinBoundary.y - 1 : 0;
  308. // 确保坐标在MAP范围内
  309. posX = Math.max(playableAreaMin.x + DeMinX, posX);
  310. posX = Math.min(playableAreaMax.x, posX);
  311. posY = Math.max(playableAreaMin.y + DeMinY, posY);
  312. posY = Math.min(playableAreaMax.y, posY);
  313. // this.Show.string = "(" + posX + "," + posY + ")";
  314. return cc.v2(posX, posY);
  315. },
  316. //把tile坐标转换成屏幕坐标
  317. _locationFromtilePos(tilePos) {
  318. var halfMapWidth = this._tiledMap.getMapSize().width * 0.5;
  319. var mapHeight = this._tiledMap.getMapSize().height;
  320. var tileWidth = 0.0;
  321. var tileHeight = 0.0;
  322. tileWidth = this._tiledMap.getTileSize().width;
  323. tileHeight = this._tiledMap.getTileSize().height;
  324. var tilePosDiv = new cc.v2();
  325. var pos = new cc.v2();
  326. tilePosDiv.y = mapHeight - (tilePos.x + tilePos.y) / 2;
  327. tilePosDiv.x = (tilePos.x - tilePos.y) / 2 + halfMapWidth;//***** */Anchor
  328. pos.x = tilePosDiv.x * tileWidth;
  329. pos.y = tilePosDiv.y * tileHeight;
  330. var outpos = new cc.v2();
  331. outpos.x = pos.x + this._tiledMap.node.getPosition().x;
  332. outpos.y = pos.y + this._tiledMap.node.getPosition().y;
  333. return outpos;
  334. },
  335. //获取tilePos坐标对应的图块居中的位置
  336. getblockInTheMiddle(tilePos) {
  337. let getOriPos = this._locationFromtilePos(tilePos);
  338. // 图块的大小是(165,96)
  339. //我们计算的点事顶点为起始点,所以y轴要减去图块的一半。
  340. return cc.v2(getOriPos.x, getOriPos.y - 48);
  341. },
  342. //获取tilePos坐标对应的图块居中的位置
  343. _getTheMiddleLocationFromtilePos(tilePos) {
  344. let getOriPos = this._locationFromtilePos(tilePos);
  345. // 图块的大小是(165,96)
  346. //我们计算的点事顶点为起始点,所以y轴要减去图块的一半。
  347. return cc.v2(getOriPos.x, getOriPos.y - 48);
  348. },
  349. /**
  350. * 通过指定的 tile 坐标获取对应的 TiledTile。 <br/>
  351. * @method getTiledTileAt
  352. * @param {Integer} x
  353. * @param {Integer} y
  354. * @param {[TiledTile]} tiledsArray
  355. * @return {TiledTile}
  356. */
  357. getTiledTileAt(x, y, tiledsArray) {
  358. let index = Math.floor(x) + Math.floor(y) * this._tiledMap.getMapSize().width;
  359. let tile = null;
  360. if (tiledsArray) {
  361. tile = tiledsArray[index];
  362. } else {//如果不存在,默认获取已保存的数组
  363. tile = this._highwayIndex[index];
  364. }
  365. cc.log('tile', tile);
  366. if (tile) {
  367. return tile;
  368. } else {
  369. return false;
  370. }
  371. },
  372. /**
  373. * 替换为指定的 TiledTile。
  374. * @method setTiledTile
  375. * @param {TiledTile} tiledTile
  376. * @param {[TiledTile]} tiledsArray
  377. * @return {TiledTile}
  378. */
  379. setTiledTile(tiledTile, tiledsArray) {
  380. let index = Math.floor(tiledTile.x) + Math.floor(tiledTile.y) * this._tiledMap.getMapSize().width;
  381. let node = cc.instantiate(tiledTile.node);
  382. if (tiledsArray) {
  383. return tiledsArray[index] = node.getComponent('TiledTile');
  384. } else {//如果不存在,默认获取已保存的数组
  385. return this._highwayIndex[index] = node.getComponent('TiledTile');
  386. }
  387. },
  388. /**
  389. * 存储一个index 值到目标数组。analyticalX 存在的话,保存对应的x值
  390. * @method setIndexArray
  391. * @param {vec2} vector2
  392. * @param {[IndexArray]} indexArray
  393. * @return {IndexArray}
  394. */
  395. setIndexArray(vector2, indexArray) {
  396. let index = Math.floor(vector2.x) + Math.floor(vector2.y) * this._tiledMap.getMapSize().width;
  397. indexArray.push(index);
  398. return indexArray;
  399. },
  400. /**
  401. * 计算一个index 并返回
  402. * @method getIndex
  403. * @param {vec2} vector2
  404. * @return {index}
  405. */
  406. getIndex(vector2) {
  407. let index = Math.floor(vector2.x) + Math.floor(vector2.y) * this._tiledMap.getMapSize().width;
  408. return index;
  409. },
  410. /**
  411. * 判断是否存在一个值在目标数组。
  412. * @method getIndexArrayAt
  413. * @param {vec2} vector2
  414. * @param {[IndexArray]} indexArray
  415. * @return {Boolean}
  416. */
  417. getIndexArrayAt(vector2, indexArray) {
  418. let index = Math.floor(vector2.x) + Math.floor(vector2.y) * this._tiledMap.getMapSize().width;
  419. let length = indexArray.length;
  420. // let isHas = false;
  421. for (let i = 0; i < length; i++) {
  422. if (index == indexArray[i]) {
  423. // isHas = true;
  424. // break;
  425. return true;
  426. }
  427. }
  428. return false;
  429. },
  430. /**
  431. * 解析一个indexArray数组。
  432. * @method analyticalIndexArrayData
  433. * @param {[IndexArray]} indexArray
  434. * @return {[cc.Vec2]]}
  435. */
  436. analyticalIndexArrayData(indexArray) {
  437. let width = this._tiledMap.getMapSize().width;
  438. let length = indexArray.length;
  439. let out = [];
  440. for (let i = 0; i < length; i++) {
  441. //向下取整
  442. let Y = Math.floor(indexArray[i] / width);
  443. //取余数
  444. //cc.log('2130%50 ============',2499%50, Math.floor(2499/50));
  445. let X = indexArray[i] % width;//indexArray[i] - Y*width;
  446. out.push(new cc.Vec2(X, Y));
  447. }
  448. return out;
  449. },
  450. /**
  451. * 解析一个index。
  452. * @method analyticalIndexArrayData
  453. * @param {Index} index
  454. * @return {[cc.Vec2]]}
  455. */
  456. analyticalIndexData(index) {
  457. let width = this._tiledMap.getMapSize().width;
  458. //向下取整
  459. let Y = Math.floor(index / width);
  460. //取余数
  461. let X = index % width;//index[i] - Y*width;
  462. return new cc.Vec2(X, Y);
  463. }
  464. });