CocosCreator入门学习《FlappyBird》(五):添加触摸响应

在CocosCreator中触摸监听事件(其实所有的内置事件都是)是加在节点(cc.Node)上,当该节点被操作,就会触发该事件的回调函数,这时我们就可以在回调函数里面做相应的处理,以此来完成一次界面交互。

那么本游戏应该把触摸响应加到什么节点上呢?

首先,我们这个游戏是需要全屏响应触摸事件的,那么我们需要找到一个覆盖整个界面的节点,很显然Canvas节点就符合要求。

创建一个BirdControl脚本,并且挂载到Bird节点,用来专门控制小鸟的游戏逻辑。

如上图所示,把脚本挂载好之后,就双击BirdControl脚本去vscode里面编辑代码。

如上图所示代码:

第一块代码,是定义了一个速度变量用来表示小鸟在Y轴方向的速度,正值表示向上飞,负值表示下落过程。

第二块代码,onLoad函数是CocosCreator提供的生命周期回调函数其中一个,在脚本所挂节点首次被激活的时候回触发该回调函数,一般用来做一些初始化相关操作。第24行代码就是给Canvas节点添加触摸事件响应。

注意参数的意义:

cc.Node.EventType.TOUCH_START从名字上大概就可以看出,这个事件是触摸开始的时候。

this.onTouchStart是我们自定义的回调函数。

第三个参数 this,用于绑定响应函数的调用者。这个参数很重要,一定要写上。

第三块代码,在update函数里面,让速度speed每帧减少0.05,这样是在模拟小鸟受重力影响做向上的匀减速运动或者向下的均加速运动。

第四块代码,onTouchStart函数是我们自定义的触摸回调函数,当我们鼠标点击游戏区域的时候就会触发这个函数,每次触发这个函数,我们给小鸟一个向上的速度,速度值为2。

保存代码,回到CocosCreator保存下场景运行,然后用鼠标在游戏区域点击,就会发现每点击一下,小鸟就会向上飞一段距离。

为了效果逼真一点,我们可以在小鸟向上飞的时候,把小鸟向上倾斜一点角度,向下坠落的时候,向下倾斜一个角度。

实现很简单,代码如下:

这段代码就是实现了根据小鸟的当前速度改变小鸟的倾斜角度,最大倾斜角度为30度。

效果图如下:

 

 

 

 

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
好的,下面是Cocos Creator快速入门的步骤: 1. 安装Cocos Creator 首先,你需要下载并安装Cocos Creator。你可以在Cocos官方网站上下载到最新版本的Cocos Creator。安装成功后,你就可以开始使用Cocos Creator进行游戏开发了。 2. 创建新项目 打开Cocos Creator后,你可以点击“新建项目”来创建一个新的项目。在创建项目的过程中,你需要选择项目名称、项目路径、项目类型等信息。 3. 创建场景 在Cocos Creator中,场景是游戏的基本组成部分。你可以通过点击“场景”按钮来创建一个新的场景。在场景中,你可以添加游戏对象、精灵、动画等元素。 4. 添加游戏对象 游戏对象是游戏中的基本元素,你可以通过在场景中添加游戏对象来创建游戏。在Cocos Creator中,你可以通过点击“节点”按钮来添加游戏对象。在添加游戏对象之后,你可以设置游戏对象的属性和行为。 5. 添加组件 组件是Cocos Creator中的重要概念,它可以给游戏对象添加功能。你可以通过在场景中添加组件来给游戏对象添加行为和属性。在Cocos Creator中,你可以通过点击“组件”按钮来添加组件。 6. 编写脚本 Cocos Creator中的脚本是用来实现游戏逻辑的。你可以通过编写脚本来给游戏对象添加更复杂的行为。在Cocos Creator中,你可以使用JavaScript或TypeScript来编写脚本。 7. 运行游戏 在完成上述步骤之后,你可以点击“运行”按钮来运行游戏。在游戏运行过程中,你可以测试游戏的功能和性能。 以上就是Cocos Creator快速入门的步骤。希望对你有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值