美文网首页Cocos Creatorcocos creator 基础教程cocos 2dx
Cocos Creator Tiledmap——入门知识整理

Cocos Creator Tiledmap——入门知识整理

作者: Anlia | 来源:发表于2017-10-09 14:41 被阅读313次

    现在网上很多资料都比较旧了,某些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;
    }
    

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

    相关文章

      网友评论

        本文标题:Cocos Creator Tiledmap——入门知识整理

        本文链接:https://www.haomeiwen.com/subject/pnnsextx.html