Cocos Creator 實現背景無限滾動效果

---

1、引言

  我們在製作一些2d遊戲時經常需要用到背景的滾動效果來做一些文章。

2、問題

  那麼既然背景滾動，那麼我們總不能做一個無限長的背景來移動吧，那怎麼辦呢！事實上，解決方案不止一種，我們這裏說一下兩張背景圖無限滾動的方法。

3、原理

  簡單來說就是場景中兩張背景圖片交替的在移動，在遊戲的每幀中不斷更新圖片的位置，以實現背景的循環滾動效果。

4、實現

4.1、場景搭建

  場景使用兩個並列的背景圖，如下所示：

4.2、代碼

  下面我們直接上代碼。

const {ccclass, property} = cc._decorator;

@ccclass
export default class Scene extends cc.Component {

    @property(cc.Node) bgNode1: cc.Node = null;
    @property(cc.Node) bgNode2: cc.Node = null;

    onLoad () {

        this.startBgRoll();
    }

    startBgRoll()
    {
        let self = this;

        let winSize:cc.Size = cc.winSize;
        let speed:number = 150;

        let durTime:number = winSize.width/speed;

        let moveToAction = cc.moveTo(durTime,-winSize.width,0);
        let moveByAction = cc.moveBy(durTime,-winSize.width,0);

        let action = cc.sequence(
            cc.spawn(
                moveToAction,
                cc.targetedAction(self.bgNode2,moveByAction)
            ),
            cc.callFunc(()=>{
                self.bgNode1.position = new cc.Vec2(winSize.width,0);
            }),
            cc.spawn(
                moveByAction,
                cc.targetedAction(self.bgNode2,moveToAction)
            ),
            cc.callFunc(()=>{
                self.bgNode2.position = new cc.Vec2(winSize.width,0);
            }),
        );
        action.repeatForever();
        this.bgNode1.runAction(action);
    }
}

  代碼比較簡單這裏就不介紹了。

5、效果展示

  下面是代碼實現的效果：

6、結束語

---

The End
  好了，今天的分享就到這裏，如有不足之處，還望大家及時指正，隨時歡迎探討交流！！！

---

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