ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2019-07-13 10:35:53  阅读:477  来源: 互联网

标签:KUOKUO cc car 50 CocosCreator let 赛车 瓦片 wall


本次引擎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;

    onl oad () {
        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);
                // 如果存在瓦片
                if (n === 1) {
                    // 计算位置
                    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~~

标签:KUOKUO,cc,car,50,CocosCreator,let,赛车,瓦片,wall
来源: https://blog.csdn.net/kuokuo666/article/details/95728409

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有