Cocos Creator 配合Tiled地图的使用

摘要:
1.选择右上图层栏的对象层object2.选择右下test图块集3.选择右上工具栏的插入图块4.选择右下一个木头图片,然后可以摆放在地图任意位置了我随便摆个四在cocos中使用tmx复制所有文件到cocos的assets/resources/tmx下直接拖动map.tmx到舞台,则可直接生成了地图选择map的Node节点,查看属性检查器,看到有个TiledMap,这个对象就保存了tmx地图的所有属性,我们把他打印出来打印出来的TiledMap现在我们想获取地图上的二维数组数据,用于其他操作。

版本2.3.4

参考:

TiledMap Editor官网

cocosTiledMap组件参考

GitBook TiledTile API

游戏中经常会用到瓦片地图,cocos也提供了对Tiled编辑器的支持。现在来学习下如何使用。

现在来创建一个TiledMap,并用到cocos中,最终效果如下

Cocos Creator 配合Tiled地图的使用第1张

一打开Tiled新建地图

Cocos Creator 配合Tiled地图的使用第2张

选择创建新地图,块大小64x64,地图行列30x40

Cocos Creator 配合Tiled地图的使用第3张

新建好的地图

Cocos Creator 配合Tiled地图的使用第4张

二新建图层

选择右上角图层中的“图层块1”,修改为“Layer”(双击可改名)

在图层空白处右键,新建对象层,并命名为object

Cocos Creator 配合Tiled地图的使用第5张

然后调整下图层位置(拖拽Layer到object上方),图层最终这样

Cocos Creator 配合Tiled地图的使用第6张

三新建地图块

准备的场景图片如下

Cocos Creator 配合Tiled地图的使用第7张

选择图层,新建图块集,选择ground.png

Cocos Creator 配合Tiled地图的使用第8张

另存为这样一个文件,ground.tsx

Cocos Creator 配合Tiled地图的使用第9张

回到tmx后会看见右下方自动有图块集了(如果没有,直接拖动ground.tsx文件到空白处会自动打开,右下就会显示图块集)

Cocos Creator 配合Tiled地图的使用第10张

选择图层Layer,选择工具栏图章刷,选择右下图块(可以点击单选,或者按住shift多选),然后就可以在格子里绘制地图了。

Cocos Creator 配合Tiled地图的使用第11张

最终绘制成这样

Cocos Creator 配合Tiled地图的使用第12张

图层只能填64x64的格子,那么我想贴整张图上去。就得使用多图片集合。

右下角选择图层栏,点击新建图集,选择多图片集合,任意取个名字test,另存为test

Cocos Creator 配合Tiled地图的使用第13张

test是这样的,空空如也

Cocos Creator 配合Tiled地图的使用第14张

点击添加图块,选择多个植物图片,然后保存。

Cocos Creator 配合Tiled地图的使用第15张

回到map.tmx。可以看到右下角多出了刚才创建的test图块集。因为图片太大,我们缩放显示12%。

1.选择右上图层栏的对象层object

2.选择右下test图块集

3.选择右上工具栏的插入图块

4.选择右下一个木头图片,然后可以摆放在地图任意位置了 (只有对象层能任意摆放,如果是Layer层,则只能按照64x64的固定位置摆放)

Cocos Creator 配合Tiled地图的使用第16张

我随便摆个

Cocos Creator 配合Tiled地图的使用第17张

四在cocos中使用tmx

复制所有文件到cocos的assets/resources/tmx下 (没有就自己新建,或者随便建个文件夹)

Cocos Creator 配合Tiled地图的使用第18张

直接拖动map.tmx到舞台,则可直接生成了地图 (我之前项目就新建好了map1.tmx了,懒得重新又摆一次)

Cocos Creator 配合Tiled地图的使用第19张

选择map的Node节点,查看属性检查器,看到有个TiledMap,这个对象就保存了tmx地图的所有属性,我们把他打印出来

Cocos Creator 配合Tiled地图的使用第20张

打印出来的TiledMap

Cocos Creator 配合Tiled地图的使用第21张

现在我们想获取地图上的二维数组数据,用于其他操作。比如我在tmx里新建一个collider图层,专门用来生成碰撞检测的图层,根据二维数组上的id,来生成碰撞检测的boxcollider。

