Cocos Creator Tiledmap——入门知识整理


本文由 简悦 SimpRead 转码, 原文地址 www.jianshu.com

现在网上很多资料都比较旧了,某些 api 也失效了,故整理出这篇文章,方便自己复习和大家查资料用。
先贴上 cocos creator 中关于 tiledmap 的官网 api 文档
http://www.cocos.com/docs/creator/api/classes/TiledMap.html

以下是通过开发实践以及网上资料整理出的相关知识

· 获得图层

//map: cc.TiledMap
var layer = this.map.getLayer('图层名');

· 图块、瓦片坐标和像素坐标

以上面的图为例

//获取左上角瓦片坐标为(0,0)的图块的像素坐标
var pos = layer.getPositionAt(0,0);

//获得当前该图块的id,也就是gid(注意,这里的id是从1开始的,与TiledMap Editor中显示的不同,如果返回值为0,则为空)
var gid = layer.getTileGIDAt(0,0);

//将像素坐标转化为瓦片坐标,posInPixel:目标节点的position
getTilePos: function (posInPixel) {
    var mapSize = this.map.node.getContentSize();
    var tileSize = this.map.getTileSize();
    var x = Math.floor(posInPixel.x / tileSize.width);
    var y = Math.floor((mapSize.height - posInPixel.y) / tileSize.height);
    return cc.p(x, y);
},

· 编写障碍物思路
有了获取图块 id 和像素坐标转换成瓦片坐标的方法,我们可以编写出障碍物的简单逻辑,基本思路如下

  • 利用 TiledMap Editor 创建障碍物图层,画出障碍物
  • 通过脚本获取该图层
  • 获取控制对象下一刻移动的坐标,将其转换成瓦片坐标,如果 getTileGIDAt(瓦片坐标) 的值不为 0,说明对象将要移动的位置有障碍物,不做移动处理
//移动的逻辑可以这么写
var layer = this.map.getLayer('障碍物层');
var mToX = ...;//移动位置x坐标
var mToY = ...;//移动位置y坐标
if (layer.getTileGIDAt( this.getTilePos(cc.p(mToX,mToY)))) {

} else {
    this.node.x = mToX;
    this.node.y = mToY;
}

先更这么多吧,未完待续。。。

声明:HEUE NOTE|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA 4.0协议进行授权

转载:转载请注明原文链接 - Cocos Creator Tiledmap——入门知识整理