cocoscreator使用tiledmap

Cocos Creator是一个非常流行的2D游戏引擎，可以通过它快速创建2D游戏应用。其中TiledMap是它的一个非常有用的功能，可以用来构建游戏中的地图。在本文中，我们将讲解如何使用TiledMap来创建一个简单的地图。

1. 创建TiledMap

首先，我们需要创建一个TiledMap。打开Cocos Creator，创建一个新的场景。然后从资源管理器中将TiledMap拖到场景中。可以通过资源管理器查看TiledMap的属性，例如地图大小、图块大小和背景颜色。

2. 导入地图

接下来，我们需要导入我们的地图。在Tiled中，我们可以通过绘制图块来构建地图。我们可以将地图导出为一个JSON文件，然后使用Cocos Creator的TiledMap组件将其导入。

首先，打开Tiled，创建一个新地图，然后将一些图块绘制在地图上。然后选择菜单“文件”->“导出为”->“JSON”，然后将其保存到我们的Cocos Creator项目的资源文件夹中。

回到Cocos Creator，选择TiledMap组件，然后在属性检查器中将JSON文件拖到“Tmx File”属性中。地图应该被正确地加载到场景中。

3. 编写代码

现在我们已经成功地创建了TiledMap并导入了地图，接下来我们需要编写一些代码来使其工作。我们需要将地图加载到游戏中，并将它们与玩家和其他游戏对象进行交互。

下面是一个简单的例子，它展示了如何使用TiledMap和Cocos Creator来加载地图，以及如何使玩家在地图上移动。

首先，我们需要创建一个玩家对象。在资源管理器中创建一个新的节点，然后将一个精灵或动画精灵拖到这个节点中。然后为这个节点添加一个脚本组件，我们可以使用JavaScript来编写这个脚本。

```
cc.Class({
    extends: cc.Component,

    properties: {
        speed: 100,
    },

    onLoad () {

    },

    update (dt) {
        let x = this.node.x;
        let y = this.node.y;

        if (cc.inputManager.getKey('up')) {
            y += this.speed * dt;
        }
        else if (cc.inputManager.getKey('down')) {
            y -= this.speed * dt;
        }
        else if (cc.inputManager.getKey('left')) {
            x -= this.speed * dt;
        }
        else if (cc.inputManager.getKey('right')) {
            x += this.speed * dt;
        }

        this.node.x = x;
        this.node.y = y;
    },
});
```

这个脚本会检测键盘输入，并根据玩家的输入来移动玩家对象。

接下来，我们需要将TiledMap加载到场景中。我们可以使用以下代码来实现：

```
cc.Class({
    extends: cc.Component,

    properties: {
        player: cc.Node,
        tiledMap: cc.TiledMap,
    },

    onLoad: function () {
        this.tiledMap.node.setContentSize(this.tiledMap.getMapSize().width * this.tiledMap.getTileSize().width, this.tiledMap.getMapSize().height * this.tiledMap.getTileSize().height);
    },

    update: function (dt) {
        let pos = this.player.parent.convertToWorldSpaceAR(this.player.position);

        let tiledPos = cc.v2(Math.floor(pos.x / this.tiledMap.getTileSize().width), Math.floor(pos.y / this.tiledMap.getTileSize().height));

        let tiledGID = this.tiledMap.getLayer('ground').getTileGIDAt(tiledPos);

        if (tiledGID) {
            let tiledProperties = this.tiledMap.getPropertiesForGID(tiledGID);

            if (tiledProperties && tiledProperties.isBarrier) {
                return;
            }
        }

        this.tiledMap.node.position = this.tiledMap.node.position.sub(this.player.position.sub(cc.v2(cc.visibleRect.width / 2, cc.visibleRect.height / 2)));
    },
});
```

这个脚本将玩家和TiledMap联系起来，并在每个update周期中更新TiledMap的位置。

至此，我们就创建了一个简单的游戏地图。通过使用TiledMap和Cocos Creator，我们可以轻松地创建出更复杂的地图和更丰富的游戏世界。