cocos creator 3D | 蚂蚁庄园运动会登山赛

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

1107-bg.png

效果预览

1107-result.gif

配置环境: cocos creator 3D 1.0.0

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

由于是第一次写3d项目，摄像机镜头调了多次才达到预想的效果。

1107-camera.png

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

实现原理

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

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。—白玉无冰

---

在线试玩
源码获取