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

Posted by lamyoung on November 7, 2019

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

效果预览

配置环境: cocos creator 3D 1.0.0

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

由于是第一次写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。—白玉无冰


在线试玩
源码获取