CocosCreator知识库<二>关于TiledMap的系统学习教程(阶段性更新)
2017-12-26 10:31
567 查看
CocosCreator知识库<二>关于TiledMap的系统学习教程<26/12/2017>(长期更新,看不懂先大致总体搞一遍,然后回头细看)
TiledMap官网:(不收费,点击Nothanks免费下载最新版)[b] 传送门:http://www.mapeditor.org/[/b]
推荐教程<零>TiledMap瓦片地图(potato47)
传送门:http://blog.csdn.net/potato47/article/details/51366481
基础教程<一>基础功能+地形功能
传送门:http://blog.csdn.net/firseve/article/details/50789526
进阶教程<二>动画效果
[b] 传送门:http://blog.csdn.net/firseve/article/details/50952100[/b]
进阶教程<三>TiledMap坐标转换(认识TiledMap的三种地图类型)
[b] 传送门:http://blog.csdn.net/z104207/article/details/46873429[/b]
进阶教程<四>详细的45度角坐标计算
[b] 传送门:http://blog.csdn.net/jianglong0156/article/details/52700551[/b]
常用方法汇总:
#CC.TiledMap:***************************************** ~properties: tmxFile//地图文件 mapLoaded//地图加载是调用的函数 ~function: getMapSize()// setMapSize()// getTileSize()// setTileSize()// getLayer(name)//returns TieldLayer getObjectGroup(name)//returns TMXObjectGroup getPropertiesForGID(GID)//returns Object(属性字典) #CC.TieldLayer ******************************************** getPositionAt(pos)//returns Vec2(像素坐标) 参数是瓦片坐标 removeTileAt(pos)//瓦片坐标 getTileGIDAt(pos)//returns Number(全局唯一标识,0为空) getTileAt(pos)//returns _ccsg.Sprite //removeChild(sprite); setTileGID(gid,pos)//相当于在pos位置添加GID的图块(原来的图块删除) getTileSize()// setTleSize()// getMapTileSize() #TMXObjectGroup: ****************************************** ~properties: ~function: var getObject(var objectName)//返回属性字典 #_ccsg.Sprite://cocos js 里的Sprite,继承自CC.Node,而不是组件 ~properties: x y width height opacity ...//节点的属性都有 ~function: var setSpriteFrame(var spriteFrameName) var runAction(var action) ...//节点的方法都有
<坦克大战项目>TiledMap相关部分填坑:(详情请见博主原博客)
[b] 关于之前的坦克大战,主要是在GameManager里面初始化的(提前将对应的.tmx地图文件拖入场景之中)[/b]
在TiledMap中进行编辑完层后,各层对应关系如图:
在TiledMap编辑器中完成的层级关系简单说明:
从资源管理器中拖入编辑好的单个.tmx文件会自动解析并生成对应结构(可对比上方TiledMap中编辑的层级结构,很方便!)
为什么要排列好层级顺序?因为可以产生层级效果:
然后实际效果如图
接下来我们从坦克大战代码中提取仅仅与TiledMap地图生成创建判断相关的代码块做展示和研究:
GameManager中与TiledMap相关的部分:(导入数据并解析地图,通过坐标转换,然后完成碰撞墙壁侦测)[重点:内部碰撞方法中对基地爆炸碰撞检测的部分,涉及核心知识]
var Game = cc.Class({ extends: cc.Component, properties: { //地图 curMap: cc.TiledMap, }, // use this for initialization onLoad: function () { //获取地图 TiledMap 组件 this._tiledMap = this.curMap.getComponent('cc.TiledMap'); }, start: function (err) { if (err) { return; } //引入地图数据 this._tiledMapData = require("TiledMapData"); //获取地图尺寸 this._curMapTileSize = this._tiledMap.getTileSize(); this._curMapSize = cc.v2(this._tiledMap.node.width, this._tiledMap.node.height); // 地图墙层 this.mapLayer0 = this._tiledMap.getLayer("layer_0"); //获取组件 this.tankNode = cc.find("/Canvas/Map/tank"); }, //碰撞检测(与TiledMap相关,准备注释) collisionTest: function (rect, bullet) { //判断是否碰到地图边界 if (rect.xMin <= -this._curMapSize.x / 2 || rect.xMax >= this._curMapSize.x / 2 || rect.yMin <= -this._curMapSize.y / 2 || rect.yMax >= this._curMapSize.y / 2) { return true; } //判断是否撞墙 //将坐标转换为地图坐标系 var MinY = this._curMapSize.y / 2 - rect.yMin; var MaxY = this._curMapSize.y / 2 - rect.yMax; var MinX = this._curMapSize.x / 2 + rect.xMin; var MaxX = this._curMapSize.x / 2 + rect.xMax; //获取四个角的顶点 var LeftDown = cc.v2(MinX, MinY); var RightDown = cc.v2(MaxX, MinY); var LeftUp = cc.v2(MinX, MaxY); var RightUp = cc.v2(MaxX, MaxY); //获取四条边的中心点 var MidDown = cc.v2(MinX + (MaxX - MinX) / 2, MinY); var MidUp = cc.v2(MinX + (MaxX - MinX) / 2, MaxY); var MidLeft = cc.v2(MinX, MinY + (MaxY - MinY) / 2); var MidRight = cc.v2(MaxX, MinY + (MaxY - MinY) / 2); //检测碰撞 return this._collisionTest([LeftDown, RightDown, LeftUp, RightUp, MidDown, MidUp, MidLeft, MidRight ], bullet); //内部碰撞检测方法 _collisionTest: function (points, bullet) { var point = points.shift() var gid = this.mapLayer0.getTileGIDAt(cc.v2(parseInt(point.x / this._curMapTileSize.width), parseInt(point.y / this._curMapTileSize.height))); if (this._tiledMapData.gidToTileType[gid] != this._tiledMapData.tileType.tileNone && this._tiledMapData.gidToTileType[gid] != this._tiledMapData.tileType.tileGrass) { if (bullet && this._tiledMapData.gidToTileType[gid] == this._tiledMapData.tileType.tileKing) { //基地 this.scheduleOnce(function () { this.gameOver.active = true; }, 1.5); this.scheduleOnce(function () { cc.director.loadScene("StartScene"); this.socket.emit("gameover"); }, 3); this.mapLayer0.setTileGID(25, 12, 24); this.mapLayer0.setTileGID(26, 13, 24); this.mapLayer0.setTileGID(31, 12, 25); this.mapLayer0.setTileGID(32, 13, 25); } if (bullet && this._tiledMapData.gidToTileType[gid] == this._tiledMapData.tileType.tileWall) { //墙 this.mapLayer0.removeTileAt(cc.v2(parseInt(point.x / this._curMapTileSize.width), parseInt(point.y / this._curMapTileSize.height))); } return true; } if (points.length > 0) { return this._collisionTest(points, bullet); } else { return false; } }, },
Bullet脚本中与TiledMap相关的部分:(主要是用到了GameManager里面侦测墙壁的方法,并且传入了子弹的boundingbox包围盒做参数)
cc.Class({ extends: cc.Component, onLoad: function () { //获取组件 this._cityCtrl = cc.find("/GameManager").getComponent("GameManager"); this.bulletNode = cc.find("/Canvas/Map/bullet"); }, stepUpdate: function (dt, stepTime) { if (!this.stopMove) { //返回父节坐标系下的轴向对齐的包围盒 var boundingBox = this.node.getBoundingBox(); //该方法用来快速创建一个新的矩形 var a = new cc.Rect(0 , 0, 10, 0); var rect = cc.rect(boundingBox.xMin + this.offset.x * this.speed * dt * 1.5, boundingBox.yMin + this.offset.y * this.speed * dt * 1.7, boundingBox.size.width, boundingBox.size.height); if (this._cityCtrl.collisionTest(rect) //检测与地图的碰撞 || //上下侦测满足其一则执行 this.collisionTank(rect) //检测与坦克的碰撞 ) { this.tankMoveStop(); //如果发生碰撞立即停止坦克行动 } else { //如果没有发生碰撞,继续按照原有的偏移量和速度进行移动 this.node.x += this.offset.x * this.speed * dt; this.node.y += this.offset.y * this.speed * dt; } } }, });
TiledMapData脚本:(用来枚举TiledMap地图数据类型相关信息)
var _tileType = cc.Enum({ tileNone: 0, tileGrass: 1, tileSteel: 2, tileWall: 3, tileRiver: 4, tileKing: 5 }); //gid从1开始 var _gidToTileType = [ _tileType.tileNone, //从1开始,这个不算 _tileType.tileNone, _tileType.tileNone, _tileType.tileGrass, _tileType.tileGrass, _tileType.tileSteel, _tileType.tileSteel, _tileType.tileNone, _tileType.tileNone, _tileType.tileGrass, _tileType.tileGrass, _tileType.tileSteel, _tileType.tileSteel, _tileType.tileWall, _tileType.tileWall, _tileType.tileRiver, _tileType.tileRiver, _tileType.tileKing, _tileType.tileKing, _tileType.tileWall, _tileType.tileWall, _tileType.tileRiver, _tileType.tileRiver, _tileType.tileKing, _tileType.tileKing, _tileType.tileFalseKing, _tileType.tileFalseKing, _tileType.tileNone, _tileType.tileNone, _tileType.tileNone, _tileType.tileNone, _tileType.tileFalseKing, _tileType.tileFalseKing, _tileType.tileNone, _tileType.tileNone, _tileType.tileNone, _tileType.tileNone ]; module.exports = { tileType: _tileType, gidToTileType: _gidToTileType };下图为解析上面TiledMapData脚本:(这个部分结合上面脚本中内部碰撞侦测方法理解比较好)
要点补充,对于已经编辑好的地图进行素材更换:
下列这些必须完全一致,排列顺序也一样:
以上!
相关文章推荐
- CocosCreator项目学习系列<二>关于Button(添加事件)输入控制交互条件的触发_实现虚拟按钮控制_JavaScript
- STM32系统中应用的动态加载可行性研究过程之JavaScript语言的学习<二>
- CocosCreator知识库<三>关于CocosCreator中更换图片的三种方式_通用方式_"当前"尺寸_"原有"尺寸
- 寒假关于计算机课程的学习计划(第二次作业<二>)
- python模块之paramiko学习<二>
- html系统学习之三 <表格,列表,表单>
- html系统学习之二 <样式,锚>
- ubuntu学习笔记<二>
- 反射整理学习<二>
- Linux之设备驱动学习简过程<二>
- SQL 学习笔记<五> 数据更新
- html系统学习之八 <学习体会>
- PostgreSQL学习手册(客户端命令<二>)
- HtmlUnit学习<二>
- 学习笔记<二>动态图层的制作,地图Behaviors和Actions的添加
- 关于怎样使用three.js的小教程<一>
- WPF学习笔记<二>数据绑定
- linux基础学习<二>
- Mule 学习系列<二> File Transport
- <yii 框架学习> <转> 关于yii数据库添加新字段之后model类的修改