(转)CocosCreator零基础制作游戏《极限跳跃》制作游戏主场景背景滚动
Posted wodehao0808
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了(转)CocosCreator零基础制作游戏《极限跳跃》制作游戏主场景背景滚动相关的知识,希望对你有一定的参考价值。
CocosCreator零基础制作游戏《极限跳跃》五、制作游戏主场景背景滚动
刚刚我们实现了玩家的一些功能,测试了下发现我们的玩家跳跃几次后,就会超出屏幕,这样体验很差,那下面我们来实现场景背景的滚动作为参照物来实现玩家移动。也就是说玩家只需要小范围的移动就行了,剩下的交给背景的移动来给用户带来玩家在移动的错觉,游戏都是这样实现的。
新建脚本BgMove,并实现移动方法,参数为移动的距离。实现代码:
03 |
extends: cc.Component, |
16 |
setMoveAction: function(height){ |
18 |
var moveHeight = height; |
19 |
var moveAction = cc.moveBy( this .jumpTimes, cc.p(0, - moveHeight)); |
创建好脚本后,我们在场景中给节点bg1、bg2绑定此脚本。
绑定后,我们在打开GAME.js脚本,在顶部引用此脚本。
然后在事件监听方法,触摸结束的方法里添加背景移动的监听。
02 |
setEventControl: function(){ |
04 |
var hero = self.player.getComponent(HeroPlayer); |
05 |
var bg1 = self.bgsprite1.getComponent(MoveBg); |
06 |
var bg2 = self.bgsprite2.getComponent(MoveBg); |
10 |
onTouchEnded: function (touch, event) { |
11 |
if (self.player.getPositionY() > 0){ |
13 |
var height = self.player.getPositionY(); |
14 |
self.player.setPositionY(height/2); |
16 |
bg1.node.runAction(bg1.setMoveAction(height)); |
17 |
bg2.node.runAction(bg2.setMoveAction(height)); |
这里分析下代码部分,首先我们创建场景时候,场景Canvas的锚点为(0.5,0.5),也就是屏幕的中心点坐标为0,0。其所有子节点的坐标都是相对于场景来布局,所以说我们的主角布局时候放在屏幕的中下方位置,一开始的Y坐标为负数。每次移动Y坐标会增加,当Y坐标增加超过中心点坐标我们需要进行背景移动,而背景移动的距离则是我们的主角Y坐标值减去中心点的Y坐标0,也就是主角Y坐标值本身。
所以每次触摸结束,我们对主角的Y坐标进行判断,如果大于0,说明背景需要移动,移动距离为主角Y坐标值,然后我门调用背景1和背景2的移动方法,参数为主角的Y坐标。
背景移动时候,我们同时需要修正主角的坐标,设置主角的坐标为超过中心点的一半,这样主角不论怎么移动都只能在屏幕内移动。
下面我门来运行预览,测试下。。
是不是可以实现背景滚动了,大家最后发现了一个问题,背景移动完毕了,没有背景会出现黑色的区域。。
下面我们要实现一个方法,来对背景进行计算。我们现在是两个背景进行拼接的。我们需要来判断哪个背景已经移除屏幕,移除屏幕后改变其位置,让它Y坐标变成正在移动的那个背景的上边,这样来实现无缝拼接。这样才是无限滚动的背景。
下面我们继续在GAME脚本添加新的方法来实现计算,下面贴代码。
04 |
setBgMoveCreate: function(){ |
06 |
if ( this .bgsprite1.getPositionY() < -500 ){ |
07 |
this .bgsprite2.setPositionY( this .bgsprite1.getPositionY()+ this .bgsprite1.getContentSize().height); |
10 |
if ( this .bgsprite2.getPositionY() < -500 ){ |
11 |
this .bgsprite1.setPositionY( this .bgsprite2.getPositionY()+ this .bgsprite2.getContentSize().height); |
15 |
update: function (dt) { |
17 |
this .setBgMoveCreate(); |
我们在update里不停的检测背景移动事件来解决黑色问题。下面来再次测试下。
到此我们已经实现了 玩家角色的移动,背景的滚动了。。游戏完成了三分之一了。。感觉还可以吧。继续。。
原文地址:https://www.byjth.com/jixiantiaoyue/70.html
以上是关于(转)CocosCreator零基础制作游戏《极限跳跃》制作游戏主场景背景滚动的主要内容,如果未能解决你的问题,请参考以下文章
(转)CocosCreator零基础制作游戏《极限跳跃》制作游戏主场景
(转)CocosCreator零基础制作游戏《极限跳跃》制作游戏障碍物实现碰撞检测
(转)CocosCreator零基础制作游戏《极限跳跃》十游戏打包发布,游戏复总结
(转)CocosCreator零基础制作游戏《极限跳跃》制作游戏主场景背景滚动
(转)CocosCreator零基础制作游戏《极限跳跃》添加游戏主场景控制脚本
(转)CocosCreator零基础制作游戏《极限跳跃》七制作游戏结束场景并实现场景切换