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
  好了，今天的分享就到这里，如有不足之处，还望大家及时指正，随时欢迎探讨交流！！！

---

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