为了账号安全,请及时绑定邮箱和手机立即绑定

Cocos Creator之瓦片地图

标签:
Premiere

一、Tiled Map 的制作

首先下载Tiled,然后新建一张地图,在这里你可以设置地图的块数,每个块的大小。


webp

新地图.png


然后鼠标右键,可以建立新的图层,添加新的块(barrier,bg),添加对象图层等操作


webp

添加块.png


最后可以保存地图为tmx格式.


二、在Cocos Creator中使用制作的tmx格式的Tiled Map

  1. 添加组件,选择TiledMap,然后将生成的地图资源拖入Tmx asset。可以查看官方文档TileMap

    webp

    TiledMap.png

2、创建js脚本然后在脚本中获取指定内容

        //获取指定名称的图层
        var layer = this.tileMap.getLayer('图层名');        //获取左上角瓦片坐标为(x,y)的图块的像素坐标
        var pos = layer.getPositionAt(x,y);        //获得当前该图块的id,注意:这里的id是从1开始的,与TiledMap Editor中显示的不同,如果返回值为0,则为空)
        var gid = layer.getTileGIDAt(0,0);
//将像素坐标转化为瓦片坐标
        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);
        },
编写障碍物思路和注意事项

思路
1.用Tiled编辑器创建障碍物图层。
2.控制角色移动时候判断移动瓦块坐标的gid是否为0,不为0表示有障碍物。
注意事项
1.物体的位置位移都基于像素坐标,一定注意转换关系。
2.tmx文件保存的图块是映射关系,所以图块文件和地图文件始终要放在一起。



作者:爱看书的图图图图
链接:https://www.jianshu.com/p/63b706dd0aa3


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消