CocosCreator背景无限滚动(使用多张图片实现)

本示例使用三张同样图片,排列方式为并排排列

逻辑关键代码:

  @property([cc.Node])
  bgs: cc.Node[] = []; //用于管理背景图片结点的数组,记得回cocos面板中添加数组的结点数量
  bg_speed: number = 20; //移动时控制速度的变量
  dis: number = this.bg_speed * 10; //即将消失的图片延迟消失距离
  onLoad() {}

  start() {}

  update(dt: any) {
    this.bgMove(this.bgs, this.bg_speed);
  }
  bgMove(bgList: cc.Node[], speed: number) {
    //每次循环三张图片一起滚动
    for (var index = 0; index < bgList.length; index++) {
      bgList[index].x += speed;
      if (bgList[index].x >= bgList[0].width - this.dis) {
        bgList[index].x = this.dis - 1920;
      }
    }
  }

运行效果:

你可能感兴趣的:(CocosCreator)