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

2024-03-21 08:50

本文主要是介绍Cocos Creator 篮球物理游戏开发实战,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

国际惯例先上效果:

5f0fccf91d671b009e1c54974be0e002.gif

知识点

  • Graphics 组件

  • 关节组件 Distance Joint - 距离关节

  • 刚体组件

教程

基础背景搭建

创建三个 sprite 节点,分别拖入相应的图片资源。

层级关系如下图所示:

1ec12bf0a580603e8733423e93cb12b5.jpeg

物理系统

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

添加碰撞分组信息:

6b0768a5b5752bc68240e69f19a028d4.png

ball 节点的 group 设置成 ball,并添加刚体组件和物理碰撞组件,Allow Sleep 勾选去掉,防止静止不动会自动睡眠。

Gravity Scale(重力设置成 0,后续用代码赋值。篮球是需要动的所以 type 设置成动态 Dynamic。

ddbf13d4ae55dc854a019d7cb74bc6fc.jpeg

down 节点的 group 设置成 rim,并添加刚体组件、创建两个碰撞组件,一个在篮筐左边缘,一个在篮筐右边缘。

篮筐是不需要动的所以 type 设置成动态 Static,设置成静态后其它属性不会生效。

5d0576090375c17493efe9dcd31e45b4.jpeg

篮网制作

创建绘图器 Graphics。

在层级管理器中创建一个空节点并命名为 net,然后在属性检查器下方点击添加组件按钮,选择渲染组件 -> Graphics,将 Graphics 组件的 Line Width 设置为 5(线条适合的宽度)。

a60acfd571a499a2c2af574310bc67d6.jpeg

绘制篮网需要用到的属性和接口说明如下所示:

ad950b22ea1879a7675aabaf8d2d0727.png

c88eea3a72f52d9785f829e2f53e9bc4.png

开始绘制篮网:

21ac0a384ab4acc95af6c099688c9923.jpeg

篮网完成图

1)创建篮筐上的四个点

8422b3a0434ec8155ac3b23368b6c5cb.jpeg

依次创建其它三个点:

ee5c7db8e6bd90513e5b4345aac92d9c.gif

2)创建关节组件 Distance Joint - 距离关节

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

6a45159ffbb6f2fdf07debbe1cf56d03.jpeg

依次创建其它三个点:

c155af24ce77e403440ec8c1a36de3ac.jpeg

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

d8e182a8a0421eebd7d433d9a228ae65.jpeg

3)添加碰撞组件:添加组件 -> 物理组件 -> Collider -> Chain。(注意:该组件在 v3.0 已移除)给外围线条添加上碰撞组件。

ca1e90e69d2b4cf9b025fc9573b79182.jpeg

单个节点详细说明:碰撞组件中的 Points 写成 2,是为了把两点之间连上碰撞。

b8ec740e8e35b54f9e7a3190dbb922cd.jpeg

篮网代码

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

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

f2b7a4077ff889877434f3f998443520.jpeg

设置 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();}
}

效果

45674318dbdc4154aafbe323468ca42d.png

让篮网动起来,并调整显示层级关系:在 Canvas 节点上挂载脚本组件 Main.js。

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

f41835afc9c1fc575689057c9fcbf109.jpeg

效果

c221d9f85772907a79c19d07f33a7768.gif

篮球

给篮球添加速度:添加一个向上的速度,使两者碰撞。

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

9b5e39de53d0f37826f617b675213600.jpeg  

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

//Main.js
onLoad () {//开启物理系统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
},

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

07e31a7389aa91376b53c9004099152e.gif

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

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

98931feb6b6d4b783fb3bf635bc7ffba.jpeg

//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();
},

最终效果:

a334775b6cfaee635adb6025f50328f8.gif

结语

以上就是篮球物理游戏制作的核心技术,剩下的就是给篮球增加展示效果、左右屏点击控制篮球等,这些功能的实现在文中都有所提到,看完本篇文章,相信你自己已经有能力独立开发出一款篮球物理小游戏了。

如果对教程有什么疑问,可以戳【阅读原文】,与原作者快乐交流。

往期精彩

4cd5d524183fba2d09291989efbaacbc.jpeg

