编者按

“游戏开发小赤佬，也玩 python 和 shell”

白玉无冰是“Cocos 荣耀讲师”征稿活动第1期的获奖作者之一，除了征稿作品《用摄像机实现残影幻影拖尾效果》之外，拥有多年 Cocos 游戏开发经验的他，还十分善于做技术总结，其个人公众号输出了大量的开发经验，感谢白玉无冰 。

以下为白玉无冰使用 Cocos Creator 3D 开发"蚂蚁庄园"项目的技术分享，包括上篇蚂蚁庄园登山赛和下篇蚂蚁庄园运动会星星球。

   上篇：蚂蚁庄园登山赛

游戏体验：

http://lamyoung.gitee.io/web/jumpGame

效果预览：

配置环境：

Cocos Creator 3D v1.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;}
}

   下篇：蚂蚁庄园运动会星星球

游戏体验：

http://lamyoung.gitee.io/web/ballGame

效果预览：

配置环境：

Cocos Creator 3D v1.0.0

实现方案：

小球点击：3D 里节点无法用 cc.Node.EventType.TOUCH_START 监听，最终在论坛上找到一个 raycast 解决方法。

参考代码如下：

start() {systemEvent.on(SystemEventType.TOUCH_START, this.onClickBall, this);
}
private _ray = new geometry.ray();
private onClickBall(touch: Touch, event: EventTouch) {const pos = touch.getLocation();this.camera.screenPointToRay(pos.x, pos.y, this._ray);const result: { node: Node }[] = this.node_ball_click.scene.renderScene['raycast'](this._ray);if (result.some((i) => {if (i.node === this.node_ball_click) {return true;}})) {//点击到小球处理逻辑}
}

其中 result 返回的是一个包含 node 节点的结果数组，获取后需要判断一下是否为小球节点。这个方案消耗性能比较大，后续应该会有更好的解决方案，也期待大家可以一起交流。

动画系统：采用了编辑器的动画编辑器，对需要部分增加动画效果。由于我的资源是网上找的，那只鸡有些身体部分切割的不好，所以小鸡的动画比较差一些。

需要注意的是动画编辑器里的 rotation 属性，与节点里的属性面板的 rotation 对应不上，而应该采用 eulerAngles 的属性。

据说后续版本会处理？

小球轨迹：采用 tween 控制小球坐标数值，先移动到最高点，然后再移动到最低点。

在运动轨迹中加入一些随机值，就可以达到不同位置的效果啦。

tweenUtil(this._node_balll_pos).stop().to(time, new math.Vec3((this.node_ball.position.x + BALL_INIT_X) / 2, BALL_MAX_Y * (0.8 + 0.2 * Math.random()), targetZ / 2)).to(time, new math.Vec3(BALL_GAMEOVER_X, BALL_MIN_Y, targetZ)).start();

   总结

完成这个小功能主要遇到的问题是 3D 节点点击事件和动画系统的 rotation 的问题，不过这些都在论坛里找到了相应的解决方法。

开发 3D 项目还是非常需要掌握一些基础知识，例如正交投影，透视投影，点光源，平行光源等，我也是在 webgl 编程指南里学到的，建议看看！

以上就是我最新的学习成果！如有问题或新的想法欢迎留言！欢迎感兴趣的开发者关注我的个人公众号获取本项目源码，我也定期分享我的学习心得和开发经验。

再次感谢白玉无冰为社区所作的贡献！此外，Cocos Creator 3D v1.0.1 正在社区进行火热公测，欢迎各位开发者下载体验！

https://forum.cocos.org/t/cocos-creator-3d-v1-0-1/85773。

如果您在使用 Cocos Creator 2D/3D 的过程中，获得了独到的开发心得、见解或是方法，并且乐于分享出来，帮助更多开发者解决技术问题，加速游戏开发效率，期待您与我们联系！

更

多

精

彩

Cocos Creator v2.2 正式发布

Cocos Creator 3D v1.0 正式发布

Cocos Creator 3D 物理模块介绍

Cocos Creator v2.2 自定义渲染组件及材质介绍

小姐姐，你的发丝高光怎么用 Creator 3D 实现？

极限开发《TheCode》和《Shoot the F》创作笔记

独立游戏 5000 万下载百万 DAU 竟不花一分钱？

Cocos 与腾讯云宣布战略合作，把游戏开发门槛降到极致

Cocos Creator 实现战旗类游戏《火焰纹章》移动范围效果

Cocos Creator 通用框架设计——网络

支付宝小游戏来啦！

我就知道你“在看”▼

文中使用素材均来自网络！版权归原作者所有，如有侵权还请联系！