app开发定制Cocos Creator学习のTiledMap

app开发定制目前正在学习 creator，版本是2.4.x

PS: app开发定制业余兴趣进行学习一下，app开发定制体会一下做游戏的感受，app开发定制而且逻辑语言也可以使用JS和TS进行编写

关于cocos creator和tiledMapapp开发定制的一些简单介绍可以参考：

Cocos Creator，app开发定制这是一款引擎。 Tiled，app开发定制是一款可以用来绘制瓦app开发定制片地图的工具。

app开发定制本次学习的来源主要为：

Cocos Creator使用Tiled地图

创建地图的步骤：

1. 先划分好需要的地图层次，最底部是地面层。然后是地面上的装饰层，这些装饰玩家可以踩在上面。之后是对象层，玩家和一些可以交互的物体基本就位于这一层。再上一层可以是遮盖层，比如一些树，玩家经过可以被遮挡住。最上层可以是阻挡物层，玩家不可通过

2. 素材的话可以自己去寻找，本人是从上获取的。
   
3. 先在Tiled 右侧的图层上建立好五层，中间是对象层，然后经过了一些时间的绘制，一张简单的分层地图就出现了。 中间的十字墓碑是之后玩家将要初始出现的地方
   
4. 将创建好的tile地图拖到项目中，可以看到forestAndCity下面具有五层节点。
   
5. 可以在playObj节点下添加一个单色精灵player作为之后要运动的玩家，上面挂在一个playerControl作为运动脚本。然后把这个精灵拖到下方资源文件夹中变成预设体prefab
   
6. 可以把canvas和camera的大小缩小，为了让之后的玩家运动起来后摄像机跟随运行看起来跟舒服
   
7. 创建一个newMapControl脚本挂在到 forestAndCity节点 上面，用来获取Tiledmap地图

关于更多地图方法可参考：

下面是newMapControl的代码：（现在运行后，玩家就会出现在startPos的位置上，并且摄像机也会跟随移动到此位置）

export default class newMapControl extends cc.Component {    //  获取瓦片图资源    map: cc.TiledMap;    player: cc.Node = null;    // onLoad () {}    start () {        this.map = this.getComponent(cc.TiledMap);        // 获取指定的对象层         let playerObj = this.map.getObjectGroup('playObj');        // 获取对象        let playerStartPos = playerObj.node.getChildByName("startPos");        // 在开始位置创建玩家对象        // 加载资源        cc.resources.load('prefab/tilemap/player', cc.Prefab,  (err, playerPre)=> {             // 实例化预设体            this.player = cc.instantiate(playerPre);            this.player.setParent(this.node.getChildByName('playObj'));                        // // // 设置玩家位置            this.player.x= playerStartPos.x;            this.player.y = playerStartPos.y;        })    }    update (dt) {        // 摄像头跟随玩家        if (this.player != null) {            cc.Camera.main.node.x = this.player.x;            cc.Camera.main.node.y = this.player.y;        }    }}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

效果：

8. 然后封装一个移动的ts文件，取名为moveInput，对应按键按下，横轴竖轴上运动方向改变。

const {ccclass, property} = cc._decorator;// 封装移动方向// 单例模式export default class moveInput{    private static instance: moveInput = null;    // 水平轴    horizontal: number = 0;    // 垂直轴    vertical: number = 0;    static Instance() {        if (!this.instance) { this.instance = new moveInput(); }        return this.instance;    };    // 通过private修饰符，让类无法在外部创建新的实例    private constructor() {         // 键盘按下        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, (event)=>{            switch(event.keyCode) {                case cc.macro.KEY.w: this.vertical = 1; break;                case cc.macro.KEY.s: this.vertical = -1; break;                case cc.macro.KEY.a: this.horizontal = -1; break;                case cc.macro.KEY.d: this.horizontal = 1; break;            }        })        // 键盘抬起        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, (event)=>{            switch(event.keyCode) {                case cc.macro.KEY.w: if(this.vertical == 1) this.vertical = 0; break;                case cc.macro.KEY.s: if(this.vertical == -1) this.vertical = 0; break;                case cc.macro.KEY.a: if(this.horizontal == -1) this.horizontal = 0; break;                case cc.macro.KEY.d: if(this.horizontal == 1) this.horizontal = 0; break;            }        })    }}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

这样只需要在playerControl玩家运动脚本中进行控制即可，记得要import导入moveInput。这里的speed速度我设置了一百。

ps: 如果想让玩家每秒移动设置的速度，需要乘dt

update (dt) {    // 移动    this.node.x += this.speed * dt * moveInput.Instance().horizontal;    this.node.y += this.speed * dt * moveInput.Instance().vertical;}
1
2
3
4
5

当前效果（因为博客图片大小限制，这里我剪了一些帧数）：

9. 但是这里会发现，虽然隐藏层已经实现了，但是阻挡层并没有阻挡物体，并且物体也可以超出界面之外。所以要开启物理系统。在newMapControl中代码开启，并且在节点上也可以添加四周边框。注意： 地图的刚体类型要选为静止，否则会掉下去

onLoad () {    // getPhysicsManager物理管理器    let gp:cc.PhysicsManager = cc.director.getPhysicsManager();    gp.enabled = true;    // 绘制调试区域    var Bits = cc.PhysicsManager.DrawBits;    gp.debugDrawFlags = Bits.e_shapeBit;}
1
2
3
4
5
6
7
8

在玩家的预设体上面也需要添加物理组件，并且将玩家的重力设置为0，否则会下落

效果：

10. 设置当前的阻挡层刚体，现在地图的四周已经设置好了范围，玩家出不去了，但是阻挡层玩家还是可以通过。
    因为阻挡层的形状变化过多，如果一个刚体一个刚体添加过于麻烦，所以可以通过分组来进行动态设置。
    
    定义一个mapInit方法，用于动态生成刚体，并且对应的hinder节点的anchor最好也调整成(0,0)，

const {ccclass, property} = cc._decorator;// 动态生成地图刚体 name: 需要生成刚体的层次名字， groupIndex: 分组index  tileMap: 地图export default function mapInit(name: string, groupIndex:number, tileMap: cc.TiledMap) {    let tileSize = tileMap.getTileSize();  // 地图小块尺寸     let layer:cc.TiledLayer = tileMap.getLayer(name);  // 得到阻挡层    let layerSize = layer.getLayerSize();  // 得到阻挡层尺寸    for(let i = 0; i < layerSize.width; i++) {        for (let j = 0; j < layerSize.height; j++) {               let tiled:cc.TiledTile = layer.getTiledTileAt(i, j, true);  // 拿到小块            // 如果元素存在            if (tiled.gid != 0) {                let body:cc.RigidBody = tiled.node.addComponent(cc.RigidBody);  // 动态添加RigidBody刚体                body.type = cc.RigidBodyType.Static;  // 设置为静态，防止下落                tiled.node.group = 'hinder'; // 将这个节点设置为wall                tiled.node.groupIndex = groupIndex;  // 设置节点的groupIndex                                let collider = tiled.node.addComponent(cc.PhysicsBoxCollider); // 添加碰撞区域                                collider.offset = cc.v2(tileSize.width/2, tileSize.height/2)  // 设置偏移量, 除2是为了拿到中心点                collider.size = tileSize; //包围盒的大小                collider.apply();  //回调            }        }    }}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

现在就出现了地图阻挡层的刚体了

之后可以把绘制调试区域隐藏，一个简单的TiledMap学习就到此结束了。