f26c9a9d9bf8113a3c3eac82818c84c3.jpeg

4c3591c80623652e4c5b6504b0ce08f5.jpeg

这篇关于Cocos Creator 篮球物理游戏开发实战的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/832265

相关文章

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

《SpringBoot+MyBatisPlus高效开发实战从入门到进阶优化(推荐)》本文将详细介绍SpringBoot+MyBatisPlus的完整开发流程,并深入剖析分页查询、批量操作、动... 目录Spring Boot + MyBATis Plus 高效开发实战:从入门到进阶优化1. MyBatis

MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

《MyBatis动态SQL优化之标签的实战与技巧(常见用法)》本文通过详细的示例和实际应用场景,介绍了如何有效利用这些标签来优化MyBatis配置,提升开发效率,确保SQL的高效执行和安全性,感... 目录动态SQL详解一、动态SQL的核心概念1.1 什么是动态SQL?1.2 动态SQL的优点1.3 动态S

Python基于wxPython和FFmpeg开发一个视频标签工具

《Python基于wxPython和FFmpeg开发一个视频标签工具》在当今数字媒体时代,视频内容的管理和标记变得越来越重要,无论是研究人员需要对实验视频进行时间点标记,还是个人用户希望对家庭视频进行... 目录引言1. 应用概述2. 技术栈分析2.1 核心库和模块2.2 wxpython作为GUI选择的优

Pandas使用SQLite3实战

《Pandas使用SQLite3实战》本文主要介绍了Pandas使用SQLite3实战,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1 环境准备2 从 SQLite3VlfrWQzgt 读取数据到 DataFrame基础用法:读

利用Python开发Markdown表格结构转换为Excel工具

《利用Python开发Markdown表格结构转换为Excel工具》在数据管理和文档编写过程中,我们经常使用Markdown来记录表格数据,但它没有Excel使用方便,所以本文将使用Python编写一... 目录1.完整代码2. 项目概述3. 代码解析3.1 依赖库3.2 GUI 设计3.3 解析 Mark

利用Go语言开发文件操作工具轻松处理所有文件

《利用Go语言开发文件操作工具轻松处理所有文件》在后端开发中,文件操作是一个非常常见但又容易出错的场景,本文小编要向大家介绍一个强大的Go语言文件操作工具库,它能帮你轻松处理各种文件操作场景... 目录为什么需要这个工具?核心功能详解1. 文件/目录存javascript在性检查2. 批量创建目录3. 文件

Python实战之屏幕录制功能的实现

《Python实战之屏幕录制功能的实现》屏幕录制,即屏幕捕获,是指将计算机屏幕上的活动记录下来,生成视频文件,本文主要为大家介绍了如何使用Python实现这一功能,希望对大家有所帮助... 目录屏幕录制原理图像捕获音频捕获编码压缩输出保存完整的屏幕录制工具高级功能实时预览增加水印多平台支持屏幕录制原理屏幕

最新Spring Security实战教程之Spring Security安全框架指南

《最新SpringSecurity实战教程之SpringSecurity安全框架指南》SpringSecurity是Spring生态系统中的核心组件,提供认证、授权和防护机制,以保护应用免受各种安... 目录前言什么是Spring Security?同类框架对比Spring Security典型应用场景传统

最新Spring Security实战教程之表单登录定制到处理逻辑的深度改造(最新推荐)

《最新SpringSecurity实战教程之表单登录定制到处理逻辑的深度改造(最新推荐)》本章节介绍了如何通过SpringSecurity实现从配置自定义登录页面、表单登录处理逻辑的配置,并简单模拟... 目录前言改造准备开始登录页改造自定义用户名密码登陆成功失败跳转问题自定义登出前后端分离适配方案结语前言

基于Python开发批量提取Excel图片的小工具

《基于Python开发批量提取Excel图片的小工具》这篇文章主要为大家详细介绍了如何使用Python中的openpyxl库开发一个小工具,可以实现批量提取Excel图片,有需要的小伙伴可以参考一下... 目前有一个需求,就是批量读取当前目录下所有文件夹里的Excel文件,去获取出Excel文件中的图片,并