Cocos Creator 3D下TypeScript实现H5版3D投篮游戏!

时间:2024-04-07 13:37:34

  效果预览

Cocos Creator 3D下TypeScript实现H5版3D投篮游戏!

 

  获取代码

关注公众号,发送【3d篮球】获取代码。

 

  游戏介绍

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

 

  工程结构介绍

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

Cocos Creator 3D下TypeScript实现H5版3D投篮游戏!

 

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

Cocos Creator 3D下TypeScript实现H5版3D投篮游戏!

 

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

Cocos Creator 3D下TypeScript实现H5版3D投篮游戏!

 

●至于游戏中为什么要自己添加物理材质PhyMat,还有如何添加3D图片的材质,以及需要注意的事项,Blake老师的视频里都讲的很清楚了,这里就不再赘述,获取代码时,Blake老师的公开课资源下载地址,也会一并提供。

 

  修改内容

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

Cocos Creator 3D下TypeScript实现H5版3D投篮游戏!

 

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

Cocos Creator 3D下TypeScript实现H5版3D投篮游戏!

 

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

Cocos Creator 3D下TypeScript实现H5版3D投篮游戏!

 

●最后再安利一波,Blake老师的课程讲的真的很好,有兴趣的可以下载视频看看,照着老师的步骤,认真听,听完以后,接下来学习Cocos Creator 3D应该就没有之前那么吃力了。

微信扫一扫,关注公众号:

Cocos Creator 3D下TypeScript实现H5版3D投篮游戏!

Cocos Creator 3D下TypeScript实现H5版3D投篮游戏!