CocosCreator零基础制作游戏《极限跳跃》五、制作游戏主场景背景滚动
刚刚我们实现了玩家的一些功能，测试了下发现我们的玩家跳跃几次后，就会超出屏幕，这样体验很差，那下面我们来实现场景背景的滚动作为参照物来实现玩家移动。也就是说玩家只需要小范围的移动就行了，剩下的交给背景的移动来给用户带来玩家在移动的错觉，游戏都是这样实现的。
新建脚本BgMove，并实现移动方法，参数为移动的距离。实现代码：
01 | //BgMove.js |
02 | cc.Class({ |
03 | extends: cc.Component, |
04 | properties: { |
05 | // foo: { |
06 | // default: null, |
07 | // url: cc.Texture2D, // optional, default is typeof default |
08 | // serializable: true, // optional, default is true |
09 | // visible: true, // optional, default is true |
10 | // displayName: 'Foo', // optional |
11 | // readonly: false, // optional, default is false |
12 | // }, |
13 | // ... |
14 | }, |
15 | //背景移动 |
16 | setMoveAction: function(height){ |
17 | // 移动距离 |
18 | var moveHeight = height; |
19 | var moveAction = cc.moveBy(this.jumpTimes, cc.p(0, - moveHeight)); |
20 | return moveAction; |
21 | }, |
22 | // use this for initialization |
23 | onLoad: function () { |
24 | }, |
25 | // called every frame, uncomment this function to activate update callback |
26 | // update: function (dt) { |
27 | // }, |
28 | }); |
创建好脚本后，我们在场景中给节点bg1、bg2绑定此脚本。
绑定后，我们在打开GAME.js脚本，在顶部引用此脚本。
然后在事件监听方法，触摸结束的方法里添加背景移动的监听。
01 | //事件监听 |
02 | setEventControl: function(){ |
03 | var self = this; |
04 | var hero = self.player.getComponent(HeroPlayer);//角色绑定控件 |
05 | var bg1 = self.bgsprite1.getComponent(MoveBg);//绑定背景控件 |
06 | var bg2 = self.bgsprite2.getComponent(MoveBg);//绑定背景控件 |
07 | //..... |
08 | //...省略部分代码. |
09 | //..... |
10 | onTouchEnded: function (touch, event) { // 点击事件结束处理 |
11 | if(self.player.getPositionY() > 0){ |
12 | |
13 | var height = self.player.getPositionY();//背景需要移动的高度 |
14 | self.player.setPositionY(height/2);//设置精灵的高度位置 |
15 | |
16 | bg1.node.runAction(bg1.setMoveAction(height));//背景实现向下滚动 |
17 | bg2.node.runAction(bg2.setMoveAction(height));//背景实现向下滚动 |
18 | |
19 | } |
20 | //...省略部分代码. |
这里分析下代码部分，首先我们创建场景时候，场景Canvas的锚点为(0.5，0.5)，也就是屏幕的中心点坐标为0,0。其所有子节点的坐标都是相对于场景来布局，所以说我们的主角布局时候放在屏幕的中下方位置，一开始的Y坐标为负数。每次移动Y坐标会增加，当Y坐标增加超过中心点坐标我们需要进行背景移动，而背景移动的距离则是我们的主角Y坐标值减去中心点的Y坐标0，也就是主角Y坐标值本身。
所以每次触摸结束，我们对主角的Y坐标进行判断，如果大于0，说明背景需要移动，移动距离为主角Y坐标值，然后我门调用背景1和背景2的移动方法，参数为主角的Y坐标。
背景移动时候，我们同时需要修正主角的坐标，设置主角的坐标为超过中心点的一半，这样主角不论怎么移动都只能在屏幕内移动。
下面我门来运行预览，测试下。。
是不是可以实现背景滚动了，大家最后发现了一个问题，背景移动完毕了，没有背景会出现黑色的区域。。
下面我们要实现一个方法，来对背景进行计算。我们现在是两个背景进行拼接的。我们需要来判断哪个背景已经移除屏幕，移除屏幕后改变其位置，让它Y坐标变成正在移动的那个背景的上边，这样来实现无缝拼接。这样才是无限滚动的背景。
下面我们继续在GAME脚本添加新的方法来实现计算，下面贴代码。
01 | //GAME.js |
02 | //...省略代码 |
03 | //如果背景1的坐标移出屏幕开始设置新的坐标 |
04 | setBgMoveCreate: function(){ |
05 | //如果背景1的坐标移出屏幕开始设置新的坐标 |
06 | if(this.bgsprite1.getPositionY() < -500 ){ |
07 | this.bgsprite2.setPositionY(this.bgsprite1.getPositionY()+this.bgsprite1.getContentSize().height); |
08 | } |
09 | //如果背景2的坐标移出屏幕开始设置新的坐标 |
10 | if(this.bgsprite2.getPositionY() < -500 ){ |
11 | this.bgsprite1.setPositionY(this.bgsprite2.getPositionY()+this.bgsprite2.getContentSize().height); |
12 | } |
13 | }, |
14 | //实现update方法 |
15 | update: function (dt) { |
16 | |
17 | this.setBgMoveCreate();//检测背景 |
18 | |
19 | }, |
我们在update里不停的检测背景移动事件来解决黑色问题。下面来再次测试下。
到此我们已经实现了 玩家角色的移动，背景的滚动了。。游戏完成了三分之一了。。感觉还可以吧。继续。。
原文地址：https://www.byjth.com/jixiantiaoyue/70.html