Cocos Creator:用 2D 物理碰撞撸 3D 横版酷跑

本人首发于 CSDN 博客:KUOKUO 众享

Cocos 已获得转载授权!

95a03536d4426f46a6540282f5603561.jpeg

作者:EEA阔宝,专注 Cocos Creator 引擎小游戏开发两年,开发微信小游戏 5 款、H5 小游戏多款。

引擎版本

Cocos Creator v2.1.2 ,版本不能低于 2.1.1

演示

bfb31e4454580700488850474b30a2d0.gif

两个平台一个跳跃方块,靠这些就可以做横版 3D 跑酷了哟!下面介绍游戏的具体的制作过程,而且还带工程源码哦!

1. 创建 3D 节点

新建一个工程,然后加入平台(Box)

dee9bc6da5367534e8de83e8778d1be9.jpeg

2. 材质

新建材质,指定一个颜色,看下图:

4ceea5476b74221b6dba0f1636a02069.jpeg

7e38fed95d167cc6ea44dfd50bae452c.jpeg

在属性那里拖入:

d66b8c4399aa224fb0492c7df703f610.jpeg

这时你可能会看的是黑色,不要慌,加个光照,看下面:

f16041dcd325c1fee680fb24b9b5c8e4.jpeg

操作键位:按住鼠标中间拖动,按住 Alt 键位转动视角,在 2D、3D 可以点击切换:

d95380c3aaf4c79f977cd230ff1bc527.png

3. 纹理

这里我在网上顺便下了个贴图:

bf1eccc8774d0b9f17e7916c3c0841fc.jpeg

鼠标右键 assert 新建一个材质,选好模式,给贴图打勾:

1fb78393645ef264ff81cfc298491cf5.jpeg

然后给 player 节点(Box)

7fcc69400bbcd9346db53abfb3930c9e.jpeg

4. 碰撞

3D 物理碰撞还没有,但是有 2D 的,我们的酷跑是在一个平面上,那么用原来的物理系统完全可以呀!给平台加刚体,盒子碰撞,碰撞组件尺寸调整为 1, 1 (不然太大)player 方块也是,注意一个是静态一个是动态,看下图:

9aafb8910884edd4f7d1771750a47f7c.jpeg

新建脚本,模拟一次跳跃,代码如下:

const {ccclass, property} = cc._decorator;


@ccclass
export default class Test extends cc.Component {


    @property(cc.Node) player: cc.Node = null;


    onLoad () {
        let p = cc.director.getPhysicsManager();
        p.enabled = true;
    }


    start () {
        this.scheduleOnce(() => {
            // 3秒后模拟跳跃
            let v = this.player.getComponent(cc.RigidBody).linearVelocity;
            v.x += 300;
            v.y += 200;
            this.player.getComponent(cc.RigidBody).linearVelocity = v;
        }, 3);
    }


    // update (dt) {}
}

End


Cocos 将定期原创或转载优质的技术分享教程,欢迎有创作想法想要投稿的开发者与本公众号进行联系,感谢支持!

一图看懂 Cocos 2019 新品发布会

5G 云游戏亮相 Chinajoy,大作一键秒玩

Cocos 技术派 | 实时竞技小游戏技术分享

Cocos 技术派 |《野蛮人大作战》从开发到上线

Cocos 技术派 |  插件 CC_inspector +

Cocos 技术派 |  摄像机的灵活运用

3D 小游戏《飞跃地平线 Plus》开发分享

Cocos Creator 接入微信小游戏引擎插件指引

创意小游戏《荒野日记》Cocos专访

垃圾分类搞不清?快试试这款小游戏

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值