【Cocos Creator实战教程(3)】——TiledMap(瓦片地图)组件

lili

发布日期: 2018-11-24 18:06:17 浏览量: 2522
评分:
star star star star star star star_border star_border star_border star_border
*转载请注明来自write-bug.com

1. 前言

瓦片地图是由一张一张的正方形小图片拼接成的地图,例如炸弹人,QQ堂都是非常典型的瓦片游戏。瓦片地图(Tile Map) 不但生成简单,并且可以灵活的用于Cocos2d-x引擎。不论你的游戏是角色扮演游戏, 平台动作游戏或仿打砖块游戏,这些游戏地图可以使用开源的瓦片地图编辑器Tiled Map Editor生成并保存为TMX文件格式,被Cocos2d-x支持。

2. 步骤

2.1 安装Tiled Map Editor

edit(编辑)->preferences(参数)里面可以设置语言

2.2 TiledMap制作

新建一张地图

建立三个图层和一个对象层并将资源图块导入 (最下面的图层将显示在最下面)

  • ground层:用ground图块填充满(按住鼠标左键)

  • barriers层:用barrier图块

  • stars层:用star图块

最终效果如下图

选择players对象层,在如图位置插入两个图块对象,并更改名称如图

给星星添加一个属性

保存为tmx文件,和图片文件放在一起

2.3 Cocos Creator中使用TiledMap:

  • 新建一个TiledMapTest工程,创建一个Game场景

  • 将刚才生成的tmx文件和相关图片一起添加到工程

  • 将map.tmx文件拖入层级管理器或者属性编辑器,就会自动生成map节点以及其子节点(也就是图层节点)【没有对象层节点】

  • 最后将player(安卓小机器人)图片拖入(位置随意),创建player节点,并使其为map节点的子节点。

  • 调整map和player节点的锚点都为(0,0)也就是左下角

  • 创建map.js脚本添加到map节点

  1. cc.Class({
  2. extends: cc.Component,
  3. properties: {
  4. },
  5. // use this for initialization
  6. onLoad: function () {
  7. this.player = this.node.getChildByName('player');
  8. this.loadMap();
  9. cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);
  10. },
  11. onKeyDown:function(event){
  12. var newTile = cc.p(this.playerTile.x, this.playerTile.y);
  13. switch(event.keyCode) {
  14. case cc.KEY.up:
  15. newTile.y -= 1;
  16. break;
  17. case cc.KEY.down:
  18. newTile.y += 1;
  19. break;
  20. case cc.KEY.left:
  21. newTile.x -= 1;
  22. break;
  23. case cc.KEY.right:
  24. newTile.x += 1;
  25. break;
  26. default:
  27. return;
  28. }
  29. this.tryMoveToNewTile(newTile);
  30. },
  31. //加载地图文件时调用
  32. loadMap: function () {
  33. //初始化地图位置
  34. this.node.setPosition(cc.visibleRect.bottomLeft);
  35. //地图
  36. this.tiledMap = this.node.getComponent(cc.TiledMap);
  37. //players对象层
  38. let players = this.tiledMap.getObjectGroup('players');
  39. //startPoint和endPoint对象
  40. let startPoint = players.getObject('startPoint');
  41. let endPoint = players.getObject('endPoint');
  42. //像素坐标
  43. let startPos = cc.p(startPoint.offset.x, startPoint.offset.y);
  44. let endPos = cc.p(endPoint.offset.x, endPoint.offset.y);
  45. //障碍物图层和星星图层
  46. this.barriers = this.tiledMap.getLayer('barriers');
  47. this.stars = this.tiledMap.getLayer('stars');
  48. //出生Tile和结束Tile
  49. this.playerTile = this.startTile = this.getTilePos(startPos);
  50. this.endTile = this.getTilePos(endPos);
  51. //更新player位置
  52. this.updatePlayerPos();
  53. },
  54. tryMoveToNewTile: function(newTile) {
  55. let width = this.tiledMap.node.width;
  56. let height = this.tiledMap.node.height;
  57. if (newTile.x < 0 || newTile.x >= width) return;
  58. if (newTile.y < 0 || newTile.y >= height) return;
  59. if (this.barriers.getTileGIDAt(newTile)) {//GID=0,则该Tile为空
  60. cc.log('This way is blocked!');
  61. return false;
  62. }
  63. this.tryCatchStar(newTile);
  64. this.playerTile = newTile;
  65. this.updatePlayerPos();
  66. if (cc.pointEqualToPoint(this.playerTile, this.endTile)) {
  67. cc.log('succeed');
  68. }
  69. },
  70. tryCatchStar: function(newTile){
  71. let GID = this.stars.getTileGIDAt(newTile);
  72. let prop = this.tiledMap.getPropertiesForGID(GID);
  73. if (this.stars.getTileGIDAt(newTile)) {//GID=0,则该Tile为空
  74. this.stars.removeTileAt(newTile);
  75. }
  76. },
  77. //将像素坐标转化为瓦片坐标
  78. getTilePos: function(posInPixel) {
  79. let mapSize = this.node.getContentSize();
  80. let tileSize = this.tiledMap.getTileSize();
  81. let x = Math.floor(posInPixel.x / tileSize.width);
  82. let y = Math.floor(posInPixel.y / tileSize.height);
  83. return cc.p(x, y);
  84. },
  85. updatePlayerPos: function() {
  86. let pos = this.barriers.getPositionAt(this.playerTile);
  87. this.player.setPosition(pos);
  88. },
  89. });

