欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

蚂蚁庄园运动会登山赛!3d项目入门实战!Cocos Creator 3D!

程序员文章站 2022-07-14 11:42:10
...

好像没写过3d项目分享,那么就跟着蚂蚁庄园的小鸡一起跳跳跳吧!

蚂蚁庄园运动会登山赛!3d项目入门实战!Cocos Creator 3D!

效果预览

蚂蚁庄园运动会登山赛!3d项目入门实战!Cocos Creator 3D!

配置环境: cocos creator 3D 1.0.0

首先是寻找3d资源花费了大半天时间,开发3d游戏不易呀!最终还是向KUOKUO大佬那捞了一只鸡(鸭?)来用了。

由于是第一次写3d项目,摄像机镜头调了多次才达到预想的效果。
蚂蚁庄园运动会登山赛!3d项目入门实战!Cocos Creator 3D!

还用了一个天空盒,网上找的资源。

实现原理

生成道路是用预制资源,代码动态生成。

const element: Node = instantiate(this.prefab_land);
this.node_tree.addChild(element);

摄像机跟着小鸡一起往前移动(我写的是z轴移动)。

update(deltaTime: number) {
    this.camera_game.node.setPosition(this.camera_game.node.position.x, this.camera_game.node.position.y, this.role.node.position.z)
}

监听TOUCH_MOVE事件控制小鸡左右移动,并要判断边界。注意手指移动的变化和实际屏幕看到的大小是不一样的,这是因为摄像机投影的原因。我是乘了一个系数,可能有其他方法判断?

private onTouMove(touch: Touch) {
    const delta = touch.getUIDelta();
    let targetX = this._curPos.x - delta.x * 1e-2;
    if (targetX > 4.5) targetX = 4.5;
    if (targetX < - 4.5) targetX = -4.5;
    this._curPos.x = targetX;
}

往前跳的运动就是修改y(跳跃) 和 z(往前)的数值啦。

jumpRun() {
    this._curPos.z += 0.1;
    if (Math.floor(this._curPos.z / 2) > this._curIndex) {
        this._curPos.y = 0;
        this._curIndex++;
        this.node.emit('JumpEnd', this._curIndex);
    }
    if (this._curPos.z % 2 < 1) {
        this._curPos.y += 0.2;
    } else {
        this._curPos.y -= 0.2;
    }
}

小结

cocos creator 3d 用起来挺顺手的(我也没用过其他3d引擎????哈哈哈),就是我家的 mac-mini 好像撑不住,只要打开工具一段时间就一直在叫(可能我的设备落后),不过整体的效果还是不错的。

其实开发3d项目还是要一些基础知识的,如正交投影,透视投影,点光源,平行光源等等。(我也是在webgl编程指南里学到的,建议看看哦????)

第一次写3d项目的比较矬一点,还有很多需要学习的。如有错误或者其他想法,欢迎留言!我有新想法也会第一时间分享给大家!点个关注不迷路哦!


游戏开发小赤佬,也玩python 和 shell。—白玉无冰


在线试玩
源码获取