从投篮小游戏入门 Cocos Creator 3D 开发

一枚小工，多年 Cocos2d-x 和 Cocos Creator 游戏开发工程师。现阶段，主要在 Cocos Creator 环境下用 JS 和 TS 进行项目开发。19 年 7 月份开始，想和其他开发者共同分享相关技术解决方案，于是以“一枚小工”的笔名创建了个人公众号，介绍一些完整游戏项目以及开发过程中使用到的技术要点。目前分享出来的几个完整游戏有左右跳、动物同化、重力球、大炮英雄、推箱子、打地鼠等游戏，提供技术讲解的同时，免费提供完整工程源码，希望对打算或从事 Cocos Creator 开发的伙伴有所帮助。如有兴趣，欢迎关注交流。

论坛分享链接：

https://forum.cocos.com/t/cocoscreator-1/80131

https://forum.cocos.com/t/cocoscreator-2/83015

效果预览

获取代码

游戏介绍

点击屏幕，根据按住屏幕的时间，进行蓄力，时间越短，发出去的力越小，时间越长，发出去的力越大，超过了最大力，再次从最小里开始，球从篮筐中穿过得 1 分，否则视为不得分，由于做的是 Demo，就没有其他限制，可以根据需要尝试修改。

工程结构介绍

游戏就 1 个场景 game，所有游戏的元素都放在这个场景上，场景内 3D 元素主要 3 个，3 个元素都会挂在弹力和摩擦力设置的 PhyMat 脚本，PhyMat 脚本的主要功能就是设置挂在到对应节点上的所有 ColliderComponent 的弹力和摩擦力。

篮球框，我是直接使用 Blake 老师提供的 3D 素材用的，也是直接摆放在场景上的，主要用来添加碰撞，模拟真实投篮效果用的。

游戏核心在篮球里，篮球内添加了刚体，因为需要模拟重力效果，添加碰撞体，还有主要的游戏逻辑核心 BallCtrl，游戏里的所有核心功能，都在 BallCtrl 内。

修改内容

主要修改的内容：1.视角调整；2.添加了算分逻辑；3.修改投射角度；4.修改最小最大投掷速度。算分的具体思路是：在篮筐碰撞体正下方放置一个检测是否进球的碰撞体，碰撞体设置小一点，太大了，更容易产生误碰撞，球从篮球框落下的时候，刚好能撞到这个碰撞体，这个需要慢慢调整，本 demo 里，可能也还有一些问题，可以自行调整。然后检测碰撞体事件，碰撞结束以后，表示得分。

为了不重复计算，会给篮球添加一个新状态，得分状态，得分检测的碰撞体，在检测到碰撞结束以后，设置为得分状态，下次得分的时候，如果已经是得分状态，就不重复算分。

球设置有最小最大投掷速度，防止力气过大飞很远，力气很小，球没什么运动距离，这个可以根据观测效果进行调整，为了能够调整投掷力度的大小，到了最大值以后，会重新从最小值开始计算，表现在进度跳上就是，到了最大值以后，又从 0 往最大值变化。

最后再安利一波，Blake 老师的课程讲得真的很好，有兴趣的可以下载视频看看，照着老师的步骤，认真听，听完以后，接下来学习 Cocos Creator 3D 应该就没有之前那么吃力了。（说明，我没有收任何广告费！！！）