最终如下图:

3. 总结

  1. #CC.TiledMap:
  2. ~properties:
  3. tmxFile//地图文件
  4. mapLoaded//地图加载是调用的函数
  5. ~function:
  6. getMapSize()//
  7. setMapSize()//
  8. getTileSize()//
  9. setTileSize()//
  10. getLayer(name)//returns TieldLayer
  11. getObjectGroup(name)//returns TMXObjectGroup
  12. getPropertiesForGID(GID)//returns Object(属性字典)
  13. #CC.TieldLayer
  14. getPositionAt(pos)//returns Vec2(像素坐标) 参数是瓦片坐标
  15. removeTileAt(pos)//瓦片坐标
  16. getTileGIDAt(pos)//returns Number(全局唯一标识,0为空)
  17. getTileAt(pos)//returns _ccsg.Sprite //removeChild(sprite);
  18. setTileGID(gidpos)//相当于在pos位置添加GID的图块(原来的图块删除)
  19. getTileSize()//
  20. setTleSize()//
  21. getMapTileSize()
  22. #TMXObjectGroup:
  23. ~properties:
  24. ~function:
  25. var getObject(var objectName)//返回属性字典
  26. #_ccsg.Sprite://cocos js 里的Sprite,继承自CC.Node,而不是组件
  27. ~properties
  28. x
  29. y
  30. width
  31. height
  32. opacity
  33. ...//节点的属性都有
  34. ~function:
  35. var setSpriteFrame(var spriteFrameName)
  36. var runAction(var action)
  37. ...//节点的方法都有
  • 图块放置的位置是基于像素坐标,而图块在map中的索引是基于瓦片坐标(整数),所以在脚本文件中要适时转变

  • 对象层的对象(比如我们上面做的两个player point),在Cocos Creator中是不会显示的

  • 对象层记录的是位置信息,图层记录的是图片信息

  • .tmx文件其实保存的图块的一种映射关系,所以图块文件和地图文件要始终放在一起,不然可能会显示出错

  • GID是图块在一个地图文件中的唯一ID,(图块指的是右下角的图块文件,每一个图块都不相同,瓦片指的指地图中的块,可以是相同的图块),GID为0说明该Tile的图块为空

  • 当利用getPropertiesForGID(GID)之类的方法时,得到的返回值是属性字典,可以直接通过点方法得到其属性值,属性值都是字符串类型

  • 当用到getTileAt(pos)时,得到的返回值是Cocos2d 的Sprite,而不是Cocos Creator的Sprite,相关方法可以查找Cocos2d js的API,需要注意的一点是,Cocos2d的Sprite是继承自节点的,而不是组件式,所以我们可以直接这样写“mySprite.x = 100”而不是“mySprite.node.x = 100”

  • 地图中同一层只能使用一张图集里的图块

注意:本教程资源部分来源于网络

上传的附件 cloud_download cocos creator第三课.zip ( 13.88mb, 62次下载 )
eject