【CocosCreator入门】CocosCreator组件 | TiledMap（地图）组件

Cocos Creator是一款流行的游戏开发引擎，具有丰富的组件和工具，其中TiledMap组件可以帮助开发者快速创建、加载和渲染地图。

肩匣与橘

6013人浏览 · 2023-05-30 18:43:43

肩匣与橘 · 2023-05-30 18:43:43 发布

Cocos Creator是一款流行的游戏开发引擎，具有丰富的组件和工具，其中TiledMap组件可以帮助开发者快速创建、加载和渲染地图。

一、组件介绍

TiledMap是基于Tiled地图编辑器的，Tiled是一款开源、跨平台的2D地图编辑器。Tiled支持多种地图格式，包括CSV、XML、JSON等。TiledMap组件会将Tiled地图编辑器编辑好的地图数据解析并渲染到游戏画面上。在TiledMap组件中，地图数据主要分为两部分：地图属性和图块集。地图属性是指整个地图的一些基本信息，例如地图的大小、图块的大小等。图块集则是指地图中使用到的所有图块，每个图块都有自己的属性和位置信息。TiledMap组件会根据这些信息创建一个地图对象，并按照一定的规则将图块渲染到地图上。

二、组件属性

属性	功能说明
Tmx Asset	指定 .tmx 格式的地图资源

三、脚本控制

3.1加载地图

在Cocos Creator中，可以通过以下代码来加载地图：

cc.resources.load('maps/map1', cc.TiledMapAsset, function (err, mapAsset) {
    if (err) {
        cc.error(err.message || err);
        return;
    }
    // 加载成功后，创建TiledMap组件
    var mapNode = new cc.Node();
    var tiledMap = mapNode.addComponent(cc.TiledMap);
    tiledMap.tmxAsset = mapAsset;
    // 将地图节点添加到场景中
    cc.director.getScene().addChild(mapNode);
});

在以上代码中，首先使用cc.resources.load方法加载地图资源，其中maps/map1是地图资源的路径，cc.TiledMapAsset表示要加载的资源类型。在加载成功后，创建一个新的节点，并添加TiledMap组件，并将TiledMap组件的tmxAsset属性设置为加载成功的地图资源。最后将这个节点添加到场景中即可。

3.2渲染地图

在TiledMap组件中，可以使用以下方法来获取地图上的图块：

var layer = tiledMap.getLayer('layer1');
var tile = layer.getTiledTileAt(0, 0, true);

在以上代码中，首先获取TiledMap组件中名为layer1的图层对象，然后使用getTiledTileAt方法获取该图层上坐标为(0,0)的图块。最后，可以对这个图块进行一些操作，例如修改它的位置或旋转角度等。

四、详细说明

添加 TiledMap 组件之后，从资源管理器中拖拽一个 .tmx 格式的地图资源到 Tmx Asset 属性上就可以在场景中看到地图的显示了。

在 TiledMap 组件中添加了 Tmx Asset 属性后，会在节点中自动添加与地图中的 Layer 对应的节点。这些节点都添加了 TiledLayer 组件。请勿删除这些 Layer 节点中的 TiledLayer 组件。

TiledMap 组件不支持 mapLoaded 回调，在 start 函数中可正常使用 TiledMap 组件。

五、关闭裁剪

cc.macro.ENABLE_TILEDMAP_CULLING = false;

如果需要旋转地图或者把地图置于 3D 相机中，则需要关闭裁剪。另外，如果地图块不是非常多，如小于 5000 块，那么关闭裁剪还能减少 CPU 的运算负担，GPU 直接使用缓存进行渲染。

六、节点遮挡

在游戏中，一些节点可能会遮挡住其他节点，导致被遮挡的节点无法正常显示。对于地图来说，当地图上有多个图层叠加时，可能会出现这种情况。为了解决这个问题，TiledMap组件提供了一些节点遮挡的功能，可以让被遮挡的节点暂时不显示，等到遮挡它的节点不再遮挡时再显示出来。

在TiledMap组件中，可以使用以下方法来设置节点遮挡：

var layer = tiledMap.getLayer('layer1');
layer.enableCulling = true;

在以上代码中，首先获取TiledMap组件中名为layer1的图层对象，然后将该图层的enableCulling属性设置为true。这样，当该图层上的某个节点被其他节点遮挡时，该节点会暂时不显示。等到遮挡它的节点不再遮挡时，该节点会再次显示出来。

除了上述方法外，TiledMap组件还提供了其他一些节点遮挡的相关方法，例如：

setCullingDirty(): 设置节点遮挡脏标记，可以强制更新节点遮挡状态。
isCullingEnabled(): 获取该图层是否启用了节点遮挡功能。
setCullingBlockSize(size: cc.Size): 设置节点遮挡块的大小。
setCullingPadding(padding: cc.Rect): 设置节点遮挡块的内边距。
setCullingBorder(border: number): 设置节点遮挡边框的大小。

总之，TiledMap组件是Cocos Creator中用于创建、加载和渲染地图的组件之一。它基于Tiled地图编辑器，可以快速创建和编辑地图，并在游戏中进行渲染。在使用TiledMap组件时，需要先将TiledMap组件添加到场景中，然后加载地图资源，并将TiledMap组件的tmxAsset属性设置为加载成功的地图资源。最后，可以使用TiledMap组件提供的方法来获取地图上的图块并进行一些操作。