Cocos Creator 开发实战——篮球物理游戏知识点教程基础背景搭建物理系统篮网制作篮球结语

Cocos Creator 开发实战——篮球物理游戏

本篇文章教大家实现篮球物理游戏最核心的功能，学会本篇文章知识点，写出一款篮球物理游戏分分钟的事情。

国际惯例先上效果

知识点

教程

基础背景搭建

创建三个sprite节点，分别拖入相应的图片资源，层级关系是 down(下篮筐) > 篮球 > up(上篮筐)。

物理系统

使用物理系统就得添加刚体组件和物理系统的碰撞组件

添加碰撞分组信息

ball节点的group设置成ball，并添加刚体组件和物理碰撞组件，Allow Sleep 勾选去掉，防止静止不动会自动睡眠。Gravity Scale(重力)设置成0，后续用代码赋值。篮球是需要动的所以type设置成动态Dynamic

down节点的group设置成rim，并添加刚体组件、创建两个碰撞组件，一个在篮筐左边缘，一个在篮筐右边缘。篮筐是不需要动的所以type设置成动态Static,设置成静态后其它属性不会生效。

篮网制作

新建节点->添加graphics组件(添加组件->渲染组件->Graphics)。将Line Width设置成5(线条适合的宽度)。

属性基础知识：绘制篮网需要用到的函数已经标志出来了。

开始绘制篮网

篮网完成图

1）创建篮筐上的四个点

依次创建其它三个点

2）创建关节组件 Distance Joint - 距离关节：添加组件->物理组件->Joint->Distance，距离关节组件里的Distance(关节两端的距离)属性和Frequency(弹性系数)属性后续通过代码控制。

依次创建其它三个点

剩下慢慢拼出个篮网的形状

3）添加碰撞组件：添加组件->物理组件->Collider->Chain。给外围线条添加上碰撞组件。

单个节点详细说明：碰撞组件中的Points写成2，是为了把两点之间连上碰撞。篮网代码

net节点添加脚本组件net，并把两边边缘的节点存入数组中。

