Cocos Creator 实现相机移动背景无限滚动效果

---

1、引言

  这段时间写了一个休闲小游戏，其中一个点就是背景移动的，事实上我直接照着上一篇的思路写完了，发布后发现有问题，当切入后台又返回的时候，两个移动的背景之间间隙！发布在vivo上没问题，发布在oppo上就一直存在这个问题，然后我就尝试解决问题！

2、方法一

2.1、实现方法

  看到使用动作系统不可以，我立即修改代码使用了update来不断刷新背景的位置，代码如下：

onLoad () {
        let size:cc.Size = cc.winSize;
        this.bgNode1.setContentSize(size);
        this.bgNode1.setPosition(0,this.bgNode1.y);
        
        this.bgNode2.setContentSize(size);
        this.bgNode2.setPosition(this.bgNode1.x + this.bgNode2.width,this.bgNode1.y);
    }

update(dt){
        if(!this.isGameOver)
        {
            if(this.bgNode1.x <= -cc.winSize.width)
            {
                this.bgNode1.x = cc.winSize.width;
            }
            this.bgNode1.x -= dt * this.bgRollSpeed;

            if(this.bgNode2.x <= -cc.winSize.width)
            {
                this.bgNode2.x = cc.winSize.width;
            }
            this.bgNode2.x -= dt * this.bgRollSpeed;
        }
    }

2.2、问题分析

  写完立即放在oppo小游戏上测试发现，直接玩游戏，或者切换场景进入，没问题如果程序切入后台，再切回来又出现了上面的背景之间还是有一道缝隙，以为时计算错了于是反复阅读了代码，没发现问题！于是想到在切入后台回到前台时处理一下，在常驻节点加入了以下代码：

if(cc.sys.platform === cc.sys.OPPO_GAME)
{
	cc.game.on(cc.game.EVENT_HIDE,function(){
	     cc.director.pause();
	     cc.log("----------------->>>>进入后台")
	 })
	
	 cc.game.on(cc.game.EVENT_SHOW,function(){
	     cc.director.resume();
	     cc.log("----------------->>>>进入前台")
	 })
}

  结果发现这两句日志都打印了，然后问题依旧存在！这就引发一个问题，这种方式不可行，开始思考新方法！

3、方法二

3.1、实现思路

  这里发现上面使用的方式都是移动节点本身，这里换个思路移动相机看看能不能解决问题！creator里面多个相机图像会叠加，多摄像机共同使用时，渲染顺序是按照摄像机的景深来确定的，也就是摄像机的深度（Depth），深度值越大越后渲染，越小越先渲染。我们制作游戏时，就可以使用三个摄像机来实现背景的移动！每个相机渲染对应的分组！这里假设有三个分组，far,near,default,分别对应三个相机！这里我想同时移动两个背景图！三个相机依次是Main Camera、Near Camera、Far Camera，深度依次是2，1，0，并设置
clearFlags中的color为不勾选状态，这里不清除背景色！

update(dt){
		if(!this.isGameOver)
        {
            let dis:number = dt * this.bgRollSpeed;

            let posX:number = this.camera.node.x + dis;
            
            if(posX >= cc.winSize.width/2)
            {
                posX = -cc.winSize.width/2;
            }
			//项目中我只移动了一个相机
            this.camera.node.x = posX;
        }
}

  到这里问题得以解决，这里也可以换成动作系统。下面来看一下移动两个相机的效果演示！

3.2、Demo演示

3.3、示例下载

  为了方便大家，当然如果有不明白的童鞋也可以在这里点此下载Demo示例！

4、结束语

---

The End
  好了，今天的分享就到这里，如有不足之处，还望大家及时指正，随时欢迎探讨交流！！！

---

喜欢的朋友们，请收藏、点赞、评论！您的肯定是我写作的不竭动力！