CocosCreator之KUOKUO教你如何用瓦片地图生成碰撞赛车道

本次引擎v2.0.10

目标

瓦片地图生成碰撞赛车道

过程

首先
我们需要撸一个瓦片地图。

很简单的地图，分两层，墙和地面。

然后
在CocosCreator中直接拖进层级管理器就行。

然后你就会发现层自动形成节点并挂载组件了。
然后给wall和car加上刚体
注意墙是静态刚体，车是动态，并且方便测试我给它旋转了15度。
如下图：

最后
使用了getTileGIDAt这个方法，检测是否有瓦片。
还有就是坐标转化，比如最左上角的瓦片是 0 0 转化坐标为 -375 725。
因为地图我做的是 800 * 1500 的 瓦片 50 * 50 的。

const {ccclass, property} = cc._decorator;

@ccclass
export default class Main extends cc.Component {

    @property(cc.TiledLayer) wall: cc.TiledLayer = null;
    // 小车刚体
    @property(cc.RigidBody) car: cc.RigidBody = null;

    onLoad () {
        let p = cc.director.getPhysicsManager();
        p.enabled = true;
        p.debugDrawFlags = 1;
        // 关闭重力
        p.gravity = cc.v2(0, 0);
    }

    start () {
        // 地图为 16 * 30; 尺寸为 800 * 1500
        for (let i = 0; i < 16; i++) {
            for (let j = 0; j < 30; j++) {
                let n = this.wall.getTileGIDAt(i, j);
                console.log(n);
                // 如果存在瓦片，打印观察 n
                if (n != 0) {
                    // 计算位置, 800的一半是400 再加上方块长度的一半
                    let x = -400 + i * 50 + 25;
                    let y = 750 - j * 50 - 25;
                    // 加碰撞盒子
                    let p: cc.PhysicsBoxCollider = this.wall.node.addComponent(cc.PhysicsBoxCollider);
                    p.offset.set(cc.v2(x, y));
                    p.size.width = 50;
                    p.size.height = 50;
                    p.apply();
                }
            }
        }
    }

    update (dt) {
        // 一直给一个向前的力 测试用
        let hudu = cc.misc.degreesToRadians(this.car.node.rotation);
        let x = Math.sin(hudu);
        let y = Math.cos(hudu);
        this.car.applyForceToCenter(cc.v2(100 * x, 100 * y), false);
    }
}

效果

O(∩_∩)O~~
Get到没。

加我QQ群：（博客里面的项目，群文件里都有哦）
706176551
我们一起学习！
O(∩_∩)O~~