properties: {LeftEdgeLine: [cc.Node], //左边缘线条RightEdgeLine: [cc.Node], //右边缘线条},

设置distance组件的属性

onLoad() {//获得自身的graphics组件this.graphics = this.node.getComponent(cc.Graphics);//获得节点下所有孩子节点的Distance的组件 返回的是一个数组this.distanceJoints = this.node.getComponentsInChildren(cc.DistanceJoint);//设置所有Distanc组件的属性this.AutoSetDistanceJoint();},//distance属性设置是节点与连接的刚体之间的距离//.mag() 内部算法是(x2+y2)开根号//如果发现篮网相互黏在一起，黏在一起的愿意是弹性系数太大或者太小，修改弹性系数到相应值即可AutoSetDistanceJoint: function () {for (var i = 0; i < this.distanceJoints.length; i++) {//设置链条的距离this.distanceJoints[i].distance = (this.distanceJoints[i].node.position.sub(this.distanceJoints[i].connectedBody.node.position)).mag(); //设置链条的弹性系数this.distanceJoints[i].frequency = 5}},

渲染篮网

update: function (dt) {//绘制器初始化this.graphics.clear();for (let i = 0; i < this.distanceJoints.length; i++) {//绘制器渲染篮网this.graphics.moveTo(this.distanceJoints[i].node.position.x, this.distanceJoints[i].node.position.y);this.graphics.lineTo(this.distanceJoints[i].connectedBody.node.x, this.distanceJoints[i].connectedBody.node.y);this.graphics.stroke();}//更新链条的碰撞组件this.UpdateAllChainCollider();},UpdateAllChainCollider: function () {//这是是从1开始的，因为篮筐上的四个点是没有添加distance组件。for (let i = 1; i < this.LeftEdgeLine.length; i++) {//设置碰撞链条位置this.LeftEdgeLine[i].getComponent(cc.PhysicsChainCollider).points[1] = this.LeftEdgeLine[i - 1].position.sub(this.LeftEdgeLine[i].position);this.RightEdgeLine[i].getComponent(cc.PhysicsChainCollider).points[1] = this.RightEdgeLine[i - 1].position.sub(this.RightEdgeLine[i].position);//设置完调用 apply()函数使其生效this.LeftEdgeLine[i].getComponent(cc.PhysicsChainCollider).apply();this.RightEdgeLine[i].getComponent(cc.PhysicsChainCollider).apply();}}

效果

让篮网动起来，并调整显示层级关系：在Canvas节点下添加脚本组件Main.js。

//Main.jsproperties: {m_net: cc.Node,m_down: cc.Node,},onLoad () {//开启物理系统cc.director.getPhysicsManager().enabled = true;//设置篮网和篮筐外层的显示关系this.m_net.zIndex = 6this.m_down.zIndex = 7},

效果

篮球

//Main.jsproperties: {m_ball: cc.Node,//篮球节点m_net: cc.Node,m_down: cc.Node,},

添加触摸监听，并给篮球赋值速度

//Main.jsonLoad () {//开启物理系统cc.director.getPhysicsManager().enabled = true;//设置篮网和篮筐外层的显示关系this.m_net.zIndex = 6this.m_down.zIndex = 7//激活触摸监听this.AddTouchEvent()},AddTouchEvent () {this.node.on(cc.Node.EventType.TOUCH_START,this.onTouchStart,this);},OffTouchEvent () {this.node.off(cc.Node.EventType.TOUCH_START,this.onTouchStart,this);},onTouchStart () {//设置篮球的速度this.m_ball.getComponent(cc.RigidBody).linearVelocity = cc.v2(0,1600)//设置篮球的重力this.m_ball.getComponent(cc.RigidBody).gravityScale = 6},

效果：​篮网和篮球之间有交互，但是可以看见篮筐内的两根线条是在篮球显示之前的

单独处理两根线条：新建节点，添加绘图组件单独渲染那两个节点。新建的节点位置是在ball节点和up节点之间。

//net.jsproperties: {m_BottomGraphics: cc.Node,//底部线条渲染器LeftEdgeLine: [cc.Node], //左边缘线条RightEdgeLine: [cc.Node], //右边缘线条},

//net.jsonLoad() {//获得自身的graphics组件this.graphics = this.node.getComponent(cc.Graphics);//获得渲染篮筐内的graphices组件this.bottomGraphics = this.m_BottomGraphics.getComponent(cc.Graphics);//使渲染篮筐内的绘图器和自身绘图器坐标一致this.m_BottomGraphics.setPosition(this.node.getPosition())//获得节点下所有孩子节点的Distance的组件 返回的是一个数组this.distanceJoints = this.node.getComponentsInChildren(cc.DistanceJoint);//设置所有Distanc组件的属性this.AutoSetDistanceJoint();},update: function (dt) {//绘制器初始化this.graphics.clear();this.bottomGraphics.clear();for (let i = 0; i < this.distanceJoints.length; i++) {//渲染篮筐内的绘图器 绘制篮筐内的线条if (this.distanceJoints[i].node.name == 'ConnectPointHide') {this.bottomGraphics.moveTo(this.distanceJoints[i].node.position.x, this.distanceJoints[i].node.position.y);this.bottomGraphics.lineTo(this.distanceJoints[i].connectedBody.node.x, this.distanceJoints[i].connectedBody.node.y);this.bottomGraphics.stroke();}else {this.graphics.moveTo(this.distanceJoints[i].node.position.x, this.distanceJoints[i].node.position.y);this.graphics.lineTo(this.distanceJoints[i].connectedBody.node.x, this.distanceJoints[i].connectedBody.node.y);this.graphics.stroke();}}//更新链条的碰撞组件this.UpdateAllChainCollider();},

最终效果

结语

篮球物理游戏制作的核心技术已经写完，剩下的就是给篮球增加展示效果、左右屏点击控制篮球等，这些功能的实现已经都在文中有所提到，看完本篇文章，相信你自己已经有能力独立开发出一款篮球物理小游戏了，如果对教程有什么疑问，可以关注微信公众号联系我，我会尽我所能帮助到大家。需要本篇的资源可以在公众号上回复关键字：篮球物理。即可获得。