CocosCreator知识库amp;amp;lt;二amp;amp;gt;关于TiledMap的系统学习教程(阶段性更新)
CocosCreator知识库<二>关于TiledMap的系统学习教程<26/12/2017>(长期更新,看不懂先大致总体搞一遍,然后回头细看)
TiledMap官网:(不收费,点击Nothanks免费下载最新版)
传送门:http://www.mapeditor.org/
推荐教程<零>TiledMap瓦片地图(potato47)
传送门:http://blog.csdn.net/potato47/article/details/51366481
基础教程<一>基础功能+地形功能
传送门:http://blog.csdn.net/firseve/article/details/50789526
进阶教程<二>动画效果
传送门:http://blog.csdn.net/firseve/article/details/50952100
进阶教程<三>TiledMap坐标转换(认识TiledMap的三种地图类型)
传送门:http://blog.csdn.net/z104207/article/details/46873429
进阶教程<四>详细的45度角坐标计算
传送门:http://blog.csdn.net/jianglong0156/article/details/52700551
常用方法汇总:
#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相关部分填坑:(详情请见博主原博客)
关于之前的坦克大战,主要是在GameManager里面初始化的(提前将对应的.tmx地图文件拖入场景之中)
在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知识库amp;amp;lt;二amp;amp;gt;关于TiledMap的系统学习教程(阶段性更新)相关推荐
- 猴赛礼™二维码礼品卡券提货兑换系统使用教程
猴赛礼™二维码礼品卡券提货兑换系统使用教程 欢迎使用猴赛礼二维码提货系统 商户后台登录密码的修改 添加产品信息 卡券分类创建以及绑定产品 批量添加提货码(兑换码) 导出提货卡号和密码数据 大闸蟹提货卡 ...
- java学mybatis还用学jdbc吗,mybatis系统学习(二)——使用基础mybatis代替原始jdbc
mybatis系统学习(二)--使用基础mybatis代替原始jdbc 前言 这一篇笔记的内容应当是建立在上一篇的基础之上,不论是使用的数据表,还是对应的实体类,都在上一篇有过说明. 有兴趣的或者对相 ...
- linux中ftp的工作原理,Linux系统学习 十二、VSFTP服务—简介与原理
1.简介与原理 互联网诞生之初就存在三大服务:WWW.FTP.邮件 FTP主要针对企业级,可以设置权限,对不同等级的资料针对不同权限人员显示. 但是像网盘这样的基本没有权限划分. 简介: FTP(Fi ...
- 用c#二次开发的焊锡检测视觉系统
用c#二次开发的焊锡检测视觉系统 (适合新手学习) 1:该程序属于简单的视觉检测项目. 单相机版本. 2:支持串口通讯,生产数据统计,焊点检测. 3:提供视觉源码,及原图,可直接仿真使用. 4:比较经 ...
- 群晖NAS教程(二十一)、利用Docker安装DDNS动态域名解析,自动更新域名解析到公网IP(支持阿里云、腾讯云dnspod、Cloudflare、华为云)
群晖NAS教程(二十一).利用Docker安装DDNS动态域名解析,自动更新域名解析到公网IP(支持阿里云.腾讯云dnspod.Cloudflare.华为云) 为了更好的浏览体验,欢迎光顾勤奋的凯尔森 ...
- Hadoop3.x学习教程(二)
Hadoop3.x学习教程(二) 1.完全分布式运行模式(开发重点) 1.1.编写集群分发脚本 1.2.SSH免密登陆配置 1.3.集群配置 1.4.群起集群 1.完全分布式运行模式(开发重点) 1. ...
- 少儿编程Scratch学习教程5--基本操作(二)动画例子
本篇介绍下动画相关例子 1.表情的转换 首先创建一个精灵角色 之后在外观选项中,选择"将造型切换为...",这样就可以在特定情况下就可以更换造型了 添加一个事件,当按下" ...
- 最新云豹二开直/播短视频完整系统源码+带开发文档/教程
正文: 最新云豹二开直/播短视频完整系统源码+带开发文档/教程,好友给我分享的,属于云豹二开,功能非常的强大,且有非常完整的开发文档和教程. 但是说实话这类程序不属于好部署的那一种,比较吃一定的技术, ...
- 玩转群晖NAS套件系列二:synology Drive的安装使用保姆级教程!
本章介绍: 上一章节我们讲解<玩转群晖NAS套件系列一:cloud sync套件的安装与使用保姆级教程!>,此教程堪称史上手把手的保姆教程,受到广大网友的一致好评, 今天在这里介绍syno ...
最新文章
- SpringBoot数据访问配置
- sumk跟spring boot的比较
- python源码精要(4)-C代码规范
- java打jar包的方式,jar命令,maven
- 按值传递和按引用传递的区别_c++按值、地址、引用传递参数
- 通过一个最简单的程序入门Windows编程
- 基于chrome内核的微软Edge浏览器~
- Python基础视频教程
- CAD中把样条曲线改成多线段(转载请删除括号里的内容)
- 【Unity 手写PBR】补充:多光源 阴影 视差 自发光
- 无线网密码修改好了无法连接服务器,无线路由器修改密码后电脑无法上网如何解决...
- 2018年世界杯冠军竟然被大数据算出来了,还要比吗?
- Unity3d开发之二十:闪电
- 基于Autocad 2016,与 CASS10 无缝整合的地下管线成图系统
- 汽车的一些简写名词(后续会继续更新)
- spring中的事件监听机制
- CMDB 腾讯云部分实现
- localhost 访问不跨域 但 127.0.0.1 访问跨域,你知道为什么吗
- onenote 使用_使用OneNote使记忆信息更容易
- day02 美女选妃
热门文章
- 生活记录:其实超度的是活着的人
- mac上通过自动操作达到右键通过vscode打开文件、文件夹
- svn: E170013: Unable to connect to a repository at URL ...
- 计算机评游戏图形低,5常见的PC游戏图形选项说明 | MOS86
- 转载--[数据库] MySQL汉字字段按拼音排序
- Learning English in python
- 【论文】Saliency Detection: A Spectral Residual Approach阅读笔记
- 晶莹剔透的泪珠不停地悄然滑
- MOOC慕课进入课程后无法刷新出视频、作业等界面
- Android USB系统(一)