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
  好了，今天的分享就到這裏，如有不足之處，還望大家及時指正，隨時歡迎探討交流！！！

---

喜歡的朋友們，請收藏、點贊、評論！您的肯定是我寫作的不竭動力！