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


目录

一、组件介绍

二、组件属性

三、脚本控制

3.1加载地图

3.2渲染地图

四、详细说明

五、关闭裁剪

六、节点遮挡


一、组件介绍

        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组件提供的方法来获取地图上的图块并进行一些操作。

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