Cocos Creator 篮球物理游戏开发实战
共 5724字,需浏览 12分钟
·
2021-04-21 01:23
本篇文章教大家实现篮球物理游戏最核心的功能,学会本篇文章知识点,写出一款篮球物理游戏分分钟的事情。
国际惯例先上效果:
知识点
Graphics 组件
关节组件 Distance Joint - 距离关节
刚体组件
教程
基础背景搭建
创建三个 sprite 节点,分别拖入相应的图片资源。
层级关系如下图所示:
物理系统
使用物理系统就得添加刚体组件和物理系统的碰撞组件。
添加碰撞分组信息:
ball 节点的 group 设置成 ball,并添加刚体组件和物理碰撞组件,Allow Sleep 勾选去掉,防止静止不动会自动睡眠。
Gravity Scale(重力)设置成 0,后续用代码赋值。篮球是需要动的所以 type 设置成动态 Dynamic。
down 节点的 group 设置成 rim,并添加刚体组件、创建两个碰撞组件,一个在篮筐左边缘,一个在篮筐右边缘。
篮筐是不需要动的所以 type 设置成动态 Static,设置成静态后其它属性不会生效。
篮网制作
创建绘图器 Graphics。
在层级管理器中创建一个空节点并命名为 net,然后在属性检查器下方点击添加组件按钮,选择渲染组件 -> Graphics,将 Graphics 组件的 Line Width 设置为 5(线条适合的宽度)。
绘制篮网需要用到的属性和接口说明如下所示:
开始绘制篮网:
篮网完成图
1)创建篮筐上的四个点
依次创建其它三个点:
2)创建关节组件 Distance Joint - 距离关节
添加组件 -> 物理组件 -> Joint -> Distance,距离关节组件里的 Distance(关节两端的距离)属性和 Frequency(弹性系数)属性后续通过代码控制。
依次创建其它三个点:
剩下慢慢拼出个篮网的形状:
3)添加碰撞组件:添加组件 -> 物理组件 -> Collider -> Chain。(注意:该组件在 v3.0 已移除)给外围线条添加上碰撞组件。
单个节点详细说明:碰撞组件中的 Points 写成 2,是为了把两点之间连上碰撞。
篮网代码
net 节点添加脚本组件 net,并把两边边缘的节点存入数组中。
//net.js
properties: {
LeftEdgeLine: [cc.Node], //左边缘线条
RightEdgeLine: [cc.Node], //右边缘线条
},
设置 distance 组件的属性
//net.js
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
}
},
渲染篮网
//net.js
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.js
properties: {
m_net: cc.Node,
m_down: cc.Node,
},
onLoad () {
//开启物理系统
cc.director.getPhysicsManager().enabled = true;
//设置篮网和篮筐外层的显示关系
this.m_net.zIndex = 6
this.m_down.zIndex = 7
},
效果
篮球
给篮球添加速度:添加一个向上的速度,使两者碰撞。
//Main.js
properties: {
m_ball: cc.Node, //篮球节点
m_net: cc.Node,
m_down: cc.Node,
},
添加触摸监听,并给篮球赋值速度
//Main.js
onLoad () {
//开启物理系统
cc.director.getPhysicsManager().enabled = true;
//设置篮网和篮筐外层的显示关系
this.m_net.zIndex = 6
this.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.js
properties: {
m_BottomGraphics: cc.Node,//底部线条渲染器
LeftEdgeLine: [cc.Node], //左边缘线条
RightEdgeLine: [cc.Node], //右边缘线条
},
//net.js
onLoad() {
//获得自身的 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);
//设置所有 Distance 组件的属性
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();
},
最终效果:
结语
以上就是篮球物理游戏制作的核心技术,剩下的就是给篮球增加展示效果、左右屏点击控制篮球等,这些功能的实现在文中都有所提到,看完本篇文章,相信你自己已经有能力独立开发出一款篮球物理小游戏了。
如果对教程有什么疑问,可以戳【阅读原文】,与原作者快乐交流。
往期精彩