那么如何获取地图图层上的二维数组数据呢,现在以获取Layer的数据为例子。大家可以查看APIGitBook TiledTile API

        //根据图层名获取图层
        let layer:cc.TiledLayer = this.map.getLayer("Layer1");
        //获取图层的行列数
        let layerSize:cc.Size = layer.getLayerSize();
        let width = layerSize.width;
        let height = layerSize.height;
        console.log(layerSize);  // size(40, height:30)
        //获取图层的gid
        let mapData = [];
        for(let i=0;i<height;i++){
            mapData[i] = [];
            for(let j=0;j<width;j++){
                mapData[i].push(layer.getTileGIDAt(new cc.Vec2(j,i)));
            }
        }
        console.log(mapData);

关于上面的代码,我经常搞不清楚,i,j,width,height究竟哪个代表行,哪个代表列。这个需要自己打印出来看下对不对.

打印出来获取的二维数组,和map.txt对比下,恩,是正确的

Cocos Creator 配合Tiled地图的使用第22张

那么数组里这些数字是什么呢?是图块集里的图片id,例如上图二维数组左下角的9,对应地图左下角的图块id。

可以看到是图块集中对应的一块ID是0,那么为什么打印出来是9呢。

Cocos Creator 配合Tiled地图的使用第23张

因为有两个图集块。如下图

Cocos Creator 配合Tiled地图的使用第24张

所以左下角的图块实际ID是:

左下图块ID0 + 上一图集数量8 + 1 = 0+8+1 = 9 

(因为0代表空白,所以所有图块ID会+1)

那么这样可以知道,图块和打印出来的二维数组是正确匹配的。

假如所有9-14都是可以碰撞的,那么我们根据二维数组来生成boxcollider碰撞就行了。

总结

嗯。地图使用暂时到这里。总结一下

1. 新建地图

2.新建图层 ,对象层和图块层

3.新建图块集,单图和多图集合

4.cocos中拖动生成Tiled的实体

5.获取地图数据信息GID,用于判断哪些地方生成碰撞BoxCollider等等

免责声明:文章转载自《Cocos Creator 配合Tiled地图的使用》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇远程桌面连接会话超时或者被限制改组策略也没用的时候就这么解决Java异常处理008:RestTemplate请求Could not extract response: no suitable HttpMessageConverter found for response type.... content type [text/html;charset=UTF-8]异常下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

百度地图、ECharts整合HT for Web网络拓扑图应用

直击现场 百度地图、ECharts整合HT for Web网络拓扑图应用发表于3周前(2015-03-23 01:32) 阅读(1320)|评论(5)78人收藏此文章,我要收藏 赞8 慕课网,程序员升职加薪神器,点击免费学习 摘要前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质...

二维码(QR code)基本知识

1.二维码定义:   二维码(2-Dimensional Bar Code),是用某种特定的几何图形按一定规律在平面(二维方向上)分布的黑白相间的图形记录数据符号信息的。它是指在一维条码的基础上扩展出另一维具有可读性的条码,使用黑白矩形图案表示二进制数据,被设备扫描后可获取其中所包含的信息。一维条码的宽度记载着数据,而其长度没有记载数据。二维条码的长度、...

MATLAB入门教程

MATLAB入门教程 1.MATLAB的基本知识 1-1、基本运算与函数 在MATLAB下进行基本数学运算,只需将运算式直接打入提示号(>>)之後,并按入Enter键即可。例如: >> (5*2+1.3-0.8)*10/25 ans =4.2000 MATLAB会将运算结果直接存入一变数ans,代表MATLAB运算後的答案(Answ...

跟我学算法-pca(降维)

pca是一种黑箱子式的降维方式,通过映射,希望投影后的数据尽可能的分散, 因此要保证映射后的方差尽可能大,下一个映射的方向与当前映射方向正交 pca的步骤: 第一步: 首先要对当前数据(去均值)求协方差矩阵,协方差矩阵= 数据*数据的转置/(m-1) m表示的列数,对角线上表示的是方差,其他位置表示的是协方差 第二步:需要通过矩阵对角化,使得协方差为0,只...

asp.net网站中添加百度地图功能

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=g...

二维码(android)

我们都知道一般的二微码都是以不同形式显示有的是登入,有的是网页,其实二维码只是一个字符串。到这里我们就有一个疑问那二维码是这样判断是网站或者是登入功能的呢? 其实这些判断部分,二维码生成器早就给你完成了,我们只需导入一个core-3.2.1.jar包就行。那接下来我们来做一个简单的小案例,进一步了解二维码。 一、新建项目 1、我们建一个名为"weima"的...