Cocos Creator 开发实战——篮球物理游戏
- Cocos Creator 开发实战——篮球物理游戏
- 知识点
- 教程
- 基础背景搭建
- 物理系统
- 篮网制作
- 篮球
- 结语
Cocos Creator 开发实战——篮球物理游戏
本篇文章教大家实现篮球物理游戏最核心的功能,学会本篇文章知识点,写出一款篮球物理游戏分分钟的事情。
国际惯例先上效果
知识点
- Graphics 组件
- 关节组件 Distance Joint - 距离关节
- 刚体组件
教程
基础背景搭建
创建三个sprite节点,分别拖入相应的图片资源,层级关系是 down(下篮筐) > 篮球 > up(上篮筐)。
物理系统
使用物理系统就得添加刚体组件和物理系统的碰撞组件
添加碰撞分组信息
ball节点的group设置成ball,并添加刚体组件和物理碰撞组件,Allow Sleep 勾选去掉,防止静止不动会自动睡眠。Gravity Scale(重力)设置成0,后续用代码赋值。篮球是需要动的所以type设置成动态Dynamic
down节点的group设置成rim,并添加刚体组件、创建两个碰撞组件,一个在篮筐左边缘,一个在篮筐右边缘。篮筐是不需要动的所以type设置成动态Static,设置成静态后其它属性不会生效。
篮网制作
- 创建绘图器Graphics
新建节点->添加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();},
最终效果
结语
篮球物理游戏制作的核心技术已经写完,剩下的就是给篮球增加展示效果、左右屏点击控制篮球等,这些功能的实现已经都在文中有所提到,看完本篇文章,相信你自己已经有能力独立开发出一款篮球物理小游戏了,如果对教程有什么疑问,可以关注微信公众号联系我,我会尽我所能帮助到大家。需要本篇的资源可以在公众号上回复关键字:篮球物理。即可获得。
Cocos Creator 开发实战——篮球物理游戏相关推荐
- cocos creator开发攀爬类游戏
最近使用cocos creator制作了一个攀登楼梯的游戏,使用到了cocos creator 的碰撞系统,动画系统,还使用了骨骼动画. 这个游戏本身是一个3d游戏,使用2d引擎表现出来的效果自然比不 ...
- Cocos Creator开发制作的小游戏《5人足球》
作为一个足球爱好者,眼看卡塔尔世界杯要来了,身残志坚的我总想着做点事满足一下"私欲".于是在每个夜深人静的时候狂敲120分钟,大概耗了2520分钟敲完了第一版.目前已经上线微信小游 ...
- Cocos Creator 开发入门
Cocos Creator 开发入门 H5小游戏,基本都是用的Cocos Creator和LayaBox,egret 这三款引擎IDE. Cocos Creator官网:https://www.coc ...
- Cocos Creator入门实战:桌球小游戏
Cocos Creator入门实战:桌球小游戏 转载请保留原文链接:https://blog.csdn.net/zzx023/article/details/90035153 本篇主要是希望能够通过C ...
- Cocos Creator入门实战:桌球小游戏
本文作者:BigBear 多年游戏行业研发经验 精通Unreal.CocosCreator游戏引擎 参与过多款手游.端游项目的研发 Cocos Creator入门实战:桌球小游戏 本篇主要是希望能够通 ...
- cocos creator 开发浅塘游戏(1) 软件安装
cocos creator 开发浅塘游戏 文章目录 cocos creator 开发浅塘游戏 一.浅塘游戏 二.使用软件 1.cocos creator 2.vs code 一.浅塘游戏 浅塘是一款华 ...
- cocos creator 3.7微信小游戏开发云函数和云托管部署
cocos creator开发跨平台游戏能力不错,可以一次开发适用于多个平台,如andriod,ios原生,网页,各类小程序等等.就实际情况而言,能够跨1-2个平台已经不容易了,这是因为在跨平台开发中 ...
- vscode函数跳转插件_人生苦短,我们为 Cocos Creator 开发的插件和工具
在使用 Cocos Creator 开发项目的过程中,为了提高开发效率我们开发了很多扩展插件,本文介绍常用的几款,抛砖引玉,希望给大家带来帮助. 腾讯开心鼠英语 网页扩展:运行时查看场景节点树 Coc ...
- Cocos Creator 开发QQ玩一玩入门到放弃?
Cocos Creator 开发QQ玩一玩入门到放弃? 文章目录 Cocos Creator 开发QQ玩一玩入门到放弃? 1.环境搭建 1.1 开发工具准备 1.1.2 官方站点 1.1.3 编辑器使 ...
最新文章
- LeetCode224. Basic Calculator (用栈计算表达式)
- GitHub 标星 32.7 k!一行命令下载全网视频,这个项目牛逼了!
- PHP入门04 -- 面向对象程序设计
- pandas series取值_【小学生级】pandas入门到精通备查表——AI未来系列3
- RocketMQ的架构设计详解
- 【英语学习】【Level 07】U03 Amazing wonders L3 A pearl of East Asia
- linux 编译 连接失败,编译linux-3.15.5时遇到的几个错误
- java.sql.preparedstatement的应用
- vue-cli入门之项目结构分析
- Maven Oracle JDBC
- springboot自动配置原理_今日份学习之Spring Boot自动配置实现原理
- C# 中用DES 对称Key,IV 加密,前端crypto.js 解密
- 计算机专业英语第五章ppt,计算机专业英语课件5.ppt
- UCOS II怎么查找当前就绪表中,优先级最高的任务
- SPSS-Modeler安装
- 【病毒查杀】CAD杀毒方法
- Mac开发者福利来了!安利一波各领域不错的软件工具
- 【chrome插件开发一】初始chrome插件——helloWorld
- Google Play 注册开发者注意事项
- Ubuntu双显卡切换方法总结