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 * 1500for (let i = 0; i < 16; i++) {for (let j = 0; j < 30; j++) {let n = this.wall.getTileGIDAt(i, j);console.log(n);// 如果存在瓦片，打印观察 nif (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~~

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！