creator 跳跃弧线_CocosCreator零基础制作游戏《极限跳跃》

本文介绍了如何使用CocosCreator从零开始制作游戏《极限跳跃》。主要内容包括创建MainScene,设置游戏背景、主角、金币、分数标签和声音图标。接着,通过添加GAME.js控制脚本来实现玩家跳跃、背景滚动等功能。文章详细讲解了各个步骤,包括主角跳跃逻辑、背景滚动的无缝拼接实现,以及游戏初步完成的状态。
摘要由CSDN通过智能技术生成

原标题:CocosCreator零基础制作游戏《极限跳跃》

刚刚我们制作了游戏的开始场景,现在我们来制作游戏的主场景。还是同样的方法,新建一个名为MainScene的场景,双击打开,修改场景的大小为480x800。

1、首先贴入游戏背景,在此我们使用了2张背景图,只需要把背景拖进层级管理器2次,修改名称为bg1,bg2即可,背景2接着背景1点上方设置位置。

2、摆放玩家主角在屏幕合适位置

3、添加金币按钮在屏幕上方

4、右键Canvas画布=》创建节点=》创建渲染节点=》Label文字。修改节点名为score。String属性值为0。

5、左上角加上声音图标

到此我们主场景大概完成了,下面来预览下。

四、添加游戏主场景控制脚本

前面简单的实现了主界面的UI设置,现在我们开始制作游戏的控制脚本。

在资源管理器的文件夹中,点击右键新建java文件,命名为GAME。

双击打开GAME脚本,在properties: 中添加属性代码。

保存好后,我们双击MainScene打开场景,点击Canvas,在右侧的属性检查器最底部,点击[添加组件]=》[添加用户脚本组件]然后选择我们刚刚创建的脚本GAME.js。

添加好后就可以在属性检查器看到我们的属性组件来,然后我们把场景里的节点拖进对应的属性框即可实现节点绑定。不懂得可以多看看官方文档。

这样我门就可以在GAME脚本里来操作节点了。

二、创建HeroPlayer脚本用来操作玩家主角

角色有2种状态,一种是玩家点击屏幕会实现角色的跳跃,第二种就是角色会受到引力会自动下落。我们在update来实现自动下落。添加好方法后,我门在层级管理器中点击hero节点。然后在右侧属性检查器中绑定脚本。

我门可以在里面初始化值。跳跃高度值,跳跃持续时间,掉落速度等。

脚本里主要实现了跳跃动作,掉落动作等。

然后回到我们的游戏主脚本也就是GAME脚本。添加触摸事件监听,实现监听触摸来调用主角的跳跃动作。

首先在顶部添加脚本引用,然后创建事件监听的方法。

然后在方法实现初始化调用。

我们可以来运行下,看下效果。

五、制作游戏主场景背景滚动

刚刚我们实现了玩家的一些功能,测试了下发现我们的玩家跳跃几次后,就会超出屏幕,这样体验很差,那下面我们来实现场景背景的滚动作为参照物来实现玩家移动。也就是说玩家只需要小范围的移动就行了,剩下的交给背景的移动来给用户带来玩家在移动的错觉,游戏都是这样实现的。

新建脚本BgMove,并实现移动方法,参数为移动的距离。实现代码:

创建好脚本后,我们在场景中给节点bg1、bg2绑定此脚本。

绑定后,我们在打开GAME.js脚本,在顶部引用此脚本。

然后在事件监听方法,触摸结束的方法里添加背景移动的监听。

这里分析下代码部分,首先我们创建场景时候,场景Canvas的锚点为(0.5,0.5),也就是屏幕的中心点坐标为0,0。其所有子节点的坐标都是相对于场景来布局,所以说我们的主角布局时候放在屏幕的中下方位置,一开始的Y坐标为负数。每次移动Y坐标会增加,当Y坐标增加超过中心点坐标我们需要进行背景移动,而背景移动的距离则是我们的主角Y坐标值减去中心点的Y坐标0,也就是主角Y坐标值本身。

所以每次触摸结束,我们对主角的Y坐标进行判断,如果大于0,说明背景需要移动,移动距离为主角Y坐标值,然后我门调用背景1和背景2的移动方法,参数为主角的Y坐标。

背景移动时候,我们同时需要修正主角的坐标,设置主角的坐标为超过中心点的一半,这样主角不论怎么移动都只能在屏幕内移动。

下面我门来运行预览,测试下。。

是不是可以实现背景滚动了,大家最后发现了一个问题,背景移动完毕了,没有背景会出现黑色的区域。。

下面我们要实现一个方法,来对背景进行计算。我们现在是两个背景进行拼接的。我们需要来判断哪个背景已经移除屏幕,移除屏幕后改变其位置,让它Y坐标变成正在移动的那个背景的上边,这样来实现无缝拼接。这样才是无限滚动的背景。

下面我们继续在GAME脚本添加新的方法来实现计算,下面贴代码。

我们在update里不停的检测背景移动事件来解决黑色问题。下面来再次测试下。

到此我们已经实现了 玩家角色的移动,背景的滚动了。。游戏完成了三分之一了。。感觉还可以吧。

未完待续............

作者:闭眼就天黑

来源:闭眼就天黑的博客

声明:发布此文是出于传递更多知识以供交流学习之目的。若有来源标注错误或侵犯了您的合法权益,请作者持权属证明与我们联系,我们将及时更正、删除,谢谢返回搜狐,查看更多

责任编辑:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值